@griddo/ax 1.75.257 → 10.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.257",
+  "version": "10.1.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "97636f84e0f7c2a1b39421c5eef45acdd647e940"
+  "gitHead": "9c3c0cf154929716b3f9782fb4d7b3b88d2988a2"
 }

package/src/GlobalStore.tsx

@@ -19,6 +19,7 @@ import { galleryReducer, galleryInitialState } from "./containers/Gallery/reduce
 import { domainsReducer, domainsInitialState } from "./containers/Domains/reducer";
 import { redirectsReducer, redirectsInitialState } from "./containers/Redirects/reducer";
 import { analyticsReducer, analyticsInitialState } from "./containers/Analytics/reducer";
+import { integrationsReducer, integrationsInitialState } from "./containers/Integrations/reducer";
 import { LOGOUT } from "./containers/App/constants";
 
 import { IRootState } from "@ax/types";
@@ -52,6 +53,7 @@ export class GlobalStore {
       domains: domainsReducer as Reducer<any, Action<any>>,
       redirects: redirectsReducer as Reducer<any, Action<any>>,
       analytics: analyticsReducer as Reducer<any, Action<any>>,
+      integrations: integrationsReducer as Reducer<any, Action<any>>,
     });
 
     const rootReducer = (state: IRootState | undefined, action: any) => {
@@ -72,6 +74,7 @@ export class GlobalStore {
           domains: domainsInitialState,
           redirects: redirectsInitialState,
           analytics: analyticsInitialState,
+          integrations: integrationsInitialState,
         };
       }
 

package/src/__tests__/components/ConfigPanel/GlobalPageForm/GlobalPageForm.test.tsx

@@ -5,6 +5,7 @@ import { render, cleanup, screen, fireEvent } from "../../../../../config/jest/t
 import { mock } from "jest-mock-extended";
 import configureStore from "redux-mock-store";
 import "@testing-library/jest-dom";
+import thunk from "redux-thunk";
 
 import { parseTheme } from "@ax/helpers";
 import GlobalPageForm, { IGlobalPageFormProps } from "@ax/components/ConfigPanel/GlobalPageForm";
@@ -14,7 +15,7 @@ beforeEach(() => {
   cleanup();
 });
 
-const middlewares: any = [];
+const middlewares: any = [thunk];
 const mockStore = configureStore(middlewares);
 const updateEditorContentMock = jest.fn();
 const initialStore = {
@@ -48,6 +49,9 @@ const initialStore = {
         editorID: 1,
       },
     ],
