@griddo/ax 1.61.7 → 1.62.2

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

@@ -0,0 +1,109 @@
+import React, { useEffect, useState } from "react";
+import { connect } from "react-redux";
+
+import { IAnalytics, IRootState } from "@ax/types";
+import { appActions } from "@ax/containers/App";
+import { analyticsActions } from "@ax/containers/Analytics";
+import { MainWrapper, Loading } from "@ax/components";
+import { useIsDirty } from "@ax/hooks";
+import { RouteLeavingGuard } from "@ax/guards";
+
+import { Dimensions, Groups, ScriptCode, Warning } from "./atoms";
+import * as S from "./style";
+
+const Analytics = (props: IProps): JSX.Element => {
+  const {
+    isSaving,
+    isLoading,
+    analytics,
+    getAnalytics,
+    setHistoryPush,
+    site,
+    updateScriptCode,
+  } = props;
+  const [showWarning, setShowWarning] = useState(false);
+  const [scriptCode, setScriptCode] = useState(analytics.scriptCode);
+  const { isDirty, resetDirty } = useIsDirty(scriptCode);
+
+  useEffect(() => {
+    site?.id && getAnalytics(site.id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [site?.id]);
+
+  useEffect(() => {
+    setScriptCode(analytics.scriptCode);
+    setShowWarning(!analytics.siteScriptCodeExists);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [analytics]);
+
+  const handleSave = async () => {
+    const isSaved = await updateScriptCode(scriptCode, site.id);
+    if (isSaved) resetDirty();
+  };
+
+  const rightButtonProps = {
+    label: isSaving ? "Saving" : "Save",
+    disabled: isSaving,
+    action: () => handleSave(),
+  };
+
+  const setRoute = (path: string) => setHistoryPush(path);
+  const modalText = (
+    <>
+      Analytics Script Code <strong>is not saved</strong>.{" "}
+    </>
+  );
+
+  const analyticsSettings = (
+    <S.ContentWrapper>
+      {showWarning ? (
+        <Warning setShowWarning={setShowWarning} />
+      ) : (
+          <S.AnalyticsWrapper>
+            <ScriptCode scriptCode={scriptCode} setScriptCode={setScriptCode} />
+            {analytics.dimensions && <Dimensions dimensions={analytics.dimensions} />}
+            {analytics.groups && <Groups groups={analytics.groups} />}
+          </S.AnalyticsWrapper>
+      )}
+    </S.ContentWrapper>
+  )
+
+  return (
+    <>
+      <RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
+      <MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
+        {isLoading ? <Loading /> : analyticsSettings}
+      </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,
+  updateScriptCode: analyticsActions.updateScriptCode,
+};
+
+interface IAnalyticsProps {
+  isSaving: boolean;
+  isLoading: boolean;
+  analytics: IAnalytics;
+  site: any;
+}
+
+interface IDispatchProps {
+  getAnalytics(siteId?: number): void;
+  setHistoryPush(path: string, isEditor?: boolean): void;
+  updateScriptCode(scriptCode: string, siteId: number): Promise<boolean>;
+}
+
+type IProps = IAnalyticsProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Analytics);

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

@@ -0,0 +1,107 @@
+import styled from "styled-components";
+
+const Heading = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  color: ${p => p.theme.color.textHighEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+
+  strong {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const WarningHeading = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${p => p.theme.color.textMediumEmphasis};
+  padding-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const WarningText = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  width: calc(${(p) => p.theme.spacing.l} * 12);
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const ContentWrapper = styled.div`
+  height: 100%;
+  overflow: auto;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+const AnalyticsWrapper = styled.div`
+  width: 720px;
+`;
+
+const ScriptCodeWrapper = styled.div`
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const ComponentsWrapper = styled.div<{ itemsSize: number }>`
+  display: grid;
+  grid-template-columns: repeat(2, calc(100% * ${(p) => p.itemsSize}));
+  grid-gap: ${p => p.theme.spacing.xs} ${p => p.theme.spacing.xs};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
+  margin-bottom: ${(p) => p.theme.spacing.m};
+  padding-bottom: ${(p) => p.theme.spacing.m};
+`;
+
+const Component = styled.div`
+  width: 100%;
+  height: 100%;
+  background: ${(p) => p.theme.color.uiBackground02};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  border-radius: ${(p) => p.theme.radii.s};
+  padding: ${(p) => p.theme.spacing.s};
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+const ComponentName = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${p => p.theme.color.textLowEmphasis};
+  text-transform: uppercase;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  word-break: break-all;
+`
+
+const ComponentValues = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent};
+  color: ${p => p.theme.color.textHighEmphasis};
+  padding-top: ${(p) => p.theme.spacing.xxs};
+  padding-bottom: ${(p) => p.theme.spacing.xxs};
+`
+
+const ContentType = styled.div`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${p => p.theme.color.textMediumEmphasis};
+  margin-top: ${(p) => p.theme.spacing.xxs};
+
+  span {
+    color: ${p => p.theme.color.interactive01};
+  }
+`;
+
+export {
+  Heading,
+  Description,
+  WarningHeading,
+  WarningText,
+  ContentWrapper,
+  ScriptCodeWrapper,
+  ComponentsWrapper,
+  Component,
+  ComponentName,
+  ComponentValues,
+  AnalyticsWrapper,
+  ContentType,
+}

package/src/modules/Settings/ContentTypes/DataPacks/AddModal/index.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IDataPackCategory, IRootState } from "@ax/types";
-import { sortBy } from "@ax/helpers";
+import { IDataPack, IDataPackCategory, IRootState, ISite } from "@ax/types";
+import { getDataPackSchema, sortBy } from "@ax/helpers";
 import { Icon, Loader } from "@ax/components";
 
 import { dataPacksActions } from "@ax/containers/Settings/DataPacks";
@@ -13,7 +13,7 @@ import SortFilter from "./SortFilter";
 import * as S from "./style";
 
 const AddModal = (props: IProps) => {
-  const { toggleModal, getAvailableDataPacks, isLoading, available, addDataPacks, categories } = props;
+  const { toggleModal, getAvailableDataPacks, isLoading, available, addDataPacks, categories, currentSiteInfo } = props;
 
   const initialState: IState = {
     packsSelected: [],
@@ -78,11 +78,15 @@ const AddModal = (props: IProps) => {
             {items &&
               items.map((item: IDataPack, index: number) => {
                 const isSelected = state.packsSelected.find((i: IDataPack) => i.id === item.id);
+                const schema = getDataPackSchema(item.id);
+                const { image } = schema;
+                const imageUrl = typeof image === "string" ? image : image[currentSiteInfo.theme];
+
                 return (
                   <S.GridItem key={item.title + index}>
                     <S.PackWrapper onClick={_handleClick(item)} selected={!!isSelected}>
                       <S.ImageWrapper>
-                        <img src={item.image} alt={item.title} />
+                        <img src={imageUrl} alt={item.title} />
                       </S.ImageWrapper>
                       <S.Title>{item.title}</S.Title>
                       <S.IconUnchecked>
@@ -113,6 +117,7 @@ interface IProps {
   isLoading: boolean;
   available: IDataPack[];
   categories: IDataPackCategory[];
+  currentSiteInfo: ISite;
   toggleModal: () => void;
   getAvailableDataPacks: (queryParams: string | null) => void;
   addDataPacks: (dataPackID: string, fromConfig?: boolean) => void;
@@ -122,6 +127,7 @@ const mapStateToProps = (state: IRootState) => ({
   available: state.dataPacks.available,
   categories: state.dataPacks.categories,
   isLoading: state.app.isLoading,
+  currentSiteInfo: state.sites.currentSiteInfo,
 });
 
 const mapDispatchToProps = {

package/src/modules/Settings/ContentTypes/DataPacks/Config/index.tsx

@@ -1,14 +1,16 @@
 import React from "react";
 import { connect } from "react-redux";
 
-import { IRootState } from "@ax/types";
+import { IRootState, ISite } from "@ax/types";
+import { getSchemaThumbnails, getTemplateThumbnails } from "@ax/helpers";
+
 import Card from "./Card";
 import Form from "./Form";
 
 import * as S from "./style";
 
-const Config = (props: any): JSX.Element => {
-  const { selected } = props;
+const ConfigPack = (props: any): JSX.Element => {
+  const { selected, currentSiteInfo } = props;
   const { title, description, categories, templates, modules, structuredData } = selected;
   const isFromPage = templates && templates.length > 0;
 
@@ -34,23 +36,29 @@ const Config = (props: any): JSX.Element => {
           </S.CardList>
           <S.CardList>
             {modules &&
-              modules.map((module: any, key: number) => (
-                <Card
-                  key={`${key}${module.title}`}
-                  title={"Module"}
-                  subtitle={module.title}
-                  thumbnail={module.thumbnails && module.thumbnails["2x"]}
-                />
-              ))}
+              modules.map((module: any, key: number) => {
+                const thumbnails = getSchemaThumbnails(module.id, currentSiteInfo.theme);
+                return (
+                  <Card
+                    key={`${key}${module.title}`}
+                    title={"Module"}
+                    subtitle={module.title}
+                    thumbnail={thumbnails && thumbnails["2x"]}
+                  />
+                );
+              })}
             {templates &&
-              templates.map((template: any, key: number) => (
-                <Card
-                  key={`${key}${template.title}`}
-                  title={"Template"}
-                  subtitle={template.title}
-                  thumbnail={template.thumbnails && template.thumbnails["2x"]}
-                />
-              ))}
+              templates.map((template: any, key: number) => {
+                const thumbnails = getTemplateThumbnails(template.id, currentSiteInfo.theme);
+                return (
+                  <Card
+                    key={`${key}${template.title}`}
+                    title={"Template"}
+                    subtitle={template.title}
+                    thumbnail={thumbnails && thumbnails["2x"]}
+                  />
+                );
+              })}
           </S.CardList>
         </S.Items>
       </S.Pack>
@@ -61,10 +69,12 @@ const Config = (props: any): JSX.Element => {
 
 interface IProps {
   selected: any;
+  currentSiteInfo: ISite;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   selected: state.dataPacks.selected,
+  currentSiteInfo: state.sites.currentSiteInfo,
 });
 
-export default connect(mapStateToProps, null)(Config);
+export default connect(mapStateToProps, null)(ConfigPack);

package/src/modules/Settings/ContentTypes/DataPacks/Item/index.tsx

@@ -2,16 +2,17 @@ import React, { Dispatch, SetStateAction } from "react";
 import { connect } from "react-redux";
 
 import { useModal } from "@ax/hooks";
+import { getDataPackSchema } from "@ax/helpers";
 import { dataPacksActions } from "@ax/containers/Settings";
-import { IRootState } from "@ax/types";
+import { IRootState, ISite } from "@ax/types";
 import { IconAction, InformativeMenu, Modal } from "@ax/components";
 
 import * as S from "./style";
 
 const Item = (props: IProps): JSX.Element => {
-  const { getActivatedDataPack, pack, toggleToast, deleteSiteDataPack, setDeactivatedPack } = props;
+  const { getActivatedDataPack, pack, toggleToast, deleteSiteDataPack, setDeactivatedPack, currentSiteInfo } = props;
 
-  const { image, title, id, templates, config } = pack;
+  const { title, id, templates, config } = pack;
   const isFromPage = templates && templates.length > 0;
   const { isOpen, toggleModal } = useModal();
 
@@ -76,11 +77,16 @@ const Item = (props: IProps): JSX.Element => {
 
   const setPack = () => getActivatedDataPack(pack.id);
 
+  const schema = getDataPackSchema(pack.id);
+  const { image } = schema;
+
+  const imageUrl = typeof image === "string" ? image : image[currentSiteInfo.theme];
+
   return (
     <>
       <DeleteModal />
       <S.Pack onClick={setPack}>
-        <S.Thumbnail backgroundUrl={image} />
+        <S.Thumbnail backgroundUrl={imageUrl} />
         <S.Footer>
           <S.Title>{title}</S.Title>
           <S.IconsWrapper>
@@ -97,7 +103,7 @@ const Item = (props: IProps): JSX.Element => {
 
 interface IProps {
   pack: any;
-  currentSiteID: number;
+  currentSiteInfo: ISite;
   getActivatedDataPack: (selected: string) => void;
   toggleToast: () => void;
   setDeactivatedPack: Dispatch<SetStateAction<string>>;
@@ -105,7 +111,7 @@ interface IProps {
 }
 
 const mapStateToProps = (state: IRootState) => ({
-  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+  currentSiteInfo: state.sites.currentSiteInfo,
 });
 
 const mapDispatchToProps = {

package/src/modules/StructuredData/Form/ConnectedField/index.tsx

@@ -9,7 +9,7 @@ import { getStructuredDataInnerFields } from "@ax/forms";
 import * as S from "./style";
 
 const ConnectedField = (props: IProps) => {
-  const { field, site, form, fieldKey, updateFormValue, disabled, errors, deleteError } = props;
+  const { field, site, form, fieldKey, updateFormValue, disabled, errors, deleteError, theme } = props;
 
   const value = form.content && form.content[fieldKey];
   const error = errors.find((err: any) => err.key === field.key);
@@ -22,7 +22,7 @@ const ConnectedField = (props: IProps) => {
   let innerFields: JSX.Element[] = [];
 
   if (isConditional || isArrayGroup) {
-    innerFields = getStructuredDataInnerFields(field.fields, form.content, updateFormValue);
+    innerFields = getStructuredDataInnerFields(field.fields, form.content, updateFormValue, theme);
   }
 
   const fieldProps = {
@@ -36,6 +36,7 @@ const ConnectedField = (props: IProps) => {
     innerFields,
     error,
     deleteError,
+    theme,
   };
 
   return (
@@ -54,6 +55,7 @@ interface IProps {
   errors: IErrorItem[];
   updateFormValue: (value: any) => void;
   deleteError: (error: IErrorItem) => void;
+  theme: string;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/modules/StructuredData/Form/index.tsx

@@ -1,7 +1,8 @@
 import React, { useState } from "react";
 import { connect } from "react-redux";
 
-import { IDataPack, IErrorItem, IRootState } from "@ax/types";
+import { themes } from "components";
+import { IDataPack, IErrorItem, IRootState, ISite } from "@ax/types";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { MainWrapper, ErrorToast, Notification, Loading } from "@ax/components";
 import { getActivatedDataPacksIds } from "@ax/helpers";
@@ -51,6 +52,9 @@ const Form = (props: IProps) => {
 
   let title = "";
 
+  const defaultTheme = themes.find((theme: any) => theme.default);
+  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+
   const Fields =
     fields &&
     fields.map((field: any, i: number) => {
@@ -58,7 +62,16 @@ const Form = (props: IProps) => {
       if (key === "title") {
         title = form.content && form.content[key] ? form.content[key] : "";
       }
-      return <ConnectedField fieldKey={key} field={field} key={`${type}${i}`} site={site} disabled={isDisabled} />;
+      return (
+        <ConnectedField
+          fieldKey={key}
+          field={field}
+          key={`${type}${i}`}
+          site={site}
+          disabled={isDisabled}
+          theme={site ? site.theme : theme}
+        />
+      );
     });
 
   const handleSave = async (publish?: boolean) => {
@@ -274,7 +287,7 @@ const Form = (props: IProps) => {
 interface IProps {
   schema: any;
   form: any;
-  site: any;
+  site: ISite | null;
   currentStructuredData: any;
   isSaving: boolean;
   isLoading: boolean;

package/src/modules/StructuredData/StructuredDataList/GlobalPageItem/index.tsx

@@ -342,7 +342,7 @@ const GlobalPageItem = (props: IGlobalPageItemProps): JSX.Element => {
         )}
         {!isAllPages && activeColumns.includes("site") && (
           <S.SiteCell role="cell">
-            <ElementsTooltip elements={availableSiteNames} />
+            <ElementsTooltip elements={availableSiteNames} elementsPerRow={3} />
           </S.SiteCell>
         )}
         {activeColumns.includes("live") && (

package/src/modules/StructuredData/StructuredDataList/OptionTable/index.tsx

@@ -1,4 +1,5 @@
 import React, { useReducer, useEffect } from "react";
+import { themes } from "components";
 
 import { IStructuredDataFilter, IStructuredDataValue } from "@ax/types";
 import { getThumbnailProps } from "@ax/helpers";
@@ -48,8 +49,13 @@ const OptionTable = (props: IOptionTableProps): JSX.Element => {
     return columns.includes(optionValues[0]);
   };
 
+  const defaultTheme = themes.find((theme: any) => theme.default);
+  const theme = defaultTheme ? defaultTheme.value : themes[0].value;
+
   const thumbnailProps =
-    state.showThumbnail && isOptionInType(filteredByTypeOptions) && getThumbnailProps(state.selectedOption, true);
+    state.showThumbnail &&
+    isOptionInType(filteredByTypeOptions) &&
+    getThumbnailProps(state.selectedOption, true, theme);
 
   const displayOptions = (item: IStructuredDataFilter) => {
     const { value } = item;

package/src/modules/StructuredData/StructuredDataList/index.tsx

@@ -112,7 +112,8 @@ const StructuredDataList = (props: IProps): JSX.Element => {
   const { categoryColors, addCategoryColors } = useCategoryColors();
 
   const scope = currentSiteID ? "site" : "global";
-  const isDataEditable = !currentStructuredData || currentStructuredData.editable;
+
+  const isDataEditable = filter === "all-pages" || !currentStructuredData || currentStructuredData.editable;
   const isDataTranslatable = currentStructuredData && currentStructuredData.translate;
   const isAllPages = filter === "all-pages";
   const isStructuredDataFromPage = !!currentStructuredData?.fromPage || isAllPages;
@@ -642,7 +643,6 @@ interface IDispatchProps {
   getAnalytics(): void;
 }
 
-
 interface ICategoriesProps {
   structuredData: { global: IStructuredData[]; site: IStructuredData[] };
   currentDataContent: IStructuredDataContent[];

package/src/routes/site.tsx

@@ -8,6 +8,7 @@ import Settings from "./../modules/Settings";
 import CategoriesList from "./../modules/Categories/CategoriesList";
 import StructuredData from "./../modules/StructuredData";
 import SeoSettings from "./../modules/Settings/SeoSettings";
+import Analytics from "./../modules/Settings/Analytics";
 
 const BASE_PATH = "/sites";
 
@@ -84,6 +85,11 @@ export default [
             component: SeoSettings,
             name: "SEO Settings",
           },
+          {
+            path: `${BASE_PATH}/settings/analytics`,
+            component: Analytics,
+            name: "Analytics",
+          },
         ],
       },
     ],

package/src/schemas/pages/GlobalPage.tsx

@@ -49,6 +49,7 @@ export default {
           title: "SEO Data",
           type: "FieldGroup",
           key: "seoData",
+          collapsed: true,
           fields: [
             {
               title: "Meta title",
@@ -129,13 +130,23 @@ export default {
           ],
         },
         {
-          type: "AnalyticsField",
-          key: "dimensions",
+          title: "Analytics Data Layer",
+          type: "FieldGroup",
+          key: "analytics",
+          collapsed: true,
+          fields: [
+            {
+              type: "AnalyticsField",
+              key: "dimensions",
+              collapsed: true,
+            }
+          ]
         },
         {
           title: "Social Media",
           type: "FieldGroup",
           key: "socialShare",
+          collapsed: true,
           fields: [
             {
               title: "Title",

package/src/schemas/pages/Page.tsx

@@ -57,6 +57,7 @@ export default {
           title: "SEO Data",
           type: "FieldGroup",
           key: "seoData",
+          collapsed: true,
           fields: [
             {
               title: "Meta title",
@@ -142,13 +143,23 @@ export default {
           ],
         },
         {
-          type: "AnalyticsField",
-          key: "dimensions",
+          title: "Analytics Data Layer",
+          type: "FieldGroup",
+          key: "analytics",
+          collapsed: true,
+          fields: [
+            {
+              type: "AnalyticsField",
+              key: "dimensions",
+              collapsed: true,
+            }
+          ]
         },
         {
           title: "Social Media",
           type: "FieldGroup",
           key: "socialShare",
+          collapsed: true,
           fields: [
             {
               title: "Title",

package/src/types/index.tsx

@@ -691,6 +691,7 @@ export interface IRedirect {
 
 export interface IAnalytics {
   scriptCode: string;
+  siteScriptCodeExists: boolean;
   dimensions: IDimension[];
   groups: IDimensionsGroup[];
 }