@griddo/ax 1.60.9 → 1.61.0

package/src/containers/Sites/actions.tsx

@@ -26,6 +26,7 @@ import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { navigationActions, menuActions } from "@ax/containers/Navigation";
 import { pageEditorActions } from "@ax/containers/PageEditor";
+import { analyticsActions } from "@ax/containers/Analytics";
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
 import { socialActions } from "@ax/containers/Settings/Social";
 import { handleRequest, isReqOk, sortBy } from "@ax/helpers";
@@ -34,6 +35,7 @@ const { setIsLoading, setIsSaving, setLanguage } = appActions;
 const { resetDefaultsValues } = navigationActions;
 const { resetPageEditor } = pageEditorActions;
 const { resetMenuValues } = menuActions;
+const { getAnalytics } = analyticsActions;
 
 function setSites(sitesList: ISite[]): ISetSitesAction {
   return { type: SET_SITES, payload: { sites: sitesList } };
@@ -345,6 +347,7 @@ const resetSiteValues = (dispatch: Dispatch) => {
   resetMenuValues(dispatch);
   dispatch(setCurrentSitePages([]));
   dispatch(setTotalItems(0));
+  getAnalytics()(dispatch);
 };
 
 function saveCurrentSiteInfo(): (dispatch: Dispatch, getState: any) => Promise<void> {

package/src/global.d.ts

@@ -7,3 +7,5 @@ declare module "is-wsl";
 declare module "react-draft-wysiwyg";
 declare module "history";
 declare module "@griddo/core";
+declare module "draftjs-to-html";
+declare module "html-to-draftjs";

package/src/helpers/index.tsx

@@ -17,6 +17,8 @@ import {
   decodeEntities,
   isNumber,
   getFileExtension,
+  splitAndJoin,
+  splitAndTrim,
 } from "./strings";
 
 import {
@@ -152,4 +154,6 @@ export {
   getFileExtension,
   moveArrayElement,
   isDevelopment,
+  splitAndJoin,
+  splitAndTrim,
 };

package/src/helpers/requests.tsx

@@ -13,13 +13,18 @@ function handleRequest(callback: any, responseActions: any, loadingActions: any[
 
     const response = await callback();
 
-    let result = false;
-    if (isReqOk(response.status)) {
-      handleSuccess(response.data);
-      result = true;
-    } else {
-      handleError(response);
-    }
+    const responseArr = Array.isArray(response) ? response : [response];
+
+    let result = true;
+
+    responseArr.forEach((response) => {
+      if (!isReqOk(response.status)) {
+        result = false;
+        handleError(response);
+      }
+    })
+
+    if (result) handleSuccess(response.data);
 
     loadingActions.map(action => dispatch(action(false)));
 

package/src/helpers/strings.tsx

@@ -81,6 +81,17 @@ const getFileExtension = (fileName: string): string | null => {
   return extension && extension[0].slice(1);
 };
 
+const splitAndJoin = (str = "", splitterIn = ",", splitterOut = ", "): string => {
+  return str?.split(splitterIn)
+    .map((str: string) => str.trim())
+    .filter((str: string) => str.length)
+    .join(splitterOut) || "";
+}
+
+const splitAndTrim = (str?: string, splitter = ","): (string | never)[] => {
+  return str?.split(splitter).map((str: string) => str.trim()).filter((str: string) => str.length) || [];
+}
+
 export {
   filterImageText,
   splitCamelCase,
@@ -93,4 +104,6 @@ export {
   decodeEntities,
   isNumber,
   getFileExtension,
+  splitAndJoin,
+  splitAndTrim,
 };

package/src/hooks/forms.tsx

@@ -116,7 +116,7 @@ const useIsDirty = (
     }
 
     if (isNew) {
-      setIsDirty(true);
+      setIsDirty(false);
     } else if (prevContent && updatedValues) {
       const isUpdated = hasChanged();
 

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

@@ -0,0 +1,71 @@
+import React from "react";
+
+import { IDimension } from "@ax/types";
+import { useModal } from "@ax/hooks";
+import { splitAndJoin, trimText } from "@ax/helpers";
+import { Modal } from "@ax/components";
+
+import DimensionPanel from "../DimensionPanel";
+import * as S from "./style";
+
+const Item = (props: IProps): JSX.Element => {
+  const { item, setDimensionItem, removeDimension } = props;
+
+  const { isOpen, toggleModal } = useModal();
+  const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal();
+
+  const handleClick = () => toggleModal();
+
+  const values = splitAndJoin(item.values, ";", "; ");
+  const hasValues = !["", "null"].includes(values);
+  const valuesText = hasValues ? values : "The value is defined on page";
+
+  const dimensionOptions = [
+    {
+      label: "Delete",
+      icon: "delete",
+      action: toggleRemoveModal,
+    },
+  ];
+
+  const mainRemoveModalAction = {
+    title: "Delete Dimension",
+    onClick: removeDimension,
+  };
+
+  const secondaryRemoveModalAction = { title: "Cancel", onClick: toggleRemoveModal };
+
+  return (
+    <>
+      <S.Component onClick={handleClick}>
+        <S.Name>{item.name}</S.Name><S.Values>{trimText(valuesText, 75)}</S.Values>
+        <S.StyledActionMenu icon="more" options={dimensionOptions} tooltip="Dimension actions" />
+      </S.Component>
+      <DimensionPanel item={item} isOpen={isOpen} toggleModal={toggleModal} setDimensionItem={setDimensionItem} />
+      <Modal
+        isOpen={isRemoveOpen}
+        hide={toggleRemoveModal}
+        title="Delete Dimension?"
+        secondaryAction={secondaryRemoveModalAction}
+        mainAction={mainRemoveModalAction}
+        size="S"
+      >
+        <S.ModalContent>
+          <p>
+            Are you sure you want to delete <strong>{item.name} dimension</strong>? If you delete it, this dimension will no longer be measurable.
+            <br />
+            This action <strong>cannot be undone</strong>.
+          </p>
+        </S.ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+interface IProps {
+  item: IDimension;
+  setDimensionItem(content: IDimension): void;
+  removeDimension: () => void;
+}
+
+export default Item;

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

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
+
+const StyledActionMenu = styled(ActionMenu)`
+  opacity: 0;
+  width: 32px;
+  display: flex;
+  margin-left: auto;
+`;
+
+const Component = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: ${(p) => p.theme.spacing.l};
+  background: ${(p) => p.theme.color.uiBackground02};
+  border: 1px solid transparent;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  padding: 0 ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+
+  &:hover ${StyledActionMenu} {
+    opacity: 1;
+  }
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  width: 40%;
+`
+
+const Values = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+`
+
+const Button = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  display: flex;
+  color: ${(p) => p.theme.color.interactive01};
+  margin-left: auto;
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export { Component, Button, Name, Values, StyledActionMenu, ModalContent };

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

@@ -0,0 +1,110 @@
+import React, { useEffect, useState } from "react";
+
+import { IDimension } from "@ax/types";
+import { FloatingPanel, Button, FieldsBehavior, NoteField } from "@ax/components";
+import { camelize, splitAndJoin } from "@ax/helpers";
+
+import * as S from "./style";
+
+const DimensionPanel = (props: IProps): JSX.Element => {
+  const { isOpen, toggleModal, item, setDimensionItem } = props;
+
+  const [type, setType] = useState("dimensionsAndValues");
+  const [name, setName] = useState("");
+  const [values, setValues] = useState("");
+
+  const resetState = () => {
+    setType("dimensionsAndValues");
+    setName(item?.name || "");
+
+    const values = splitAndJoin(item?.values, ";", ";");
+    const _values = values === "null" ? "" : values;
+    setValues(_values || "");
+  }
+
+  useEffect(() => {
+    isOpen && resetState();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
+  useEffect(() => {
+    type === "onlyDimensions" && setValues("")
+  }, [type]);
+
+  const editItemAction = () => {
+    setDimensionItem({ ...item, name: camelize(name), values });
+    toggleModal();
+  };
+
+  const title = item ? "Update Dimension" : "Add Dimension";
+
+  const editButton = {
+    label: title,
+    action: editItemAction,
+  };
+
+  const typeOptions = [
+    {
+      title: "Dimensions & Values",
+      name: "dimensionsAndValues",
+      value: "dimensionsAndValues",
+    },
+    {
+      title: "Only Dimensions",
+      name: "onlyDimensions",
+      value: "onlyDimensions",
+    },
+  ];
+
+  const noteTitle = "Dimensions & Values"
+  const noteText = "Create a dimension and its values. You define the values now and select them on any page later. Your analytics data will be homogeneous avoiding duplicates that might cause inaccurate data results."
+
+  return (
+    <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
+      <FieldsBehavior
+        name="removeItemChildren"
+        fieldType="RadioGroup"
+        title="Dimension type"
+        value={type}
+        options={typeOptions}
+        onChange={setType}
+        mandatory
+      />
+      <S.NoteWrapper>
+        <NoteField value={{ text: noteText, title: noteTitle }} />
+      </S.NoteWrapper>
+      <FieldsBehavior
+        title="Dimension"
+        name="name"
+        fieldType="TextField"
+        value={name}
+        onChange={setName}
+        mandatory
+      />
+      {type === "dimensionsAndValues" ? (
+        <FieldsBehavior
+          title="Values"
+          name="values"
+          fieldType="TextArea"
+          value={values}
+          onChange={setValues}
+          mandatory
+        />
+      ) : <></>}
+      <S.Footer>
+        <Button className="button" type="button" onClick={editButton.action}>
+          {editButton.label}
+        </Button>
+      </S.Footer>
+    </FloatingPanel>
+  );
+};
+
+interface IProps {
+  item?: IDimension;
+  isOpen: boolean;
+  toggleModal: () => void;
+  setDimensionItem(content: IDimension): void;
+}
+
+export default DimensionPanel;

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

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

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

@@ -0,0 +1,75 @@
+import React from "react";
+
+import { IDimension, IDimensionsGroup } from "@ax/types";
+import { useModal } from "@ax/hooks";
+import { splitAndJoin } from "@ax/helpers";
+import { Modal } from "@ax/components";
+
+import GroupPanel from "../GroupPanel";
+import * as S from "./style";
+
+const Item = (props: IProps): JSX.Element => {
+  const { item, setGroupItem, dimensions, removeGroup } = props;
+
+  const { isOpen, toggleModal } = useModal();
+  const { isOpen: isRemoveOpen, toggleModal: toggleRemoveModal } = useModal();
+
+  const handleClick = () => toggleModal();
+
+  const contentType = splitAndJoin(item.templates, ";", ", ");
+  const hasContentType = !["null", ""].includes(contentType);
+  const contentTypeText = hasContentType ? "Content Type" : "No Content Type";
+
+  const groupOptions = [
+    {
+      label: "Delete",
+      icon: "delete",
+      action: toggleRemoveModal,
+    },
+  ];
+
+  const mainRemoveModalAction = {
+    title: "Delete Group",
+    onClick: removeGroup,
+  };
+
+  const secondaryRemoveModalAction = { title: "Cancel", onClick: toggleRemoveModal };
+
+  return (
+    <>
+      <S.Component onClick={handleClick}>
+        <S.Name>{item.name}</S.Name>
+        <S.ComponentInfo>
+          <S.Values>{contentTypeText}{hasContentType && <S.ContentType>{contentType}</S.ContentType>}</S.Values>
+          <S.StyledActionMenu icon="more" options={groupOptions} tooltip="Dimensions group actions" />
+        </S.ComponentInfo>
+      </S.Component>
+      <GroupPanel item={item} isOpen={isOpen} toggleModal={toggleModal} setGroupItem={setGroupItem} dimensions={dimensions} />
+      <Modal
+        isOpen={isRemoveOpen}
+        hide={toggleRemoveModal}
+        title="Delete Group?"
+        secondaryAction={secondaryRemoveModalAction}
+        mainAction={mainRemoveModalAction}
+        size="S"
+      >
+        <S.ModalContent>
+          <p>
+            Are you sure you want to delete <strong>{item.name} dimensions</strong>? If you delete it, you will no longer be able to use it.
+            <br />
+            This action <strong>cannot be undone</strong>.
+          </p>
+        </S.ModalContent>
+      </Modal>
+    </>
+  );
+};
+
+interface IProps {
+  item: IDimensionsGroup;
+  setGroupItem(content: IDimensionsGroup): void;
+  dimensions: IDimension[];
+  removeGroup: () => void;
+}
+
+export default Item;

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

@@ -0,0 +1,80 @@
+import styled from "styled-components";
+import { ActionMenu } from "@ax/components";
+
+const StyledActionMenu = styled(ActionMenu)`
+  opacity: 0;
+  width: 32px;
+  display: flex;
+  margin-left: ${(p) => p.theme.spacing.s};
+`;
+
+const Component = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: ${(p) => p.theme.spacing.l};
+  background: ${(p) => p.theme.color.uiBackground02};
+  border: 1px solid transparent;
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+  padding: 0 ${(p) => p.theme.spacing.s};
+  border-radius: ${(p) => p.theme.radii.s};
+  box-shadow: ${(p) => p.theme.shadow.shadowS};
+  text-align: left;
+  cursor: pointer;
+
+  &:hover {
+    background: ${(p) => p.theme.color.overlayHoverPrimary};
+  }
+
+  &:hover ${StyledActionMenu} {
+    opacity: 1;
+  }
+`;
+
+const Name = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`
+
+const Values = styled.div`
+  display: flex;
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  `
+
+const Button = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  display: flex;
+  color: ${(p) => p.theme.color.interactive01};
+  margin-left: auto;
+  `;
+
+const ContentType = styled.div`
+  margin-left: ${(p) => p.theme.spacing.xxs};
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.interactive01};
+`
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const ComponentInfo = styled.div`
+  display: flex;
+  align-items: center;
+`
+
+export {
+  Component,
+  Button,
+  Name,
+  Values,
+  ContentType,
+  StyledActionMenu,
+  ModalContent,
+  ComponentInfo
+};

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;