@griddo/ax 1.75.258 → 10.1.1

package/src/api/integrations.tsx

@@ -0,0 +1,153 @@
+import { AxiosResponse } from "axios";
+import { IIntegration } from "@ax/types";
+import { template } from "./config";
+import { IServiceConfig, sendRequest } from "./utils";
+
+const SERVICES: { [key: string]: IServiceConfig } = {
+  GET_INTEGRATIONS: {
+    ...template,
+    endpoint: ["/site/", "/integrations"],
+    method: "GET",
+  },
+  GET_INTEGRATION: {
+    ...template,
+    endpoint: ["/site/", "/integration/"],
+    method: "GET",
+  },
+  CREATE_INTEGRATION: {
+    ...template,
+    endpoint: "/integration/site/",
+    method: "POST",
+  },
+  UPDATE_INTEGRATION: {
+    ...template,
+    endpoint: ["/integration/", "/site/"],
+    method: "PUT",
+  },
+  DELETE_INTEGRATION: {
+    ...template,
+    endpoint: "/integration/",
+    method: "DELETE",
+  },
+  DELETE_INTEGRATION_BULK: {
+    ...template,
+    endpoint: "/integration/bulk",
+    method: "DELETE",
+  },
+  CHANGE_INTEGRATION_STATE: {
+    ...template,
+    endpoint: ["/integration/", "/state/"],
+    method: "PUT",
+  },
+  CHANGE_INTEGRATION_STATE_BULK: {
+    ...template,
+    endpoint: ["/integration/state/", "/bulk"],
+    method: "PUT",
+  },
+  DUPLICATE_INTEGRATION: {
+    ...template,
+    endpoint: ["/integration/", "/duplicate/"],
+    method: "POST",
+  },
+};
+
+const getIntegrations = async (site: number, params: any = {}): Promise<AxiosResponse> => {
+  const { page, itemsPerPage, pagination = false, filter = "", filterState } = params;
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_INTEGRATIONS;
+
+  const stateQuery = filterState ? `&filterState=${filterState}` : "";
+  SERVICES.GET_INTEGRATIONS.dynamicUrl = `${host}${prefix}${site}${suffix}?pagination=${pagination}${filter}${stateQuery}`;
+  if (pagination) SERVICES.GET_INTEGRATIONS.dynamicUrl += `&page=${page}&itemsPerPage=${itemsPerPage}`;
+
+  return sendRequest(SERVICES.GET_INTEGRATIONS);
+};
+
+const getIntegration = async (id: number, siteID: number): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.GET_INTEGRATION;
+
+  SERVICES.GET_INTEGRATION.dynamicUrl = `${host}${prefix}${siteID}${suffix}${id}`;
+
+  return sendRequest(SERVICES.GET_INTEGRATION);
+};
+
+const createIntegration = async (data: IIntegration, siteID: number): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.CREATE_INTEGRATION;
+
+  SERVICES.CREATE_INTEGRATION.dynamicUrl = `${host}${endpoint}${siteID}`;
+
+  return sendRequest(SERVICES.CREATE_INTEGRATION, { ...data });
+};
+
+const updateIntegration = async (data: IIntegration, siteID: number): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.UPDATE_INTEGRATION;
+
+  SERVICES.UPDATE_INTEGRATION.dynamicUrl = `${host}${prefix}${data.id}${suffix}${siteID}`;
+
+  return sendRequest(SERVICES.UPDATE_INTEGRATION, { ...data });
+};
+
+const deleteIntegration = async (id: number): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.DELETE_INTEGRATION;
+
+  SERVICES.DELETE_INTEGRATION.dynamicUrl = `${host}${endpoint}${id}`;
+
+  return sendRequest(SERVICES.DELETE_INTEGRATION);
+};
+
+const deleteIntegrationsBulk = async (ids: number[]): Promise<AxiosResponse> => {
+  return sendRequest(SERVICES.DELETE_INTEGRATION_BULK, { ids });
+};
+
+const changeState = async (id: number, state: "enable" | "disable"): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.CHANGE_INTEGRATION_STATE;
+
+  SERVICES.CHANGE_INTEGRATION_STATE.dynamicUrl = `${host}${prefix}${id}${suffix}${state}`;
+
+  return sendRequest(SERVICES.CHANGE_INTEGRATION_STATE);
+};
+
+const changeStateBulk = async (ids: number[], state: "enable" | "disable"): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.CHANGE_INTEGRATION_STATE_BULK;
+
+  SERVICES.CHANGE_INTEGRATION_STATE_BULK.dynamicUrl = `${host}${prefix}${state}${suffix}`;
+
+  return sendRequest(SERVICES.CHANGE_INTEGRATION_STATE_BULK, { ids });
+};
+
+const duplicateIntegration = async (id: number, site: number): Promise<AxiosResponse> => {
+  const {
+    host,
+    endpoint: [prefix, suffix],
+  } = SERVICES.DUPLICATE_INTEGRATION;
+
+  SERVICES.DUPLICATE_INTEGRATION.dynamicUrl = `${host}${prefix}${id}${suffix}${site}`;
+
+  return sendRequest(SERVICES.DUPLICATE_INTEGRATION);
+};
+
+export default {
+  getIntegrations,
+  createIntegration,
+  updateIntegration,
+  getIntegration,
+  deleteIntegration,
+  deleteIntegrationsBulk,
+  changeState,
+  changeStateBulk,
+  duplicateIntegration,
+};

