@griddo/ax 1.60.7 → 1.61.0

package/src/modules/PageEditor/index.tsx

@@ -64,7 +64,7 @@ const PageEditor = (props: IProps) => {
     handleGetPage();
 
     if (!pageID) {
-      setIsDirty(true);
+      setIsDirty(false);
     }
 
     const interval = setInterval(() => {

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

@@ -59,8 +59,12 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
     title: "Delete redirect",
     onClick: removeItem,
   };
+
   const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
 
+  const target = `(${redirect.domain || ""}|${redirect.site?.siteUrl || ""})`;
+  const regex = new RegExp(target, "g");
+
   return (
     <>
       <S.ItemRow role="rowgroup" selected={isSelected}>
@@ -75,10 +79,10 @@ const RedirectItem = (props: IRedirectItemProps): JSX.Element => {
           </S.SiteCell>
         )}
         <S.UrlCell role="cell" onClick={handleClick}>
-          {redirect.from}
+          {redirect.from.replace(regex, "")}
         </S.UrlCell>
         <S.UrlCell role="cell" onClick={handleClick}>
-          {redirect.to?.url}
+          {redirect.to?.url.replace(regex, "")}
         </S.UrlCell>
         <S.ActionsCell role="cell">
           <S.StyledActionMenu icon="more" options={menuOptions} tooltip="Actions" />

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

@@ -67,6 +67,7 @@ const RedirectPanel = (props: IProps): JSX.Element => {
         value={formValues.from}
         onChange={handleOldUrl}
         autoComplete="redirect-old"
+        helptext="Type the complete old page url you want to redirect."
       />
       <FieldsBehavior
         title="New URL"
@@ -77,6 +78,7 @@ const RedirectPanel = (props: IProps): JSX.Element => {
         handlePanel={toggleSecondaryPanel}
         inFloatingPanel={true}
         autoComplete="redirect-new"
+        helptext="Select an internal page or paste an external url."
       />
       <S.Footer>
         {redirect ? (

package/src/modules/Redirects/atoms.tsx

@@ -0,0 +1,212 @@
+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";
+
+const DeleteModal = (props: IModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Delete Redirects"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+    >
+      <S.ModalContent>
+        Are you sure you want to delete the selected <strong>redirects</strong>? This action{" "}
+        <strong>cannot be undone</strong>.
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+const OverwriteModal = (props: IModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Overwrite Redirect"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+    >
+      <S.ModalContent>
+        This Redirect is already created. It will overwrite.
+        <br />
+        This action <strong>cannot be undone</strong>.
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+const ImportModal = (props: IImportModal): JSX.Element => {
+  const { isOpen, toggleModal, checkImportData, isUploading, setIsUploading } = props;
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleUploadClick = () => fileInputRef.current && fileInputRef.current.click();
+
+  const csvToArray = (str: string, delimiter = ";") => {
+    const fixedStr = str.replace(/,/g, ";").replace(/\r/g, "");
+    const rows = fixedStr.slice(fixedStr.indexOf("\n") + 1).split("\n");
+
+    const arr = rows.map((row: string) => {
+      const values = row.split(delimiter);
+      return {
+        from: values[0],
+        to: values[1],
+      };
+    });
+
+    return arr;
+  };
+
+  const handleFileChange = (e: any) => {
+    setIsUploading(true);
+    const file = e.currentTarget.files[0];
+    const reader = new FileReader();
+
+    reader.onload = (e: any) => {
+      const text = e.target.result;
+      const data = csvToArray(text);
+      checkImportData(data);
+    };
+
+    reader.readAsText(file);
+  };
+
+  return (
+    <Modal isOpen={isOpen} hide={toggleModal} title="Import Redirects" size="M">
+      <S.ModalCenterContent>
+        {isUploading ? (
+          <>
+            <S.ModalIconWrapper>
+              <Icon name="uploadFile" size="48" />
+            </S.ModalIconWrapper>
+            <S.ModalUploadingText>Uploading...</S.ModalUploadingText>
+          </>
+        ) : (
+          <S.ModalContentWrapper>
+            <S.ModalIcon>
+              <Icon name="uploadFile" size="32" />
+            </S.ModalIcon>
+            <S.ModalTitle>Import 301 Redirects</S.ModalTitle>
+            <S.ModalText>
+              Import your URL redirects by uploading a CSV file.
+              <br />
+              To use the right format, please download the template available below.
+            </S.ModalText>
+            <S.ModalButtons>
+              <input
+                onChange={handleFileChange}
+                multiple={false}
+                ref={fileInputRef}
+                type="file"
+                accept=".csv,.xlsx,.xls"
+                hidden
+              />
+              <Button className="button" type="button" buttonStyle="line">
+                <a
+                  href={process.env.PUBLIC_URL + "/templates/template-redirects.csv"}
+                  download={"template-redirects.csv"}
+                >
+                  Download Template
+                </a>
+              </Button>
+              <Button className="button" type="button" onClick={handleUploadClick}>
+                Upload CSV file
+              </Button>
+            </S.ModalButtons>
+          </S.ModalContentWrapper>
+        )}
+      </S.ModalCenterContent>
+    </Modal>
+  );
+};
+
+const ImportCheckModal = (props: IImportCheckModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, imports, totalImports } = props;
+
+  const mapModalItems = (items: IRedirect[], icon: string, type: "online" | "error" | "info") => {
+    return items.map((item: IRedirect) => (
+      <S.ModalImportItem key={item.from}>
+        <S.ModalItemIcon type={type}>
+          <Icon name={icon} size="16" />
+        </S.ModalItemIcon>
+        <S.ModalUrl>{item.from}</S.ModalUrl>
+        <S.ModalItemArrow>
+          <Icon name="fullArrowRight" size="16" />
+        </S.ModalItemArrow>
+        <S.ModalUrl>{typeof item.to === "string" && item.to}</S.ModalUrl>
+      </S.ModalImportItem>
+    ));
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      mainAction={mainModalAction}
+      secondaryAction={secondaryModalAction}
+      title="Import Redirects"
+      size="L"
+    >
+      {imports && (
+        <S.ModalContent>
+          <S.ModalImportResult>
+            We found <strong>{totalImports} redirects</strong>. Continue to finish the uploading.
+          </S.ModalImportResult>
+          {imports.error.length > 0 && (
+            <S.ModalImportWrapper>
+              <S.ModalImportSection>
+                <strong>{imports.error.length}</strong> redirects that do not correspond to any site.
+              </S.ModalImportSection>
+              {mapModalItems(imports.error, "close", "error")}
+            </S.ModalImportWrapper>
+          )}
+          {imports.existing.length > 0 && (
+            <S.ModalImportWrapper>
+              <S.ModalImportSection>
+                <strong>{imports.existing.length}</strong> redirects already created. It will overwrite.
+              </S.ModalImportSection>
+              {mapModalItems(imports.existing, "info", "info")}
+            </S.ModalImportWrapper>
+          )}
+          {imports.ok.length > 0 && (
+            <S.ModalImportWrapper>
+              <S.ModalImportSection>
+                <strong>{imports.ok.length}</strong> redirects imported correctly.
+              </S.ModalImportSection>
+              {mapModalItems(imports.ok, "successSolid", "online")}
+            </S.ModalImportWrapper>
+          )}
+        </S.ModalContent>
+      )}
+    </Modal>
+  );
+};
+
+interface IImportModal extends IModal {
+  isUploading: boolean;
+  setIsUploading: React.Dispatch<React.SetStateAction<boolean>>;
+  checkImportData: (data: { from: string; to: string }[]) => void;
+}
+
+interface IImportCheckModal extends IModal {
+  totalImports: number;
+  imports: null | {
+    error: IRedirect[];
+    existing: IRedirect[];
+    ok: IRedirect[];
+  };
+}
+
+export { DeleteModal, ImportModal, OverwriteModal, ImportCheckModal };

package/src/modules/Redirects/index.tsx

@@ -4,11 +4,12 @@ import { connect } from "react-redux";
 import { INavItem, IRedirect, IRootState } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { redirectsActions } from "@ax/containers/Redirects";
-import { MainWrapper, ErrorToast, Nav, TableList, EmptyState, Modal, Toast } from "@ax/components";
+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 * as S from "./style";
 
@@ -23,6 +24,9 @@ const Redirects = (props: IProps): JSX.Element => {
     deleteRedirect,
     addRedirect,
     currentSiteID,
+    importRedirects,
+    imports,
+    totalImports,
   } = props;
 
   const itemsPerPage = 50;
@@ -35,7 +39,12 @@ const Redirects = (props: IProps): JSX.Element => {
   const [currentFilterQuery, setCurrentFilterQuery] = useState("");
   const [filterValues, setFilterValues] = useState({ sites: "all" });
   const { isVisible, toggleToast, setIsVisible } = useToast();
+  const { isVisible: isImportVisible, toggleToast: toggleImportToast, setIsVisible: setIsImportVisible } = useToast();
   const { isOpen: isOpenOverwrite, toggleModal: toggleOverwriteModal } = useModal();
+  const { isOpen: isOpenImport, toggleModal: toggleImportModal } = useModal();
+  const { isOpen: isOpenCheckImport, toggleModal: toggleCheckImportModal } = useModal();
+  const [importData, setImportData] = useState<{ from: string; to: string }[]>([]);
+  const [isUploading, setIsUploading] = useState(false);
 
   const initState = {
     from: "",
@@ -127,6 +136,11 @@ const Redirects = (props: IProps): JSX.Element => {
     action: () => handleModal(),
   };
 
+  const rightLineButtonProps = {
+    label: "Import Redirects",
+    action: () => toggleImportModal(),
+  };
+
   const handleMenuClick = (path: string) => {
     setHistoryPush(path);
   };
@@ -166,6 +180,11 @@ const Redirects = (props: IProps): JSX.Element => {
     message: "Redirect deleted",
   };
 
+  const toastImportProps = {
+    setIsVisible: setIsImportVisible,
+    message: `${(imports?.ok.length || 0) + (imports?.existing.length || 0)} Redirects imported`,
+  };
+
   const mainDeleteModalAction = {
     title: "Delete redirects",
     onClick: bulkDelete,
@@ -180,9 +199,37 @@ const Redirects = (props: IProps): JSX.Element => {
 
   const secondaryOverwriteModalAction = { title: "Cancel", onClick: toggleOverwriteModal };
 
+  const handleCheckImportData = async (data: { from: string; to: string }[]) => {
+    setImportData(data);
+    await importRedirects(data, true);
+    toggleImportModal();
+    setIsUploading(false);
+    toggleCheckImportModal();
+  };
+
+  const handleImportData = async () => {
+    const imported = await importRedirects(importData, false);
+    if (imported) {
+      toggleImportToast();
+    }
+    toggleCheckImportModal();
+  };
+
+  const mainImportModalAction = {
+    title: "Import correct directs",
+    onClick: handleImportData,
+  };
+
+  const secondaryImportModalAction = { title: "Cancel", onClick: toggleCheckImportModal };
+
   return (
     <>
-      <MainWrapper backLink={false} title="SEO Settings" rightButton={rightButtonProps}>
+      <MainWrapper
+        backLink={false}
+        title="SEO Settings"
+        rightButton={rightButtonProps}
+        rightLineButton={rightLineButtonProps}
+      >
         <S.Wrapper>
           <Nav current={currentNavItem} items={navItems} onClick={handleMenuClick} />
           <S.ContentWrapper>
@@ -227,6 +274,7 @@ const Redirects = (props: IProps): JSX.Element => {
               </TableList>
             </S.TableWrapper>
             {isVisible && <Toast {...toastProps} />}
+            {isImportVisible && <Toast {...toastImportProps} />}
           </S.ContentWrapper>
         </S.Wrapper>
         {isOpen && (
@@ -241,33 +289,33 @@ const Redirects = (props: IProps): JSX.Element => {
             currentFilter={currentFilterQuery}
           />
         )}
-        <Modal
+        <DeleteModal
           isOpen={isOpenDelete}
-          hide={toggleModalDelete}
-          title="Delete Redirects"
-          secondaryAction={secondaryDeleteModalAction}
-          mainAction={mainDeleteModalAction}
-          size="S"
-        >
-          <S.ModalContent>
-            Are you sure you want to delete the selected <strong>redirects</strong>? This action{" "}
-            <strong>cannot be undone</strong>.
-          </S.ModalContent>
-        </Modal>
-        <Modal
+          toggleModal={toggleModalDelete}
+          secondaryModalAction={secondaryDeleteModalAction}
+          mainModalAction={mainDeleteModalAction}
+        />
+        <OverwriteModal
           isOpen={isOpenOverwrite}
-          hide={toggleOverwriteModal}
-          title="Overwrite Redirect"
-          secondaryAction={secondaryOverwriteModalAction}
-          mainAction={mainOverwriteModalAction}
-          size="S"
-        >
-          <S.ModalContent>
-            This Redirect is already created. It will overwrite.
-            <br />
-            This action <strong>cannot be undone</strong>.
-          </S.ModalContent>
-        </Modal>
+          toggleModal={toggleOverwriteModal}
+          secondaryModalAction={secondaryOverwriteModalAction}
+          mainModalAction={mainOverwriteModalAction}
+        />
+        <ImportModal
+          isOpen={isOpenImport}
+          toggleModal={toggleImportModal}
+          checkImportData={handleCheckImportData}
+          isUploading={isUploading}
+          setIsUploading={setIsUploading}
+        />
+        <ImportCheckModal
+          isOpen={isOpenCheckImport}
+          toggleModal={toggleCheckImportModal}
+          mainModalAction={mainImportModalAction}
+          secondaryModalAction={secondaryImportModalAction}
+          imports={imports}
+          totalImports={totalImports}
+        />
       </MainWrapper>
     </>
   );
@@ -277,6 +325,8 @@ const mapStateToProps = (state: IRootState) => ({
   redirects: state.redirects.redirects,
   totalItems: state.redirects.totalItems,
   currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+  totalImports: state.redirects.totalImports,
+  imports: state.redirects.imports,
 });
 
 const mapDispatchToProps = {
@@ -284,6 +334,7 @@ const mapDispatchToProps = {
   getRedirects: redirectsActions.getRedirects,
   deleteRedirect: redirectsActions.deleteRedirect,
   addRedirect: redirectsActions.addRedirect,
+  importRedirects: redirectsActions.importRedirects,
 };
 interface IRedirectsProps {
   navItems: INavItem[];
@@ -291,6 +342,12 @@ interface IRedirectsProps {
   redirects: IRedirect[];
   totalItems: number;
   currentSiteID: number | null;
+  totalImports: number;
+  imports: null | {
+    error: IRedirect[];
+    existing: IRedirect[];
+    ok: IRedirect[];
+  };
 }
 
 interface IDispatchProps {
@@ -303,6 +360,7 @@ interface IDispatchProps {
     force?: boolean,
     filter?: string
   ): Promise<void>;
+  importRedirects(redirects: { from: string; to: string | number }[], check: boolean): Promise<boolean>;
 }
 
 type IProps = IRedirectsProps & IDispatchProps;

package/src/modules/Redirects/style.tsx

@@ -43,10 +43,131 @@ const EmptyWrapper = styled.div`
 
 const ModalContent = styled.div`
   padding: ${(p) => p.theme.spacing.m};
+`;
+
+const ModalCenterContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const ModalContentWrapper = styled.div`
+  width: 350px;
+`;
+
+const ModalIcon = styled.div`
+  display: flex;
+  background-color: ${(p) => p.theme.color.uiBackground03};
+  width: ${(p) => p.theme.spacing.xl};
+  height: ${(p) => p.theme.spacing.xl};
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  margin: ${(p) => `0 auto ${p.theme.spacing.m} auto`};
+`;
+
+const ModalIconWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.l};
+  height: ${(p) => p.theme.spacing.l};
+  margin-top: ${(p) => p.theme.spacing.xl};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const ModalUploadingText = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.interactive01};
+  text-align: center;
+`;
+
+const ModalTitle = styled.div`
+  ${(p) => p.theme.textStyle.headingS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  text-align: center;
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const ModalText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  text-align: center;
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
 
-  p {
-    margin-bottom: ${(p) => p.theme.spacing.m};
+const ModalButtons = styled.div`
+  display: flex;
+  justify-content: space-evenly;
+`;
+
+const ModalImportResult = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const ModalImportWrapper = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const ModalImportSection = styled.div`
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const ModalImportItem = styled.div`
+  display: flex;
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const ModalItemIcon = styled.div<{ type: "error" | "info" | "online" }>`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.xs};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color[p.type]};
+    }
   }
 `;
 
-export { Wrapper, ContentWrapper, TitleWrapper, Title, Description, TableWrapper, EmptyWrapper, ModalContent };
+const ModalItemArrow = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  margin-right: ${(p) => p.theme.spacing.xs};
+  margin-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const ModalUrl = styled.div`
+  width: 50%;
+`;
+
+export {
+  Wrapper,
+  ContentWrapper,
+  TitleWrapper,
+  Title,
+  Description,
+  TableWrapper,
+  EmptyWrapper,
+  ModalContent,
+  ModalCenterContent,
+  ModalIcon,
+  ModalTitle,
+  ModalText,
+  ModalButtons,
+  ModalContentWrapper,
+  ModalImportResult,
+  ModalImportSection,
+  ModalImportWrapper,
+  ModalImportItem,
+  ModalItemIcon,
+  ModalItemArrow,
+  ModalUrl,
+  ModalIconWrapper,
+  ModalUploadingText,
+};

package/src/modules/Settings/ContentTypes/DataPacks/index.tsx

@@ -199,7 +199,7 @@ const DataPacks = (props: IProps): JSX.Element => {
           )}
         </S.ContentWrapper>
       </S.ListWrapper>
-      <Modal isOpen={isOpen} hide={toggleModal} size="L" title="Available packages">
+      <Modal isOpen={isOpen} hide={toggleModal} size="XL" title="Available packages">
         {isOpen ? <AddModal toggleModal={toggleModal} /> : null}
       </Modal>
     </MainWrapper>

package/src/modules/StructuredData/StructuredDataList/BulkHeader/TableHeader/index.tsx

@@ -72,7 +72,7 @@ const TableHeader = (props: IProps): JSX.Element => {
           </S.NameWrapper>
           {isAllPages && activeColumns.includes("type") && (
             <S.HeaderWrapper>
-              <TypeFilter filterItems={filterItems} filters={typeFilters} pointer="types" />
+              <TypeFilter filterItems={filterItems} filters={typeFilters} value={filterValues.types} pointer="types" />
             </S.HeaderWrapper>
           )}
           {!isAllPages && activeColumns.includes("site") && (

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -51,7 +51,16 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const [deleteAllVersions, setDeleteAllVersions] = useState(false);
 
   const { locale } = lang;
-  const { title, pageLanguages, metaDescription, metaTitle, isIndexed, availableSites, structuredData, structuredDataContent } = globalPage;
+  const {
+    title,
+    pageLanguages,
+    metaDescription,
+    metaTitle,
+    isIndexed,
+    availableSites,
+    structuredData,
+    structuredDataContent,
+  } = globalPage;
 
   const publishedTooltip: Record<string, string> = {
     active: "Live",
@@ -305,8 +314,8 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
   const mainUnpublishAction = { title: "Ok", onClick: toggleUnpublishModal };
 
   const CategoryColumns = categoryColumns.map((col: any) => {
-    const type = structuredDataContent[col.from];
-    const categories = type && type.map((cat: any) => cat.label || cat.title);
+    const type = structuredDataContent && structuredDataContent[col.from];
+    const categories = Array.isArray(type) && type.map((cat: any) => cat.label || cat.title);
     return (
       activeColumns.includes(col.key) && (
         <CategoryCell