@griddo/ax 1.60.7 → 1.61.0

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

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from "react";
+
+import { IDimension, IDimensionsGroup } from "@ax/types";
+import { FloatingPanel, Button, FieldsBehavior, CheckGroup, RadioGroup } from "@ax/components";
+import { splitAndTrim } from "@ax/helpers";
+
+import * as S from "./style";
+import { getTemplateOptions } from "./utils";
+
+const GroupPanel = (props: IProps): JSX.Element => {
+  const { isOpen, toggleModal, item, setGroupItem, dimensions } = props;
+
+  const [name, setName] = useState("");
+  const [selectedDimensions, setSelectedDimensions] = useState<(string | never)[]>(["all"]);
+  const [selectedTemplates, setSelectedTemplates] = useState<(string | never)[]>([]);
+  const [hasTemplate, setHasTemplate] = useState(false);
+
+  const templates = getTemplateOptions();
+  const resetState = () => {
+    setName(item?.name || "");
+
+    const dimensionOptions = [];
+    const dimensionsArr = splitAndTrim(item?.dimensions, ";");
+    const isAllDimensions = dimensionsArr.length === dimensions.length;
+    (!item || isAllDimensions)
+      ? dimensionOptions.push("all")
+      : dimensionOptions.push(...dimensionsArr);
+    setSelectedDimensions(dimensionOptions);
+
+    const templateOptions = [];
+    const templatesArr = splitAndTrim(item?.templates, ";");
+    !!item && templateOptions.push(...templatesArr);
+    const _templateOptions = templateOptions.filter((option) => option !== "null");
+    setSelectedTemplates(_templateOptions);
+
+    const hasTemplate = !!templateOptions.length && !templateOptions.includes("null");
+    setHasTemplate(hasTemplate);
+  }
+
+  useEffect(() => {
+    isOpen && resetState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  const editItemAction = () => {
+    const dimensionsArr = selectedDimensions.includes("all")
+      ? dimensions.map((dimension) => dimension.name)
+      : selectedDimensions;
+    const dimensionsStr = `;${dimensionsArr.join(";")}`;
+    const templatesStr = `;${selectedTemplates.join(";")}`;
+
+    const value = {
+      ...item,
+      name,
+      dimensions: dimensionsStr,
+      templates: templatesStr
+    };
+    setGroupItem(value);
+
+    toggleModal();
+  };
+
+  const title = item ? "Update Dimensions Group" : "Create Dimensions Group";
+
+  const editButton = {
+    label: title,
+    action: editItemAction,
+  };
+
+  const initialDimensionOption = {
+    name: "all",
+    value: "all",
+    title: "All Dimensions",
+  };
+  const dimensionOptions = [{ ...initialDimensionOption }];
+  dimensions?.forEach((dimension) => {
+    const { name } = dimension;
+    const option = { name, value: name, title: name };
+    return dimensionOptions.push(option);
+  });
+
+  const setDimensions = (selection: any) => {
+    if (!selection.length) selection = ["all"];
+    setSelectedDimensions([...selection]);
+  }
+
+  const setTemplates = (selection: any) => {
+    setSelectedTemplates([...selection]);
+  }
+
+  const selectedDimensionsN = selectedDimensions.includes("all")
+    ? dimensions?.length
+    : selectedDimensions.length;
+
+  const hasTemplateOpts = [
+    {
+      title: "No",
+      value: "no",
+      name: "no",
+    },
+    {
+      title: "Yes",
+      value: "yes",
+      name: "yes",
+    },
+  ];
+  const handleChangeHasTemplate = (value: string | boolean) => {
+    const hasTemplate = value === "yes";
+    setHasTemplate(hasTemplate);
+    !hasTemplate && setSelectedTemplates([]);
+
+  }
+
+  return (
+    <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
+      <S.ContentWrapper>
+        <FieldsBehavior
+          title="Dimension"
+          name="name"
+          fieldType="TextField"
+          value={name}
+          onChange={setName}
+          mandatory
+        />
+        <S.Divider />
+        <S.Heading>
+          <S.HeadingText>Dimensions</S.HeadingText>
+          <S.HeadingCounter>{selectedDimensionsN}/{dimensions?.length}</S.HeadingCounter>
+        </S.Heading>
+        <S.Description>Select the dimensions to this content.</S.Description>
+        <CheckGroup
+          options={dimensionOptions}
+          value={selectedDimensions}
+          onChange={setDimensions}
+          selectAllOption="all"
+        />
+        <S.Divider />
+        <S.Heading $spaceBetween>
+          <S.HeadingText>Dimensions</S.HeadingText>
+          <S.RadioTemplate>
+            <RadioGroup
+              name="hasTemplate"
+              value={hasTemplate ? "yes" : "no"}
+              options={hasTemplateOpts}
+              onChange={handleChangeHasTemplate}
+              inline
+            />
+          </S.RadioTemplate>
+        </S.Heading>
+        <S.Description>If you create a page of this template, it will appear with these dimensions by default.</S.Description>
+        {hasTemplate ? (
+          <CheckGroup
+            options={templates}
+            value={selectedTemplates}
+            onChange={setTemplates}
+          />
+        ) : (
+          <></>
+        )}
+      </S.ContentWrapper>
+      <S.Footer>
+        <Button className="button" type="button" onClick={editButton.action}>
+          {editButton.label}
+        </Button>
+      </S.Footer>
+    </FloatingPanel>
+  );
+};
+
+interface IProps {
+  item?: IDimensionsGroup;
+  isOpen: boolean;
+  toggleModal: () => void;
+  setGroupItem(content: IDimensionsGroup): void;
+  dimensions: IDimension[];
+}
+
+export default GroupPanel;

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