package/src/api/sites.tsx

@@ -1,7 +1,7 @@
 import { AxiosResponse } from "axios";
 import { IGetGlobalPagesParams, IGetSitePagesParams, IGetSitesParams } from "@ax/types";
 import { template } from "./config";
-import { sendRequest, sendInitialRequest, IServiceConfig } from "./utils";
+import { sendRequest, IServiceConfig, sendInitialRequest } from "./utils";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
   GET_ALL_SITES: {
@@ -173,7 +173,8 @@ const getSitePages = async (params: IGetSitePagesParams, filterQuery?: string):
     endpoint: [prefix, suffix],
   } = SERVICES.GET_SITE_PAGES;
 
-  const { siteID, deleted, page, itemsPerPage, query, filterStructuredData, lang, format, filterPages } = params;
+  const { siteID, deleted, page, itemsPerPage, query, filterStructuredData, lang, format, filterPages, ignoreLang } =
+    params;
 
   const filters = filterQuery ? `${filterQuery}&` : "?";
 
@@ -190,6 +191,7 @@ const getSitePages = async (params: IGetSitePagesParams, filterQuery?: string):
   if (format) SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&format=${format}`;
   if (filterPages)
     SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&filterPages=${filterPages.join(",")}`;
+  if (ignoreLang) SERVICES.GET_SITE_PAGES.dynamicUrl = SERVICES.GET_SITE_PAGES.dynamicUrl + `&ignoreLang=${ignoreLang}`;
 
   const dataHeader = {
     ...(lang && { lang }),

package/src/components/ActionMenu/index.tsx

@@ -31,7 +31,7 @@ const ActionMenu = (props: IActionMenuProps): JSX.Element => {
     </S.ActionItem>
   );
 
-  return (
+  return options.length > 0 ? (
     <S.Wrapper className={className} data-testid="action-menu-wrapper">
       <Tooltip content={tooltip} hideOnClick>
         <FloatingMenu Button={MoreInfoButton}>
@@ -39,6 +39,8 @@ const ActionMenu = (props: IActionMenuProps): JSX.Element => {
         </FloatingMenu>
       </Tooltip>
     </S.Wrapper>
+  ) : (
+    <></>
   );
 };
 

package/src/components/ActionMenu/style.tsx

@@ -12,6 +12,7 @@ export const IconActionWrapper = styled.div`
 
 export const ActionMenu = styled.ul`
   padding: 0;
+  cursor: pointer;
 `;
 
 export const ActionText = styled.div`

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/Field/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { getInnerFields } from "@ax/forms";
 import { FieldContainer, FieldGroup } from "@ax/components";
-import { IErrorItem, IPage, ISite } from "@ax/types";
+import { IErrorItem, IPage, ISite, ILanguage } from "@ax/types";
 
 const Field = (props: IFieldProps): JSX.Element => {
   const {
@@ -29,6 +29,7 @@ const Field = (props: IFieldProps): JSX.Element => {
     availableDataPacks,
     template,
     setHistoryPush,
+    languages,
   } = props;
   const isGroup = field.type === "FieldGroup";
   const isCollapsed = isGroup && field.collapsed;
@@ -81,6 +82,7 @@ const Field = (props: IFieldProps): JSX.Element => {
       availableDataPacks={availableDataPacks}
       template={template}
       setHistoryPush={setHistoryPush}
+      languages={languages}
     />
   );
 };
@@ -110,6 +112,7 @@ export interface IFieldProps {
   availableDataPacks: Record<string, any>[];
   template: any;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
+  languages?: ILanguage[];
 }
 
 export default Field;

package/src/components/ConfigPanel/Form/ConnectedField/PageConnectedField/index.tsx

@@ -37,6 +37,7 @@ const PageConnectedField = (props: any) => {
     availableDataPacks,
     template,
     setHistoryPush,
+    languages,
     isReadOnly,
   } = props;
 
@@ -192,6 +193,7 @@ const PageConnectedField = (props: any) => {
       availableDataPacks={availableDataPacks}
       template={template}
       setHistoryPush={setHistoryPush}
+      languages={languages}
     />
   );
 };
@@ -209,6 +211,7 @@ const mapStateToProps = (state: IRootState) => ({
   moduleCopy: state.pageEditor.moduleCopy,
   availableDataPacks: state.dataPacks.available,
   template: state.pageEditor.template,
+  languages: state.sites.currentSiteLanguages,
 });
 
 const mapDispatchToProps = {

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -25,7 +25,7 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
     setHistoryPush && setHistoryPush(path, true);
   };
 
-  const field = {
+  const parentField = {
     title: "Parent",
     type: "AsyncSelect",
     entity: "pages",
@@ -131,7 +131,7 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
             selectedTab={selectedTab}
             key="parent"
             objKey="parent"
-            field={field}
+            field={parentField}
             componentType={schema.schemaType}
             isPage={true}
             isGlobal={true}
@@ -145,6 +145,15 @@ const GlobalPageForm = (props: IGlobalPageFormProps): JSX.Element => {
             isPage={true}
             isGlobal={true}
           />
+          <ConnectedField
+            selectedTab={selectedTab}
+            key="integrations"
+            objKey="integrations"
+            field={{ type: "IntegrationsField", key: "integrations" }}
+            componentType={schema.schemaType}
+            isPage={true}
+            isGlobal={true}
+          />
         </>
       )}
     </section>

package/src/components/FieldContainer/index.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-import { IPage, ISite } from "@ax/types";
+import { IPage, ISite, ILanguage } from "@ax/types";
 import { getNullValue, getDefaultSchema, getDefaultTemplate } from "@ax/helpers";
 
 import { FieldsBehavior, HiddenField } from "@ax/components";
@@ -81,4 +81,5 @@ export interface IFieldContainerProps {
   availableDataPacks?: Record<string, unknown>[];
   template?: any;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
+  languages?: ILanguage[];
 }

package/src/components/Fields/IntegrationsField/IntegrationItem/CustomPanel/index.tsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+
+import { IIntegration } from "@ax/types";
+import { FloatingPanel, Button, FieldsBehavior, NoteField } from "@ax/components";
+
+import * as S from "./style";
+
+const CustomPanel = (props: IProps): JSX.Element => {
+  const { isOpen, toggleModal, integration, setIntegration } = props;
+
+  const [form, setForm] = useState(integration);
+
+  const handleChange = (value: Record<string, string>) => setForm((state) => ({ ...state, ...value }));
+
+  const editItemAction = () => {
+    form && setIntegration(form);
+    toggleModal();
+  };
+
+  const editButton = {
+    label: "Add custom code",
+    action: editItemAction,
+  };
+
+  const noteText =
+    "Add custom code to the head or body for this page. The third-party must give you instructions about where to place the code and how to use it.";
+
+  const bodyCodeOptions = [
+    {
+      title: "Start of the body",
+      name: "start",
+      value: "start",
+    },
+    {
+      title: "End of the body",
+      name: "end",
+      value: "end",
+    },
+  ];
+
+  return (
+    <FloatingPanel title="Add custom code" toggleModal={toggleModal} isOpen={isOpen}>
+      <S.ContentWrapper>
+        <S.NoteWrapper>
+          <NoteField value={{ text: noteText }} />
+        </S.NoteWrapper>
+        <FieldsBehavior
+          title="Name"
+          name="name"
+          fieldType="TextField"
+          value={form.name}
+          placeholder="Type a name"
+          onChange={(value: string) => handleChange({ name: value })}
+          mandatory
+          validators={{ mandatory: true }}
+        />
+        <FieldsBehavior
+          title="Head Code"
+          name="contentHead"
+          fieldType="TextArea"
+          value={form.contentHead}
+          placeholder="Enter the code that will be injected into the head’s page."
+          onChange={(value: string) => handleChange({ contentHead: value })}
+          rows={4}
+        />
+        <FieldsBehavior
+          title="Body Code"
+          name="contentBody"
+          fieldType="TextArea"
+          value={form.contentBody}
+          placeholder="Enter the code that will be injected into the body’s page."
+          onChange={(value: string) => handleChange({ contentBody: value })}
+          rows={4}
+        />
+        <FieldsBehavior
+          title="Page body code in:"
+          name="contentBodyPosition"
+          fieldType="RadioGroup"
+          value={form.contentBodyPosition}
+          options={bodyCodeOptions}
+          onChange={(value: string) => handleChange({ contentBodyPosition: value })}
+          disabled={!form.contentBody?.length}
+        />
+      </S.ContentWrapper>
+      <S.Footer>
+        <Button className="button" type="button" onClick={editButton.action} disabled={!form.name?.length}>
+          {editButton.label}
+        </Button>
+      </S.Footer>
+    </FloatingPanel>
+  );
+};
+
+interface IProps {
+  integration: Partial<IIntegration>;
+  isOpen: boolean;
+  toggleModal: () => void;
+  setIntegration(modifiedIntegration: Partial<IIntegration>): void;
+}
+
+export default CustomPanel;

package/src/components/Fields/IntegrationsField/IntegrationItem/CustomPanel/style.tsx

@@ -0,0 +1,23 @@
+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};
+
+`
+
+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/components/Fields/IntegrationsField/IntegrationItem/VariablesPanel/helpers.ts

@@ -0,0 +1,31 @@
+import { IIntegrationVariable } from "@ax/types";
+
+const modifyVariableValue = (
+  variables: IIntegrationVariable[] | undefined,
+  newVariableValues: {
+    id: number | undefined;
+    value: string;
+    multiLangVariable?: { id?: number; languageId: number; value: string };
+  }
+): IIntegrationVariable[] | undefined => {
+  const { id, value, multiLangVariable } = newVariableValues;
+  let newVariables;
+  if (multiLangVariable) {
+    newVariables = variables?.map((variable) =>
+      variable.id === id
+        ? {
+            ...variable,
+            multilanguage:
+              variable.multilanguage?.map((langVariable) =>
+                langVariable.id === multiLangVariable.id ? { ...langVariable, value } : langVariable
+              ) || null,
+          }
+        : variable
+    );
+  } else {
+    newVariables = variables?.map((variable) => (variable.id === id ? { ...variable, value } : variable));
+  }
+  return newVariables;
+};
+
+export { modifyVariableValue };

package/src/components/Fields/IntegrationsField/IntegrationItem/VariablesPanel/index.tsx

@@ -0,0 +1,120 @@
+import React, { useCallback, useRef, useState } from "react";
+
+import { IIntegration, IIntegrationVariable, ILanguage } from "@ax/types";
+import { FloatingPanel, Button, FieldsBehavior, NoteField } from "@ax/components";
+
+import * as S from "./style";
+import { modifyVariableValue } from "./helpers";
+
+const VariablesPanel = (props: IProps): JSX.Element => {
+  const { isOpen, toggleModal, integration, setIntegrationVariables, languages } = props;
+  const { variables } = integration;
+
+  const [variablesForm, setVariablesForm] = useState(variables);
+
+  const setVariableValue = (
+    id: number | undefined,
+    value: string,
+    multiLangVariable?: { id?: number; languageId: number; value: string }
+  ) => {
+    const newVariableValues = { id, value, multiLangVariable };
+    const newVariables = modifyVariableValue(variablesForm, newVariableValues);
+    setVariablesForm(newVariables);
+  };
+  const setVariableValueRef = useRef(setVariableValue);
+  setVariableValueRef.current = setVariableValue;
+
+  const editItemAction = () => {
+    variablesForm && setIntegrationVariables(variablesForm);
+    toggleModal();
+  };
+
+  const editButton = {
+    label: "Update values",
+    action: editItemAction,
+  };
+
+  const noteText =
+    "This integration has some variables assigned. You can define its values to customize some properties.";
+
+  const Variable = ({ variable }: { variable: IIntegrationVariable }) => {
+    const handleChange = (value: string) => setVariableValueRef.current(variable.id, value);
+    return (
+      <FieldsBehavior
+        title={variable.variableName}
+        name={variable.variableName}
+        fieldType="TextArea"
+        value={variable.value}
+        placeholder={variable.defaultValue}
+        onChange={handleChange}
+        mandatory
+        validators={{ mandatory: true }}
+        rows={4}
+      />
+    );
+  };
+
+  const MultilanguageVariable = (props: {
+    variable: IIntegrationVariable;
+    multiLangVariable: { id?: number; languageId: number; value: string };
+  }) => {
+    const { variable, multiLangVariable } = props;
+    const langName = languages.find((lang) => lang.id === multiLangVariable.languageId)?.language;
+    const variableName = `${langName} ${variable.variableName}`;
+    const handleChange = (value: string) => setVariableValueRef.current(variable.id, value, multiLangVariable);
+    return (
+      <FieldsBehavior
+        title={variableName}
+        name={variable.variableName}
+        fieldType="TextArea"
+        value={multiLangVariable.value}
+        placeholder={variable.defaultValue}
+        onChange={handleChange}
+        mandatory
+        validators={{ mandatory: true }}
+        rows={4}
+      />
+    );
+  };
+
+  const renderVariables = useCallback(
+    () =>
+      variablesForm?.map((variable, index) =>
+        variable.isMultilanguage ? (
+          variable.multilanguage?.map((multiLangVariable, i) => (
+            <MultilanguageVariable key={i} variable={variable} multiLangVariable={multiLangVariable} />
+          ))
+        ) : (
+          <Variable key={index} variable={variable} />
+        )
+      ),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [variables]
+  );
+
+  return (
+    <FloatingPanel title="Define values" toggleModal={toggleModal} isOpen={isOpen}>
+      <S.ContentWrapper>
+        <S.NoteWrapper>
+          <NoteField value={{ text: noteText }} />
+        </S.NoteWrapper>
+        {renderVariables()}
+      </S.ContentWrapper>
+      <S.Footer>
+        <Button className="button" type="button" onClick={editButton.action}>
+          {editButton.label}
+        </Button>
+      </S.Footer>
+    </FloatingPanel>
+  );
+};
+
+interface IProps {
+  integration: Partial<IIntegration>;
+  isOpen: boolean;
+  toggleModal: () => void;
+  setIntegrationVariables(variables: IIntegrationVariable[]): void;
+  languages: ILanguage[];
+}
+
+export default VariablesPanel;

package/src/components/Fields/IntegrationsField/IntegrationItem/VariablesPanel/style.tsx

@@ -0,0 +1,23 @@
+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};
+
+`
+
+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/components/Fields/IntegrationsField/IntegrationItem/atoms.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { IModal } from "@ax/types";
+import { Modal } from "@ax/components";
+
+import * as S from "./style";
+
+const DeleteModal = (props: IModal & { integrationName: string | undefined }): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, integrationName } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title={`Remove ${integrationName} integration`}
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+    >
+      <S.ModalContent>
+        Are you sure you want to remove <strong>{integrationName}</strong> from this page?
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+export { DeleteModal };