+    currentSiteInfo: {
+      id: 1,
+    },
   },
   app: {
     lang: { locale: "es-ES", id: 0 },
@@ -62,6 +66,11 @@ const initialStore = {
   navigationActions: {
     updateEditorContent: updateEditorContentMock,
   },
+  integrations: {
+    integrations: [],
+    totalItems: 0,
+    integrationCopy: null,
+  },
 };
 
 const store = mockStore(initialStore);

package/src/__tests__/components/Fields/IntegrationsField/IntegrationsField.test.tsx

@@ -0,0 +1,391 @@
+import React from "react";
+import "@testing-library/jest-dom";
+import configureStore from "redux-mock-store";
+import { ThemeProvider } from "styled-components";
+import { mock } from "jest-mock-extended";
+import axios from "axios";
+import thunk from "redux-thunk";
+import { Router } from "react-router-dom";
+import { history } from "@ax/routes";
+
+import { render, cleanup, act, screen, fireEvent } from "../../../../../config/jest/test-utils";
+
+import IntegrationsField, { IIntegrationsFieldProps } from "@ax/components/Fields/IntegrationsField";
+import { parseTheme } from "@ax/helpers";
+import globalTheme from "@ax/themes/theme.json";
+
+afterEach(cleanup);
+
+const middlewares: any = [thunk];
+const mockStore = configureStore(middlewares);
+
+jest.mock("axios");
+const mockedAxios = axios as jest.MockedFunction<typeof axios>;
+
+const defaultProps = mock<IIntegrationsFieldProps>();
+defaultProps.site.id = 86;
+
+const initialStore = {
+  dataPacks: { activated: [] },
+  pageEditor: { template: "" },
+  app: {
+    globalLangs: [
+      {
+        id: 4,
+        locale: "en_GB",
+        language: "English",
+        label: "EN",
+        isDefault: true,
+      },
+      {
+        id: 2,
+        locale: "es_ES",
+        language: "Spanish",
+        label: "ES",
+        isDefault: false,
+      },
+    ],
+  },
+  sites: {
+    currentSiteInfo: { id: 86 },
+  },
+  integrations: {
+    integrations: [
+      {
+        id: 22,
+        name: "Customer Support",
+        description: "This is the integration for Customer Support",
+        site: 86,
+        contentHead: "<script>console.log('Hello')</script>",
+        contentBody: "",
+        contentBodyPosition: "start",
+        contentPresence: {
+          presenceType: null,
+          relatedPages: null,
+        },
+        active: true,
+        relatedPages: [],
+      },
+      {
+        id: 5,
+        name: "Reproductor",
+        description: "This is the integration for layers",
+        site: 86,
+        contentHead: "",
+        contentBody: "<script>console.log('Hello')</script>",
+        contentBodyPosition: "start",
+        contentPresence: {
+          presenceType: "all",
+          relatedPages: null,
+        },
+        active: true,
+        variables: [
+          {
+            id: 9,
+            variableName: "Pointer",
+            variableKey: "color",
+            defaultValue: "#FFFFF",
+            value: "#123456",
+            multilanguage: [],
+            isMultilanguage: false,
+          },
+        ],
+        relatedPages: [],
+      },
+      {
+        id: 4,
+        name: "Cupmaker",
+        description: "This is the integration for Cupmaker",
+        site: 86,
+        contentHead: "",
+        contentBody: "<script>console.log('Hello')</script>",
+        contentBodyPosition: "start",
+        contentPresence: {
+          presenceType: "page-specific",
+          relatedPages: null,
+        },
+        active: true,
+        variables: [
+          {
+            id: 3,
+            variableName: "Background",
+            variableKey: "color",
+            defaultValue: "#FFFFF",
+            value: "#111222",
+            multilanguage: [],
+            isMultilanguage: false,
+          },
+          {
+            id: 10,
+            variableName: "ColorCup",
+            variableKey: "color",
+            defaultValue: "#FFFFF",
+            value: "#000000",
+            multilanguage: [],
+            isMultilanguage: false,
+          },
+        ],
+        relatedPages: [],
+      },
+    ],
+    totalItems: 3,
+    integrationCopy: null,
+  },
+};
+
+describe("IntegrationsField component rendering", () => {
+  test("should render the component IntegrationsField", async () => {
+    const initialState = { ...defaultProps };
+    defaultProps.value = [];
+    const store = mockStore(initialStore);
+
+    const data = {
+      data: { ...initialStore.integrations },
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <IntegrationsField {...{ ...initialState, ...defaultProps }} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    expect(screen.getByText("Third-Party Integration")).toBeTruthy();
+  });
+
+  test("should render the component IntegrationsField with integrations", async () => {
+    const initialState = { ...defaultProps };
+    defaultProps.value = [...initialStore.integrations.integrations];
+    const store = mockStore(initialStore);
+
+    const data = {
+      data: { ...initialStore.integrations },
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <IntegrationsField {...{ ...initialState, ...defaultProps }} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    expect(screen.getAllByTestId("integration-item").length).toBe(3);
+  });
+
+  test("should render the component IntegrationsField with custom code integration", async () => {
+    const initialState = { ...defaultProps };
+
+    const customOption = {
+      name: "",
+      contentHead: "",
+      contentBody: "",
+      contentBodyPosition: null,
+      contentPresence: { presenceType: "page-manual", relatedPages: null },
+    };
+
+    defaultProps.value = [...initialStore.integrations.integrations, customOption];
+    const store = mockStore(initialStore);
+
+    const data = {
+      data: { ...initialStore.integrations },
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <IntegrationsField {...{ ...initialState, ...defaultProps }} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    expect(screen.getAllByTestId("integration-item").length).toBe(4);
+  });
+});
+
+describe("Events", () => {
+  test("should delete a integration", async () => {
+    const initialState = { ...defaultProps };
+    defaultProps.value = [...initialStore.integrations.integrations];
+    const store = mockStore(initialStore);
+    const onChange = jest.fn();
+
+    const data = {
+      data: { ...initialStore.integrations },
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <IntegrationsField {...{ ...initialState, ...defaultProps }} onChange={onChange} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    expect(screen.getAllByTestId("integration-item").length).toBe(3);
+
+    const floatingMenuButtons = screen.getAllByTestId("floating-menu-button");
+    fireEvent.click(floatingMenuButtons[1]);
+    const actionMenu = screen.getByTestId("action-menu-item");
+    fireEvent.click(actionMenu);
+
+    const buttonsDefault = screen.getAllByTestId("button-default");
+    fireEvent.click(buttonsDefault[3]);
+
+    const integrationsWithDeletion = initialStore.integrations.integrations.slice(0, 2);
+
+    expect(onChange).toHaveBeenLastCalledWith(integrationsWithDeletion);
+  });
+
+  test("should add an integration", async () => {
+    const initialState = { ...defaultProps };
+    defaultProps.value = [];
+    const store = mockStore(initialStore);
+    const onChange = jest.fn();
+
+    const data = {
+      data: { ...initialStore.integrations },
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <IntegrationsField {...{ ...initialState, ...defaultProps }} onChange={onChange} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    const iconActionComponent = screen.getByTestId("icon-action-component");
+    fireEvent.click(iconActionComponent);
+
+    const integrationSideModalOption = screen.getAllByTestId("integration-side-modal-option");
+    fireEvent.click(integrationSideModalOption[0]);
+
+    const integrationAdded = initialStore.integrations.integrations.slice(0, 1);
+
+    expect(onChange).toHaveBeenLastCalledWith(integrationAdded);
+  });
+
+  test("should add an custom code integration", async () => {
+    const initialState = { ...defaultProps };
+    defaultProps.value = [];
+    const store = mockStore(initialStore);
+    const onChange = jest.fn();
+
+    const data = {
+      data: { ...initialStore.integrations },
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <IntegrationsField {...{ ...initialState, ...defaultProps }} onChange={onChange} />
+        </ThemeProvider>,
+        { store }
+      );
+    });
+
+    const iconActionComponent = screen.getByTestId("icon-action-component");
+    fireEvent.click(iconActionComponent);
+
+    const integrationSideModalOption = screen.getAllByTestId("integration-side-modal-option");
+    fireEvent.click(integrationSideModalOption[1]);
+
+    const customOption = {
+      active: true,
+      name: "",
+      contentHead: "",
+      contentBody: "",
+      contentBodyPosition: null,
+      contentPresence: { presenceType: "page-custom", relatedPages: null },
+    };
+
+    expect(onChange).toHaveBeenLastCalledWith([customOption]);
+  });
+
+  test("should paste a custom code integration", async () => {
+    const initialState = { ...defaultProps };
+    defaultProps.value = [];
+    const _initialStore: any = { ...initialStore };
+    _initialStore.integrations.integrationCopy = {
+      date: new Date(),
+      integration: {
+        id: 29,
+        name: "My custom integration",
+        description: "This is a custom integration",
+        site: 86,
+        contentHead: "<script>console.log('Hello, world!')</script>",
+        contentBody: "",
+        contentBodyPosition: "start",
+        contentPresence: {
+          presenceType: "page-custom",
+          relatedPages: null,
+        },
+        active: true,
+      },
+    };
+    const store = mockStore(initialStore);
+    const onChange = jest.fn();
+
+    const data = {
+      data: { ...initialStore.integrations },
+      status: 200,
+      statusText: "Ok",
+      headers: {},
+      config: {},
+    };
+    mockedAxios.mockResolvedValue(data);
+
+    await act(async () => {
+      render(
+        <Router history={history}>
+          <ThemeProvider theme={parseTheme(globalTheme)}>
+            <IntegrationsField {...{ ...initialState, ...defaultProps }} onChange={onChange} />
+          </ThemeProvider>
+        </Router>,
+        { store }
+      );
+    });
+
+    const iconActionComponents = screen.getAllByTestId("icon-action-component");
+    fireEvent.click(iconActionComponents[0]);
+
+    expect(onChange).toHaveBeenLastCalledWith([_initialStore.integrations.integrationCopy.integration]);
+  });
+});

package/src/__tests__/modules/Settings/Integrations/Integrations.test.tsx

@@ -0,0 +1,167 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { parseTheme } from "@ax/helpers";
+import { mock } from "jest-mock-extended";
+import configureStore from "redux-mock-store";
+import thunk from "redux-thunk";
+import { Router } from "react-router-dom";
+
+import history from "@ax/routes/history";
+import globalTheme from "@ax/themes/theme.json";
+import Integrations, { IIntegrationsProps } from "@ax/modules/Settings/Integrations";
+import { render, cleanup, screen, act } from "../../../../../config/jest/test-utils";
+
+afterEach(cleanup);
+
+const defaultProps = mock<IIntegrationsProps>();
+
+describe("Component rendering", () => {
+  it("should render the component with integrations list empty", async () => {
+    const initialStore = {
+      integrations: {
+        integrations: [],
+        totalItems: 0,
+      },
+      app: { isLoading: false },
+      sites: { currentSiteInfo: { id: 85 } },
+    };
+
+    const middlewares: any = [thunk];
+    const mockStore = configureStore(middlewares);
+    const store = mockStore(initialStore);
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    await act(async () => {
+      render(
+        <Router history={history}>
+          <ThemeProvider theme={parseTheme(globalTheme)}>
+            <Integrations {...initialState} />
+          </ThemeProvider>
+        </Router>,
+        { store }
+      );
+    });
+
+    const integrationsMainWrapper = screen.getByTestId("integrations-main-wrapper");
+
+    expect(integrationsMainWrapper).toBeTruthy();
+  });
+
+  it("should render the component with items in the list", async () => {
+    const initialStore = {
+      integrations: {
+        integrations: [
+          {
+            id: 28,
+            name: "Chatbot",
+            description: "This is the integration for cookies",
+            site: 85,
+            contentHead: null,
+            contentBody: "<script>console.log('Hello')</script>",
+            contentBodyPosition: "start",
+            contentPresence: {
+              presenceType: null,
+              relatedPages: null,
+            },
+            active: false,
+            variables: [
+              {
+                id: 38,
+                variableName: "Nuevo1",
+                variableKey: "color",
+                defaultValue: "#FFFFF",
+                multilanguage: null,
+              },
+              {
+                id: 39,
+                variableName: "Nuevo3",
+                variableKey: "color",
+                defaultValue: "#FFFFF",
+                multilanguage: null,
+              },
+            ],
+          },
+          {
+            id: 19,
+            name: "Service 1",
+            description: "This is the integration for Service",
+            site: 85,
+            contentHead: null,
+            contentBody: "<script>console.log('Hello')</script>",
+            contentBodyPosition: "start",
+            contentPresence: {
+              presenceType: "page-specific",
+              relatedPages: [3347],
+            },
+            active: false,
+          },
+          {
+            id: 20,
+            name: "Service 2",
+            description: "This is the integration for Service",
+            site: 85,
+            contentHead: null,
+            contentBody: "<script>console.log('Hello')</script>",
+            contentBodyPosition: "start",
+            contentPresence: {
+              presenceType: "all",
+              relatedPages: null,
+            },
+            active: false,
+          },
+          {
+            id: 21,
+            name: "Service 3",
+            description: "This is the integration for Service",
+            site: 85,
+            contentHead: null,
+            contentBody: "<script>console.log('Hello')</script>",
+            contentBodyPosition: "start",
+            contentPresence: {
+              presenceType: "page-specific",
+              relatedPages: null,
+            },
+            active: true,
+          },
+          {
+            id: 22,
+            name: "Service 4",
+            description: "This is the integration for Service",
+            site: 85,
+            contentHead: null,
+            contentBody: "<script>console.log('Hello')</script>",
+            contentBodyPosition: "start",
+            contentPresence: {
+              presenceType: undefined,
+              relatedPages: undefined,
+            },
+            active: true,
+          },
+        ],
+        totalItems: 5,
+      },
+      app: { isLoading: false },
+      sites: { currentSiteInfo: { id: 85 } },
+    };
+
+    const middlewares: any = [thunk];
+    const mockStore = configureStore(middlewares);
+    const store = mockStore(initialStore);
+
+    const initialState = { ...initialStore, ...defaultProps };
+
+    const Component = (
+      <Router history={history}>
+        <ThemeProvider theme={parseTheme(globalTheme)}>
+          <Integrations {...initialState} />
+        </ThemeProvider>
+      </Router>
+    );
+
+    render(Component, { store });
+
+    expect(await screen.findByText("Chatbot")).toBeTruthy();
+    expect(screen.getAllByTestId("integration-item-row").length).toBe(5);
+  });
+});

package/src/api/index.tsx

@@ -16,6 +16,7 @@ import users from "./users";
 import domains from "./domains";
 import redirects from "./redirects";
 import analytics from "./analytics";
+import integrations from "./integrations";
 
 export {
   sites,
@@ -35,5 +36,6 @@ export {
   users,
   domains,
   redirects,
-  analytics
+  analytics,
+  integrations,
 };