@griddo/ax 1.61.7 → 1.62.2

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

@@ -2,20 +2,24 @@ 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 { camelize, capitalize, splitAndJoin, splitCamelCase } 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 isOnlyDimensions = item && ["", "null"].includes(item.values);
+  const typeInitialState = isOnlyDimensions ? "onlyDimensions" : "dimensionsAndValues";
+  const [type, setType] = useState(typeInitialState);
   const [name, setName] = useState("");
   const [values, setValues] = useState("");
+  const [errors, setErrors] = useState({ name: false, values: false });
 
   const resetState = () => {
-    setType("dimensionsAndValues");
-    setName(item?.name || "");
+    setType(typeInitialState);
+    setName(item ? splitCamelCase(item.name) : "");
+    setErrors({ name: false, values: false });
 
     const values = splitAndJoin(item?.values, ";", ";");
     const _values = values === "null" ? "" : values;
@@ -32,15 +36,29 @@ const DimensionPanel = (props: IProps): JSX.Element => {
   }, [type]);
 
   const editItemAction = () => {
-    setDimensionItem({ ...item, name: camelize(name), values });
+    setDimensionItem({
+      ...item,
+      name: capitalize(camelize(name)),
+      values
+    });
     toggleModal();
   };
 
+  const validateFields = () => {
+    const errorFields = {
+      name: !name.length,
+      values: type === "dimensionsAndValues" && !values.length
+    }
+    setErrors(errorFields);
+    const isFieldsValid = Object.values(errorFields).every((error) => !error);
+    isFieldsValid && editItemAction();
+  }
+
   const title = item ? "Update Dimension" : "Add Dimension";
 
   const editButton = {
     label: title,
-    action: editItemAction,
+    action: validateFields,
   };
 
   const typeOptions = [
@@ -61,36 +79,45 @@ const DimensionPanel = (props: IProps): JSX.Element => {
 
   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" ? (
+      <S.ContentWrapper>
+        <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="Values"
-          name="values"
-          fieldType="TextArea"
-          value={values}
-          onChange={setValues}
+          title="Dimension"
+          name="name"
+          fieldType="TextField"
+          value={name}
+          onChange={setName}
           mandatory
+          validators={{ mandatory: true }}
+          error={errors.name}
+          placeholder="Type a Dimension Name"
         />
-      ) : <></>}
+        {type === "dimensionsAndValues" ? (
+          <FieldsBehavior
+            title="Values"
+            name="values"
+            fieldType="TextArea"
+            value={values}
+            onChange={setValues}
+            mandatory
+            validators={{ mandatory: true }}
+            error={errors.values}
+            placeholder="Type any value that you need. &#10;Separate them with ;&#10;&#19;&#10;Example: English; Spanish; German; French"
+            rows={4}
+          />
+        ) : <></>}
+      </S.ContentWrapper>
       <S.Footer>
         <Button className="button" type="button" onClick={editButton.action}>
           {editButton.label}

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

@@ -11,4 +11,13 @@ const NoteWrapper = styled.div`
 
 `
 
-export { Footer, NoteWrapper };
+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, NoteWrapper, ContentWrapper };

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

@@ -2,7 +2,7 @@ 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 { splitAndTrim, splitCamelCase } from "@ax/helpers";
 
 import * as S from "./style";
 import { getTemplateOptions } from "./utils";
