@griddo/ax 1.60.9 → 1.61.0

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

@@ -0,0 +1,67 @@
+import styled from "styled-components";
+
+const Footer = styled.div`
+  position: absolute;
+  bottom: ${(p) => p.theme.spacing.m};
+  right: ${(p) => p.theme.spacing.m};
+`;
+
+const Divider = styled.div`
+  position: relative;
+  height: 1px;
+  margin-top: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+
+  &:after {
+    content: "";
+    position: absolute;
+    height: 1px;
+    width: calc(100% + ${(p) => p.theme.spacing.m} * 2);
+    top: 0;
+    left: calc(-${(p) => p.theme.spacing.m});
+    border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  }
+`;
+
+const Heading = styled.div<{ $spaceBetween?: boolean }>`
+  ${(p) => p.theme.textStyle.headingXS};
+  display: flex;
+  justify-content: ${(p) => p.$spaceBetween ? "space-between" : "flex-start"};
+`;
+
+const HeadingText = styled.div`
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const HeadingCounter = styled.div`
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-left: ${(p) => p.theme.spacing.xs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.s};
+`;
+
+const RadioTemplate = styled.div``;
+
+const ContentWrapper = styled.div`
+  height: calc(100% - ${(p) => p.theme.spacing.s} * 10);
+  overflow-y: scroll;
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  position: absolute;
+  left: 0;
+  padding: 0 ${(p) => p.theme.spacing.m} ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
+`;
+
+export {
+  Footer,
+  Divider,
+  Heading,
+  HeadingText,
+  HeadingCounter,
+  Description,
+  RadioTemplate,
+  ContentWrapper
+};

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

@@ -0,0 +1,29 @@
+import { schemas } from "components";
+
+const getTemplateOptions = (): ITemplateOption[] => {
+  const { templates } = schemas;
+  const templatesOptionsValues: ITemplateOption[] = [];
+
+  Object.keys(templates).forEach((schema: string) => {
+    const currSchema = templates[schema];
+    const { component, displayName } = currSchema;
+
+    !!currSchema.type &&
+      ["list", "detail"].includes(currSchema.type.mode) &&
+      templatesOptionsValues.push({
+        name: component,
+        title: displayName,
+        value: component,
+      });
+  });
+
+  return templatesOptionsValues;
+};
+
+interface ITemplateOption {
+  name: string,
+  title: string,
+  value: string,
+}
+
+export { getTemplateOptions };

package/src/modules/Analytics/index.tsx

@@ -0,0 +1,207 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+
+import { IAnalytics, IDimension, IDimensionsGroup, IRootState } from "@ax/types";
+import { appActions } from "@ax/containers/App";
+import { analyticsActions } from "@ax/containers/Analytics";
+import { MainWrapper, ErrorToast, Loading, FieldsBehavior } from "@ax/components";
+import { RouteLeavingGuard } from "@ax/guards";
+import { useIsDirty } from "@ax/hooks";
+import { useModal } from "@ax/hooks";
+
+import DimensionItem from "./DimensionItem";
+import DimensionPanel from "./DimensionPanel";
+import GroupItem from "./GroupItem";
+import GroupPanel from "./GroupPanel";
+import * as S from "./style";
+
+const Analytics = (props: IProps): JSX.Element => {
+  const {
+    isSaving,
+    isLoading,
+    analytics,
+    getAnalytics,
+    setHistoryPush,
+    site,
+    updateAnalytics,
+  } = props;
+
+  const [analyticsState, setAnalyticsState] = useState(analytics);
+  const { isDirty, resetDirty } = useIsDirty(analyticsState);
+  const { isOpen: isDimensionOpen, toggleModal: toggleDimensionModal } = useModal();
+  const { isOpen: isGroupOpen, toggleModal: toggleGroupModal } = useModal();
+
+  const { scriptCode, dimensions, groups } = analyticsState;
+
+  const changeScriptCode = (scriptCode: string) => setAnalyticsState((state) => ({ ...state, scriptCode }));
+  const changeDimensions = (dimensions: IDimension[]) => setAnalyticsState((state) => ({ ...state, dimensions }));
+  const changeGroups = (groups: IDimensionsGroup[]) => setAnalyticsState((state) => ({ ...state, groups }));
+
+  useEffect(() => {
+    getAnalytics(site?.id);
+  }, [getAnalytics, site?.id]);
+
+  useEffect(() => {
+    setAnalyticsState(analytics);
+  }, [analytics]);
+
+  const handleSave = async () => {
+    const isSaved = await updateAnalytics(analyticsState, site?.id);
+    if (isSaved) resetDirty();
+  };
+
+  const rightButtonProps = {
+    label: isSaving ? "Saving" : "Save",
+    disabled: isSaving,
+    action: () => handleSave(),
+  };
+
+  const mapDimensionList = (items: IDimension[]) =>
+    Array.isArray(items) &&
+    items.map((item: IDimension, i: number) => {
+      const handleSetItem = (newContent: IDimension) => {
+        const newItems = [...dimensions];
+        newItems[i] = newContent;
+        changeDimensions(newItems);
+      };
+      const handleRemoveDimension = () => {
+        const newItems = [...dimensions];
+        newItems.splice(i, 1);
+        changeDimensions(newItems);
+      };
+      return (
+        <DimensionItem
+          key={`${item.id}${item.name}${i}`}
+          item={item}
+          setDimensionItem={handleSetItem}
+          removeDimension={handleRemoveDimension}
+        />
+      );
+    });
+
+  const mapGroupList = (items: IDimensionsGroup[]) =>
+    Array.isArray(items) &&
+    items.map((item: IDimensionsGroup, i: number) => {
+      const handleSetItem = (newContent: IDimensionsGroup) => {
+        const newItems = [...groups];
+        newItems[i] = newContent;
+        changeGroups(newItems);
+      };
+      const handleRemoveGroup = () => {
+        const newItems = [...groups];
+        newItems.splice(i, 1);
+        changeGroups(newItems);
+      };
+      return (
+        <GroupItem
+          key={`${item.id}${item.name}${i}`}
+          item={item}
+          setGroupItem={handleSetItem}
+          dimensions={dimensions}
+          removeGroup={handleRemoveGroup}
+        />
+      )
+    });
+
+  const handleAddDimension = (item: IDimension) => {
+    const { dimensions } = analyticsState;
+    const updatedDimensions = dimensions ? [...dimensions, item] : [item];
+    changeDimensions(updatedDimensions);
+  }
+
+  const handleAddGroup = (item: IDimensionsGroup) => {
+    const { groups } = analyticsState;
+    const updatedGroups = groups ? [...groups, item] : [item];
+    changeGroups(updatedGroups);
+  }
+
+  const setRoute = (path: string) => setHistoryPush(path);
+  const modalText = (
+    <>
+      Some analytics <strong>are not saved</strong>.{" "}
+    </>
+  );
+
+  const isGroupDisabled = dimensions?.length < 2;
+
+  if (isLoading) return <Loading />;
+
+  return (
+    <>
+      <RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
+      <MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
+        <ErrorToast />
+        <S.Wrapper>
+          <S.FormWrapper>
+            <S.ScriptCodeWrapper>
+              <FieldsBehavior
+                title="Analytics Tracking ID or Script Code"
+                name="scriptCode"
+                fieldType="TextArea"
+                value={scriptCode || ""}
+                onChange={changeScriptCode}
+                placeholder="Type the Google Analytics or Google Tag Manager code."
+              />
+            </S.ScriptCodeWrapper>
+            <S.SettingsWrapper>
+              <S.Heading>Data layer configuration</S.Heading>
+              <S.SettingContent>
+                <S.SettingText>
+                  You can configure Data Layer to measure dimensions and data values when loading a page.
+                </S.SettingText>
+                <S.StyledButton type="button" buttonStyle="text" icon="addCircle" onClick={toggleDimensionModal}>
+                  Add dimension
+                </S.StyledButton>
+                <S.Table>{dimensions && mapDimensionList(dimensions)}</S.Table>
+              </S.SettingContent>
+            </S.SettingsWrapper>
+            <S.SettingsWrapper>
+              <S.Heading>Dimensions group by content</S.Heading>
+              <S.SettingContent>
+                <S.SettingText>
+                  You can create groups with the dimensions to measure on a page based on its content..
+                </S.SettingText>
+                <S.StyledButton type="button" buttonStyle="text" icon="addCircle" onClick={toggleGroupModal} disabled={isGroupDisabled}>
+                  Define group
+                </S.StyledButton>
+                <S.Table>{groups && mapGroupList(groups)}</S.Table>
+              </S.SettingContent>
+            </S.SettingsWrapper>
+          </S.FormWrapper>
+        </S.Wrapper>
+        <DimensionPanel isOpen={isDimensionOpen} toggleModal={toggleDimensionModal} setDimensionItem={handleAddDimension} />
+        <GroupPanel isOpen={isGroupOpen} toggleModal={toggleGroupModal} setGroupItem={handleAddGroup} dimensions={dimensions} />
+      </MainWrapper>
+    </>
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  isSaving: state.app.isSaving,
+  isLoading: state.app.isLoading,
+  analytics: state.analytics,
+  site: state.sites.currentSiteInfo,
+});
+
+const mapDispatchToProps = {
+  setHistoryPush: appActions.setHistoryPush,
+  getAnalytics: analyticsActions.getAnalytics,
+  updateAnalytics: analyticsActions.updateAnalytics,
+};
+
+interface IAnalyticsProps {
+  isSaving: boolean;
+  isLoading: boolean;
+  analytics: IAnalytics;
+  site: any;
+}
+
+interface IDispatchProps {
+  getAnalytics(siteId?: number): void;
+  setHistoryPush(path: string, isEditor?: boolean): void;
+  updateAnalytics(analyticsState: IAnalytics, siteId?: number): Promise<boolean>;
+}
+
+type IProps = IAnalyticsProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Analytics);

package/src/modules/Analytics/style.tsx

@@ -0,0 +1,68 @@
+import styled from "styled-components";
+import { Button } from "@ax/components";
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100%;
+  overflow: auto;
+  flex-direction: column;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const Table = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: ${(p) => p.theme.spacing.m};
+`;
+
+const Heading = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const SettingsWrapper = styled.div`
+  position: relative;
+`;
+
+const ScriptCodeWrapper = styled.div`
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const SettingContent = styled.div`
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  padding-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const SettingText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  width: calc(${(p) => p.theme.spacing.l} * 12);
+`;
+
+const StyledButton = styled(Button)`
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+
+const FormWrapper = styled.div`
+  width: 720px;
+  margin: ${(p) => `${p.theme.spacing.m} 0 0 ${p.theme.spacing.m}`};
+`;
+
+export {
+  Wrapper,
+  Table,
+  Heading,
+  SettingsWrapper,
+  SettingContent,
+  SettingText,
+  StyledButton,
+  FormWrapper,
+  ScriptCodeWrapper
+};

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

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

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

