@griddo/ax 11.2.3 → 11.2.4-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.2.3",
+  "version": "11.2.4-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -225,5 +225,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "be3ccf7d5452e6527b4406f25363f64200ff9b7d"
+  "gitHead": "50e917b87710678093a5ccdb473513a3147fbdba"
 }

package/src/api/analytics.tsx

@@ -24,9 +24,14 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/metrics/groups/site/", "/bulk"],
     method: "POST",
   },
+  DELETE_SCRIPT_CODE: {
+    ...template,
+    endpoint: ["/site/", "/metrics/code"],
+    method: "DELETE",
+  },
 };
 
-const getAnalytics = async (siteId: number | string): Promise<AxiosResponse> => {
+const getAnalytics = async (siteId: number | "global"): Promise<AxiosResponse> => {
   const {
     host,
     endpoint: [prefix, suffix],
@@ -37,7 +42,7 @@ const getAnalytics = async (siteId: number | string): Promise<AxiosResponse> =>
   return sendRequest(SERVICES.GET_ANALYTICS);
 };
 
-const updateScriptCode = async (siteId: number | string, data: { scriptCode: string }): Promise<AxiosResponse> => {
+const updateScriptCode = async (siteId: number | "global", data: { scriptCode: string }): Promise<AxiosResponse> => {
   const {
     host,
     endpoint: [prefix, suffix],
@@ -48,7 +53,10 @@ const updateScriptCode = async (siteId: number | string, data: { scriptCode: str
   return sendRequest(SERVICES.UPDATE_SCRIPT_CODE, { ...data });
 };
 
-const createDimensions = async (siteId: number | string, data: { dimensions: IDimension[] }): Promise<AxiosResponse> => {
+const createDimensions = async (
+  siteId: number | "global",
+  data: { dimensions: IDimension[] }
+): Promise<AxiosResponse> => {
   const {
     host,
     endpoint: [prefix, suffix],
@@ -59,7 +67,10 @@ const createDimensions = async (siteId: number | string, data: { dimensions: IDi
   return sendRequest(SERVICES.CREATE_DIMENSIONS, { ...data });
 };
 
-const createDimensionsGroups = async (siteId: number | string, data: { groups: IDimensionsGroup[] }): Promise<AxiosResponse> => {
+const createDimensionsGroups = async (
+  siteId: number | "global",
+  data: { groups: IDimensionsGroup[] }
+): Promise<AxiosResponse> => {
   const {
     host,
     endpoint: [prefix, suffix],
@@ -70,9 +81,21 @@ const createDimensionsGroups = async (siteId: number | string, data: { groups: I
   return sendRequest(SERVICES.CREATE_DIMENSIONS_GROUPS, { ...data });
 };
 
+const deleteScriptCode = async (siteId: number | "global"): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.DELETE_SCRIPT_CODE;
+
+  SERVICES.DELETE_SCRIPT_CODE.dynamicUrl = `${host}${prefix}${siteId}${suffix}`;
+
+  return sendRequest(SERVICES.DELETE_SCRIPT_CODE);
+};
+
 export default {
   getAnalytics,
   updateScriptCode,
   createDimensions,
-  createDimensionsGroups
+  createDimensionsGroups,
+  deleteScriptCode,
 };

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -365,7 +365,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
                     <S.ConfigWrapper>
                       <S.SubConfigContent hasMargin={true}>
                         <S.OptionDescription isOpen={configState.isCustomLangOpen}>
-                          By default, content is shown in the page's language. Activate this option to{" "}
+                          By default, content is shown in the page`&apos;`s language. Activate this option to{" "}
                           <strong>specifically set a different language</strong> for the content shown in this
                           distributor.
                         </S.OptionDescription>

package/src/containers/Analytics/actions.tsx

@@ -2,6 +2,7 @@ import { analytics } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { handleRequest } from "@ax/helpers";
 import { IAnalytics } from "@ax/types";
+import { Dispatch } from "redux";
 import { SET_ANALYTICS } from "./constants";
 import { ISetAnalytics } from "./interfaces";
 
@@ -9,10 +10,10 @@ function setAnalytics(analytics: IAnalytics): ISetAnalytics {
   return { type: SET_ANALYTICS, payload: analytics };
 }
 
-function getAnalytics(siteId: number | string = "global"): (dispatch: any) => Promise<void> {
+function getAnalytics(siteId?: number | null): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
-      const callback = async () => analytics.getAnalytics(siteId);
+      const callback = async () => analytics.getAnalytics(siteId || "global");
 
       const responseActions = {
         handleSuccess: (response: any) => {
@@ -28,24 +29,22 @@ function getAnalytics(siteId: number | string = "global"): (dispatch: any) => Pr
   };
 }
 
-function updateAnalytics(
-  analyticsState: IAnalytics,
-  siteId: number | string = "global"
-): (dispatch: any) => Promise<boolean> {
+function updateAnalytics(analyticsState: IAnalytics, siteId?: number | null): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
       const { scriptCode, dimensions, groups } = analyticsState;
       const callback = async () => {
         const promises = [];
-        promises.push(analytics.updateScriptCode(siteId, { scriptCode }));
-        promises.push(analytics.createDimensions(siteId, { dimensions }));
-        promises.push(analytics.createDimensionsGroups(siteId, { groups }));
+        const site = siteId || "global";
+        promises.push(analytics.updateScriptCode(site, { scriptCode }));
+        promises.push(analytics.createDimensions(site, { dimensions }));
+        promises.push(analytics.createDimensionsGroups(site, { groups }));
         return Promise.all(promises);
       };
 
       const responseActions = {
         handleSuccess: () => {
-          dispatch(getAnalytics());
+          getAnalytics(siteId)(dispatch);
         },
         handleError: (response: any) => {
           const {
@@ -65,16 +64,16 @@ function updateAnalytics(
   };
 }
 
-function updateScriptCode(scriptCode: string, siteId: number): (dispatch: any) => Promise<boolean> {
+function updateScriptCode(scriptCode: string, siteId?: number | null): (dispatch: Dispatch) => Promise<boolean> {
   return async (dispatch) => {
     try {
       const callback = async () => {
-        return analytics.updateScriptCode(siteId, { scriptCode });
+        return analytics.updateScriptCode(siteId || "global", { scriptCode });
       };
 
       const responseActions = {
         handleSuccess: () => {
-          dispatch(getAnalytics(siteId));
+          getAnalytics(siteId)(dispatch);
         },
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
@@ -87,4 +86,24 @@ function updateScriptCode(scriptCode: string, siteId: number): (dispatch: any) =
   };
 }
 
-export { setAnalytics, getAnalytics, updateAnalytics, updateScriptCode };
+function deleteScriptCode(siteId?: number | null): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => analytics.deleteScriptCode(siteId || "global");
+
+      const responseActions = {
+        handleSuccess: () => {
+          getAnalytics(siteId)(dispatch);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+export { setAnalytics, getAnalytics, updateAnalytics, updateScriptCode, deleteScriptCode };

package/src/modules/Analytics/index.tsx

@@ -30,7 +30,8 @@ const Analytics = (props: IProps): JSX.Element => {
   const changeGroups = (groups: IDimensionsGroup[]) => setAnalyticsState((state) => ({ ...state, groups }));
 
   useEffect(() => {
-    getAnalytics();
+    const handleGetAnalytics = async () => await getAnalytics();
+    handleGetAnalytics();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -205,9 +206,9 @@ interface IAnalyticsProps {
 }
 
 interface IDispatchProps {
-  getAnalytics(siteId?: number): void;
+  getAnalytics(siteId?: number | null): Promise<void>;
   setHistoryPush(path: string, isEditor?: boolean): void;
-  updateAnalytics(analyticsState: IAnalytics, siteId?: number): Promise<boolean>;
+  updateAnalytics(analyticsState: IAnalytics, siteId?: number | null): Promise<boolean>;
 }
 
 type IProps = IAnalyticsProps & IDispatchProps;

package/src/modules/Content/index.tsx

@@ -177,8 +177,10 @@ const Content = (props: IProps): JSX.Element => {
   const dataIds = currentDataContent && currentDataContent.map((data: any) => data.id);
   const contentIds = isStructuredData ? dataIds : pagesIds;
   const currentSitePagesTemplatesIds = allSitePages && allSitePages.map((page: any) => page.templateId);
-  const currentSitesByLang = sitesByLang?.filter((site: ISite) =>
-    user?.roles.find((siteRole: ISiteRoles) => siteRole.siteId === site.id || siteRole.siteId === "all")
+  const currentSitesByLang = sitesByLang?.filter(
+    (site: ISite) =>
+      user?.isSuperAdmin ||
+      user?.roles.find((siteRole: ISiteRoles) => siteRole.siteId === site.id || siteRole.siteId === "all")
   );
   const categoryColumns: ISchemaField[] =
     currentStructuredData && currentStructuredData.schema

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

@@ -1,9 +1,9 @@
 import React from "react";
 import { Link } from "react-router-dom";
 
-import { Button } from "@ax/components";
+import { Button, Modal } from "@ax/components";
 import { FieldsBehavior } from "@ax/components";
-import { IDimension, IDimensionsGroup } from "@ax/types";
+import { IDimension, IDimensionsGroup, IModal } from "@ax/types";
 import { splitAndTrim, splitAndJoin } from "@ax/helpers";
 
 import * as S from "./style";
@@ -124,6 +124,29 @@ const Groups = (props: IGroups): JSX.Element => {
   );
 };
 
+const ResetModal = (props: IModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction } = props;
+
+  const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Reset to global defaults"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+      height={240}
+    >
+      <S.ModalContent>
+        The Analytics script for this site will be removed and reconnected to the global Analytics. Please be aware of
+        this change.
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
 interface IWarning {
   setShowWarning: React.Dispatch<React.SetStateAction<boolean>>;
 }
@@ -141,4 +164,4 @@ interface IGroups {
   groups: IDimensionsGroup[];
 }
 
-export { Warning, ScriptCode, Dimensions, Groups };
+export { Warning, ScriptCode, Dimensions, Groups, ResetModal };

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

@@ -1,14 +1,14 @@
 import React, { useEffect, useState } from "react";
 import { connect } from "react-redux";
 
-import { IAnalytics, INavItem, IRootState } from "@ax/types";
+import { IAnalytics, INavItem, IRootState, ISite } from "@ax/types";
 import { appActions } from "@ax/containers/App";
 import { analyticsActions } from "@ax/containers/Analytics";
 import { MainWrapper, Loading, Nav } from "@ax/components";
-import { useIsDirty } from "@ax/hooks";
+import { useIsDirty, useModal } from "@ax/hooks";
 import { RouteLeavingGuard } from "@ax/guards";
 
-import { Dimensions, Groups, ScriptCode, Warning } from "./atoms";
+import { Dimensions, Groups, ResetModal, ScriptCode, Warning } from "./atoms";
 import * as S from "./style";
 
 const Analytics = (props: IProps): JSX.Element => {
@@ -22,34 +22,41 @@ const Analytics = (props: IProps): JSX.Element => {
     setHistoryPush,
     site,
     updateScriptCode,
+    deleteScriptCode,
   } = props;
+
   const [showWarning, setShowWarning] = useState(false);
   const [scriptCode, setScriptCode] = useState(analytics.scriptCode);
-  const { isDirty, setIsDirty } = useIsDirty(scriptCode);
+  const { isDirty, setIsDirty, resetDirty } = useIsDirty(scriptCode);
+  const { isOpen, toggleModal } = useModal();
 
   useEffect(() => {
-    site?.id && getAnalytics(site.id);
+    const handleGetAnalytics = async () => await getAnalytics(site?.id);
+    handleGetAnalytics();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [site?.id]);
+  }, []);
 
   useEffect(() => {
     setScriptCode(analytics.scriptCode);
     setShowWarning(!analytics.siteScriptCodeExists);
+    if (!analytics.siteScriptCodeExists) {
+      resetDirty();
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [analytics]);
 
   const handleSave = async () => {
-    const isSaved = await updateScriptCode(scriptCode, site.id);
+    const isSaved = !!site && (await updateScriptCode(scriptCode, site.id));
     if (isSaved) setIsDirty(false);
   };
 
-  const rightButtonProps = {
-    label: isSaving ? "Saving" : isDirty ? "Save" : "Saved",
-    disabled: isSaving || !isDirty,
-    action: () => handleSave(),
+  const setRoute = (path: string) => setHistoryPush(path);
+
+  const handleReset = async () => {
+    await deleteScriptCode(site?.id);
+    isOpen && toggleModal();
   };
 
-  const setRoute = (path: string) => setHistoryPush(path);
   const modalText = (
     <>
       Analytics Script Code <strong>is not saved</strong>.{" "}
@@ -70,15 +77,39 @@ const Analytics = (props: IProps): JSX.Element => {
     </>
   );
 
+  const rightButtonProps = {
+    label: isSaving ? "Saving" : isDirty ? "Save" : "Saved",
+    disabled: isSaving || !isDirty,
+    action: handleSave,
+  };
+
+  const secondaryButtonProps = !showWarning
+    ? {
+        label: "Reset to Global Defaults",
+        action: toggleModal,
+      }
+    : undefined;
+
+  const mainResetModalAction = {
+    title: "Reset to Global",
+    onClick: handleReset,
+  };
+
   return (
     <>
       <RouteLeavingGuard when={isDirty} action={setRoute} text={modalText} />
-      <MainWrapper backLink={false} title="Analytics Settings" rightButton={rightButtonProps}>
+      <MainWrapper
+        backLink={false}
+        title="Analytics Settings"
+        rightButton={rightButtonProps}
+        rightLineButton={secondaryButtonProps}
+      >
         <S.Wrapper>
           <Nav current={currentNavItem} items={navItems} onClick={setRoute} />
           <S.ContentWrapper>{isLoading ? <Loading /> : analyticsSettings}</S.ContentWrapper>
         </S.Wrapper>
       </MainWrapper>
+      <ResetModal isOpen={isOpen} toggleModal={toggleModal} mainModalAction={mainResetModalAction} />
     </>
   );
 };
@@ -94,6 +125,7 @@ const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   getAnalytics: analyticsActions.getAnalytics,
   updateScriptCode: analyticsActions.updateScriptCode,
+  deleteScriptCode: analyticsActions.deleteScriptCode,
 };
 
 interface IAnalyticsProps {
@@ -102,13 +134,14 @@ interface IAnalyticsProps {
   isSaving: boolean;
   isLoading: boolean;
   analytics: IAnalytics;
-  site: any;
+  site: ISite | null;
 }
 
 interface IDispatchProps {
-  getAnalytics(siteId?: number): void;
+  getAnalytics(siteId?: number | null): Promise<void>;
   setHistoryPush(path: string, isEditor?: boolean): void;
-  updateScriptCode(scriptCode: string, siteId: number): Promise<boolean>;
+  updateScriptCode(scriptCode: string, siteId?: number | null): Promise<boolean>;
+  deleteScriptCode(siteId?: number | null): Promise<boolean>;
 }
 
 type IProps = IAnalyticsProps & IDispatchProps;

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

@@ -101,6 +101,14 @@ const ContentType = styled.div`
   }
 `;
 
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
 export {
   Wrapper,
   Heading,
@@ -115,4 +123,5 @@ export {
   ComponentValues,
   AnalyticsWrapper,
   ContentType,
+  ModalContent,
 };

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

@@ -792,7 +792,7 @@ interface IDispatchProps {
   deleteBulk(ids: number[]): Promise<boolean>;
   restorePage(id: number | number[]): Promise<boolean>;
   resetPageEditor(): Promise<void>;
-  getAnalytics(): void;
+  getAnalytics(siteId?: number | null): Promise<void>;
   setCurrentDataID(id: number | null): void;
   resetCurrentSiteErrorPages: () => Promise<void>;
   setContentFilters(contentFilters: Record<string, IStructuredDataQueryValues> | null): void;