@@ -14,10 +14,12 @@ const GroupPanel = (props: IProps): JSX.Element => {
   const [selectedDimensions, setSelectedDimensions] = useState<(string | never)[]>(["all"]);
   const [selectedTemplates, setSelectedTemplates] = useState<(string | never)[]>([]);
   const [hasTemplate, setHasTemplate] = useState(false);
+  const [errors, setErrors] = useState({ name: false });
 
   const templates = getTemplateOptions();
   const resetState = () => {
     setName(item?.name || "");
+    setErrors({ name: false });
 
     const dimensionOptions = [];
     const dimensionsArr = splitAndTrim(item?.dimensions, ";");
@@ -60,11 +62,20 @@ const GroupPanel = (props: IProps): JSX.Element => {
     toggleModal();
   };
 
+  const validateFields = () => {
+    const errorFields = {
+      name: !name.length,
+    }
+    setErrors(errorFields);
+    const isFieldsValid = Object.values(errorFields).every((error) => !error);
+    isFieldsValid && editItemAction();
+  }
+
   const title = item ? "Update Dimensions Group" : "Create Dimensions Group";
 
   const editButton = {
     label: title,
-    action: editItemAction,
+    action: validateFields,
   };
 
   const initialDimensionOption = {
@@ -75,7 +86,11 @@ const GroupPanel = (props: IProps): JSX.Element => {
   const dimensionOptions = [{ ...initialDimensionOption }];
   dimensions?.forEach((dimension) => {
     const { name } = dimension;
-    const option = { name, value: name, title: name };
+    const option = {
+      name: name,
+      value: name,
+      title: splitCamelCase(name)
+    };
     return dimensionOptions.push(option);
   });
 
@@ -115,12 +130,14 @@ const GroupPanel = (props: IProps): JSX.Element => {
     <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>
       <S.ContentWrapper>
         <FieldsBehavior
-          title="Dimension"
+          title="Name"
           name="name"
           fieldType="TextField"
           value={name}
           onChange={setName}
           mandatory
+          validators={{ mandatory: true }}
+          error={errors.name}
         />
         <S.Divider />
         <S.Heading>
@@ -136,7 +153,7 @@ const GroupPanel = (props: IProps): JSX.Element => {
         />
         <S.Divider />
         <S.Heading $spaceBetween>
-          <S.HeadingText>Dimensions</S.HeadingText>
+          <S.HeadingText>Associated to a template</S.HeadingText>
           <S.RadioTemplate>
             <RadioGroup
               name="hasTemplate"

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

@@ -24,12 +24,12 @@ const Divider = styled.div`
 `;
 
 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`
+  ${(p) => p.theme.textStyle.headingXS};
   color: ${(p) => p.theme.color.textHighEmphasis};
 `;
 

package/src/modules/Analytics/index.tsx

@@ -22,7 +22,6 @@ const Analytics = (props: IProps): JSX.Element => {
     analytics,
     getAnalytics,
     setHistoryPush,
-    site,
     updateAnalytics,
   } = props;
 
@@ -31,22 +30,24 @@ const Analytics = (props: IProps): JSX.Element => {
   const { isOpen: isDimensionOpen, toggleModal: toggleDimensionModal } = useModal();
   const { isOpen: isGroupOpen, toggleModal: toggleGroupModal } = useModal();
 
-  const { scriptCode, dimensions, groups } = analyticsState;
+  const { 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]);
+    getAnalytics();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   useEffect(() => {
     setAnalyticsState(analytics);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
 
   const handleSave = async () => {
-    const isSaved = await updateAnalytics(analyticsState, site?.id);
+    const isSaved = await updateAnalytics(analyticsState);
     if (isSaved) resetDirty();
   };
 
@@ -138,9 +139,10 @@ const Analytics = (props: IProps): JSX.Element => {
                 title="Analytics Tracking ID or Script Code"
                 name="scriptCode"
                 fieldType="TextArea"
-                value={scriptCode || ""}
+                value={analytics.scriptCode}
                 onChange={changeScriptCode}
                 placeholder="Type the Google Analytics or Google Tag Manager code."
+                rows={3}
               />
             </S.ScriptCodeWrapper>
             <S.SettingsWrapper>
@@ -180,7 +182,6 @@ const mapStateToProps = (state: IRootState) => ({
   isSaving: state.app.isSaving,
   isLoading: state.app.isLoading,
   analytics: state.analytics,
-  site: state.sites.currentSiteInfo,
 });
 
 const mapDispatchToProps = {
@@ -193,7 +194,6 @@ interface IAnalyticsProps {
   isSaving: boolean;
   isLoading: boolean;
   analytics: IAnalytics;
-  site: any;
 }
 
 interface IDispatchProps {

package/src/modules/App/Routing/NavMenu/style.tsx

@@ -22,6 +22,8 @@ export const Home = styled.div<{ type: string; isSite: boolean; isOpened: boolea
   display: flex;
   align-items: center;
   justify-content: ${(p) => (p.isOpened ? "flex-start" : "center")};
+  border-right: 1px solid ${(p) => p.theme.color.uiLine};
+  margin-right: -1px;
 
   & + ul {
     margin-top: ${(p) => p.theme.spacing.s};

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

@@ -10,7 +10,7 @@ import { reducer, IOptionTableStore, setColumnValues, setShowThumbnail, setSelec
 import * as S from "./style";
 
 const OptionTable = (props: IOptionTableProps): JSX.Element => {
-  const { selectData, selectPage, filters, values, selectedValue, setIsStructuredData } = props;
+  const { selectData, selectPage, filters, values, selectedValue, setIsStructuredData, theme } = props;
 
   const filterOptions = (value: string, objKey: string) => values.filter((item: any) => item[objKey] === value);
   const currentOption = filterOptions(selectedValue, "value");
@@ -66,7 +66,9 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
   };
 
   const thumbnailProps =
-    state.showThumbnail && isOptionInType(filteredByTypeOptions) && getThumbnailProps(state.selectedOption, true);
+    state.showThumbnail &&
+    isOptionInType(filteredByTypeOptions) &&
+    getThumbnailProps(state.selectedOption, true, theme);
 
   const displayOptions = (item: any) => {
     const { value } = item;
@@ -134,6 +136,7 @@ interface IOptionTableProps {
   filters: any;
   values: any;
   selectedValue: string;
+  theme: string;
 }
 
 const mapDispatchToProps = {

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

@@ -270,8 +270,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[] = [
     {

package/src/modules/Content/index.tsx

@@ -13,6 +13,7 @@ import {
   ICheck,
   IGetSitePagesParams,
   IColumn,
+  ISite,
 } from "@ax/types";
 import { MainWrapper, Modal, TableList, ErrorToast, Toast, EmptyState } from "@ax/components";
 import { getFilteredStructuredData, isGlobalStructuredData, isStructuredDataFromPage } from "@ax/helpers";
@@ -204,7 +205,9 @@ const Content = (props: IProps): JSX.Element => {
   const getSiteContent = useCallback(
     (filterQuery?: any) => {
       const params = getParams();
-      isStructuredData ? getStructuredDataContents(params, params.siteID) : getPages(params, filterQuery);
+      isStructuredData && params.siteID
+        ? getStructuredDataContents(params, params.siteID)
+        : getPages(params, filterQuery);
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [getParams, getSitePages, getStructuredDataContents, currentSiteInfo, isStructuredData, lang]
@@ -255,7 +258,7 @@ const Content = (props: IProps): JSX.Element => {
       setEmptyStateProps(emptyState);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isLoading]);
+  }, [isLoading, currentSitePages]);
 
   const addNewData = () => {
     resetForm();
@@ -599,6 +602,7 @@ const Content = (props: IProps): JSX.Element => {
           filters={options.filters}
           values={options.values}
           selectedValue={selectedOption}
+          theme={currentSiteInfo.theme}
         />
       </Modal>
       <Modal
@@ -690,7 +694,7 @@ const mapDispatchToProps = {
 
 interface IPagesProps {
   isData: boolean;
-  currentSiteInfo: any;
+  currentSiteInfo: ISite;
   currentSitePages: IPage[];
   filter: any;
   template: string;

package/src/modules/GlobalEditor/Editor/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
+import { themes } from "components";
 import { pageEditorActions } from "@ax/containers/PageEditor";
-
 import { ConfigPanel, ResizePanel } from "@ax/components";
 import { IBreadcrumbItem, IRootState, ISchema, IUserEditing } from "@ax/types";
 import PageBrowser from "./PageBrowser";
@@ -39,6 +39,9 @@ const Editor = (props: IProps) => {
     replaceElementsInCollectionAction: replaceElementsInCollection,
   };
 
+  const defaultTheme = themes.find((theme: any) => theme.default);
+  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+
   return (
     <ResizePanel
       leftPanel={<PageBrowser isPreviewMode={isPreviewMode} />}
@@ -58,6 +61,7 @@ const Editor = (props: IProps) => {
           isEditable={isEditable}
           isPreviewMode={isPreviewMode}
           userEditing={userEditing}
+          theme={theme}
         />
       }
     />

package/src/modules/GlobalSettings/Robots/Item/RobotsPanel/index.tsx

@@ -24,7 +24,7 @@ const RobotsPanel = (props: IProps): JSX.Element => {
     action: editItemAction,
   };
 
-  const placeholder = "User-agent: * \nDisallow: *";
+  const placeholder = "User-agent: * \nAllow: *";
 
   return (
     <FloatingPanel title={title} toggleModal={toggleModal} isOpen={isOpen}>

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

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import { navigationActions } from "@ax/containers/Navigation/Defaults";
 
 import { ResizePanel, ConfigPanel } from "@ax/components";
-import { IBreadcrumbItem, IRootState, ISchema } from "@ax/types";
+import { IBreadcrumbItem, IRootState, ISchema, ISite } from "@ax/types";
 import DefaultsBrowser from "./DefaultsBrowser";
 
 const Editor = (props: IProps) => {
@@ -22,6 +22,7 @@ const Editor = (props: IProps) => {
     setSelectedTab,
     selectedTab,
     isLoading,
+    site,
   } = props;
 
   const actions = {
@@ -49,6 +50,7 @@ const Editor = (props: IProps) => {
           isPage={false}
           isLoading={isLoading}
           isEditable={true}
+          theme={site.theme}
         />
       }
     />
@@ -63,6 +65,7 @@ interface IEditorStateProps {
   activatedModules: string[];
   selectedTab: string;
   isLoading: boolean;
+  site: ISite;
 }
 
 interface IPageBrowserDispatchProps {
@@ -85,6 +88,7 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   activatedModules: state.dataPacks.modules,
   selectedTab: state.navigation.tab,
   isLoading: state.app.isLoading,
+  site: state.sites.currentSiteInfo,
 });
 
 const mapDispatchToProps = {

package/src/modules/PageEditor/Editor/index.tsx

@@ -5,7 +5,7 @@ import { pageEditorActions } from "@ax/containers/PageEditor";
 import { sitesActions } from "@ax/containers/Sites";
 import { appActions } from "@ax/containers/App";
 import { ConfigPanel, ResizePanel } from "@ax/components";
-import { IBreadcrumbItem, IRootState, ISchema, IUserEditing } from "@ax/types";
+import { IBreadcrumbItem, IRootState, ISchema, ISite, IUserEditing } from "@ax/types";
 import PageBrowser from "./PageBrowser";
 
 const Editor = (props: IProps) => {
@@ -34,6 +34,7 @@ const Editor = (props: IProps) => {
     saveCurrentSiteInfo,
     isPreviewMode,
     userEditing,
+    site,
   } = props;
 
   const actions = {
@@ -69,6 +70,7 @@ const Editor = (props: IProps) => {
           setHistoryPush={setHistoryPush}
           isPreviewMode={isPreviewMode}
           userEditing={userEditing}
+          theme={site.theme}
         />
       }
     />
@@ -84,6 +86,7 @@ interface IEditorStateProps {
   selectedTab: string;
   isLoading: boolean;
   userEditing: IUserEditing | null;
+  site: ISite;
 }
 
 interface IPageBrowserDispatchProps {
@@ -116,6 +119,7 @@ const mapStateToProps = (state: IRootState): IEditorStateProps => ({
   selectedTab: state.pageEditor.tab,
   isLoading: state.app.isLoading,
   userEditing: state.pageEditor.userEditing,
+  site: state.sites.currentSiteInfo,
 });
 
 const mapDispatchToProps = {

package/src/modules/Settings/Analytics/atoms.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+
+import { Button } from "@ax/components";
+import { FieldsBehavior } from "@ax/components";
+import { IDimension, IDimensionsGroup } from "@ax/types";
+import { splitAndTrim, splitAndJoin } from "@ax/helpers";
+
+import * as S from "./style";
+
+
+const Warning = (props: IWarning): JSX.Element => {
+  const { setShowWarning } = props;
+
+  const warningText = "Analytics has Global settings. If you need, you can change the Analytics ID for this site. If you have already defined a project for this site in GTM, you don't need to define it here. You cannot edit the Dimensions and Values here, only view them.";
+
+  const handleButtonClick = () => {
+    setShowWarning(false);
+  }
+
+  return (
+    <>
+      <S.WarningHeading>Analytics</S.WarningHeading>
+      <S.WarningText>{warningText}</S.WarningText>
+      <Button type="button" buttonStyle="solid" onClick={handleButtonClick}>
+        Define Site Analytics
+      </Button>
+    </>
+  );
+};
+
+const ScriptCode = (props: IScriptCode): JSX.Element => {
+  const { scriptCode, setScriptCode } = props;
+
+  return (
+    <S.ScriptCodeWrapper>
+      <FieldsBehavior
+        title="Analytics Script Code"
+        name="siteScriptCode"
+        fieldType="TextArea"
+        value={scriptCode}
+        onChange={setScriptCode}
+        placeholder="Type the Google Analytics or Google Tag Manager code."
+      />
+    </S.ScriptCodeWrapper>
+  )
+}
+
+const Dimensions = (props: IDimensions): JSX.Element => {
+  const { dimensions } = props;
+
+  const heading = "Data Layer configuration";
+  const description = (
+    <>
+      You cannot edit the Dimensions and Values here, only view them. To edit them, you have to go to <strong>Global Settings</strong>.
+    </>
+  );
+
+  const Dimension = (props: IDimension) => {
+    const { name, values } = props;
+    const hasValues = !["", ";null;"].includes(values);
+    const getValues = () => splitAndTrim(values, ";").map((value) => `${value}; `);
+    return (
+      <S.Component>
+        <S.ComponentName>{name}</S.ComponentName>
+        <S.ComponentValues>{hasValues ? getValues() : "The value is defined on page"}</S.ComponentValues>
+      </S.Component>
+    )
+  }
+
+  return <>
+    <S.Heading>{heading}</S.Heading>
+    <S.Description>{description}</S.Description>
+    <S.ComponentsWrapper itemsSize={1 / 2}>
+      {dimensions.map((dimension, idx) => (
+        <Dimension key={idx} {...dimension} />
+      ))}
+    </S.ComponentsWrapper>
+  </>
+}
+
+const Groups = (props: IGroups): JSX.Element => {
+  const { groups } = props;
+
+  const heading = "Dimensions group by content";
+  const description = "In global, you can create groups with the dimensions to measure on a page based on its content. You can not edit them here. Only view them.";
+
+  const Group = (props: IDimensionsGroup) => {
+    const { name, dimensions, templates } = props;
+    const getDimensions = () => splitAndTrim(dimensions, ";").map((value, idx) => <p key={idx}>{value}</p>);
+    const contentType = splitAndJoin(templates, ";", ", ");
+    const hasContentType = !["null", ""].includes(contentType);
+    const contentTypeText = hasContentType ? <span>{contentType}</span> : "NO";
+    return (
+      <S.Component>
+        <div>
+          <S.ComponentName>{name}</S.ComponentName>
+          <S.ComponentValues>{getDimensions()}</S.ComponentValues>
+        </div>
+        <S.ContentType>Content type: {contentTypeText}</S.ContentType>
+      </S.Component>
+    )
+  }
+
+  return <>
+    <S.Heading>{heading}</S.Heading>
+    <S.Description>{description}</S.Description>
+    <S.ComponentsWrapper itemsSize={1 / 3}>
+      {groups.map((group, idx) => (
+        <Group key={idx} {...group} />
+      ))}
+    </S.ComponentsWrapper>
+  </>
+}
+
+interface IWarning {
+  setShowWarning: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+interface IScriptCode {
+  scriptCode: string | null;
+  setScriptCode: React.Dispatch<React.SetStateAction<string>>;
+}
+
+interface IDimensions {
+  dimensions: IDimension[];
+}
+
+interface IGroups {
+  groups: IDimensionsGroup[];
+}
+
+export { Warning, ScriptCode, Dimensions, Groups };