@griddo/ax 1.60.7 → 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/index.tsx

@@ -15,6 +15,7 @@ export class Main {
 
     const container = document.getElementById("root");
     if (!container) throw new Error('Failed to find the root element');
+    // @ts-ignore
     const root = ReactDOM.createRoot(container);
 
     root.render(

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