@@ -261,8 +261,8 @@ 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[] = [
     {
@@ -370,7 +370,7 @@ const PageItem = (props: IPageItemProps): JSX.Element => {
     isGlobal &&
     categoryColumns.map((col: any) => {
       const type = structuredDataContent[col.from];
-      const categories = type && type.map((cat: any) => cat.label || cat.title);
+      const categories = Array.isArray(type) && type.map((cat: any) => cat.label || cat.title);
       return (
         activeColumns.includes(col.key) && (
           <CategoryCell

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

@@ -90,6 +90,7 @@ const Wrapper = styled.div`
 
 const ActionsCell = styled(Cell)`
   flex: 0 0 100px;
+  text-align: center;
 `;
 
 const CategoryCell = styled(Cell)`
@@ -102,7 +103,6 @@ const StyledActionMenu = styled(ActionMenu)`
   opacity: 0;
   width: 32px;
   display: flex;
-  margin-left: auto;
 `;
 
 const PageRow = styled(Row)<{ global?: boolean }>`

package/src/modules/Content/hooks.tsx

@@ -23,8 +23,8 @@ const useSortedListStatus = () => {
 
 const useFilterQuery = () => {
   const initialQueryValues = {
-    type: "",
-    translated: "",
+    type: "all",
+    translated: "all",
     liveStatus: "all",
     order: "",
     categories: "all",

package/src/modules/Content/index.tsx

@@ -161,25 +161,26 @@ 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,
-        format: "list",
-      } : {
-        siteID,
-        deleted: false,
-        page,
-        itemsPerPage,
-        query: searchQuery,
-        format: "list",
-      };
+    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;
   }, [filter, currentSiteInfo, isStructuredData, page, searchQuery]);
@@ -237,7 +238,8 @@ const Content = (props: IProps): JSX.Element => {
     if (!isLoading) {
       const isContentType = filter !== "unique-pages";
       const emptyState: IEmptyStateProps = {};
-      const isSearching = searchQuery.length > 0;
+      const { liveStatus, translated, type } = filterValues;
+      const isSearching = searchQuery.length > 0 || liveStatus !== "all" || translated !== "all" || type !== "all";
       if (isSearching) {
         emptyState.icon = "search";
         emptyState.title = "Oh! No Results Found";

package/src/modules/GlobalEditor/index.tsx

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

package/src/modules/Navigation/Defaults/DefaultsEditor/index.tsx

@@ -45,7 +45,7 @@ const DefaultsEditor = (props: IProps) => {
   useEffect(() => {
     getValues();
     if (isNew) {
-      setIsDirty(true);
+      setIsDirty(false);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -88,7 +88,7 @@ const DefaultsEditor = (props: IProps) => {
   };
 
   const createNewTranslation = (isNewTranslation: boolean) => {
-    setIsDirty(true);
+    setIsDirty(false);
     createTranslation(isNewTranslation);
   };
 

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 ? (