@griddo/ax 1.75.257 → 10.1.0

package/src/components/index.tsx

@@ -32,6 +32,7 @@ import {
   VisualOption,
   VisualUniqueSelection,
   Wysiwyg,
+  IntegrationsField,
 } from "./Fields";
 import { ListTitle, ListItem } from "./Lists";
 import {
@@ -44,7 +45,9 @@ import {
   TranslationsFilter,
   TypeFilter,
   DateFilter,
-  LastAccessFilter
+  CheckGroupFilter,
+  StateFilter,
+  LastAccessFilter,
 } from "./TableFilters";
 
 import ActionMenu from "./ActionMenu";
@@ -81,6 +84,7 @@ import MenuItem from "./MenuItem";
 import Modal from "./Modal";
 import Nav from "./Nav";
 import Notification from "./Notification";
+import PageFinder from "./PageFinder";
 import Pagination from "./Pagination";
 import ProgressBar from "./ProgressBar";
 import ReorderArrows from "./ReorderArrows";
@@ -130,10 +134,12 @@ export {
   VisualOption,
   VisualUniqueSelection,
   Wysiwyg,
+  IntegrationsField,
   //Lists
   ListTitle,
   ListItem,
   //Filters
+  CheckGroupFilter,
   DateFilter,
   CategoryFilter,
   CustomizeFilters,
@@ -143,6 +149,7 @@ export {
   StatusFilter,
   TranslationsFilter,
   TypeFilter,
+  StateFilter,
   LastAccessFilter,
   // Components
   ActionMenu,
@@ -179,6 +186,7 @@ export {
   Modal,
   Nav,
   Notification,
+  PageFinder,
   Pagination,
   ProgressBar,
   ReorderArrows,

package/src/containers/Integrations/actions.tsx

@@ -0,0 +1,190 @@
+import { integrations } from "@ax/api";
+import { appActions } from "@ax/containers/App";
+import { handleRequest } from "@ax/helpers";
+import { IIntegration } from "@ax/types";
+import { Dispatch } from "redux";
+
+import {
+  DEFAULT_PARAMS,
+  SET_COPY_INTEGRATION,
+  SET_CURRENT_INTEGRATION,
+  SET_INTEGRATIONS,
+  SET_TOTAL_ITEMS,
+} from "./constants";
+import { ISetCopyIntegration, ISetCurrentIntegration, ISetIntegrations, ISetTotalItems } from "./interfaces";
+
+function setIntegrations(integrations: IIntegration[]): ISetIntegrations {
+  return { type: SET_INTEGRATIONS, payload: { integrations } };
+}
+
+function setTotalItems(totalItems: number): ISetTotalItems {
+  return { type: SET_TOTAL_ITEMS, payload: { totalItems } };
+}
+
+function setCurrentIntegration(currentIntegration: IIntegration | null): ISetCurrentIntegration {
+  return { type: SET_CURRENT_INTEGRATION, payload: { currentIntegration } };
+}
+
+function setCopyIntegration(
+  integrationCopy: { date: Date; integration: Partial<IIntegration> } | null
+): ISetCopyIntegration {
+  return { type: SET_COPY_INTEGRATION, payload: { integrationCopy } };
+}
+
+function getIntegrations(site: number, params?: any, isPage?: boolean): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => integrations.getIntegrations(site, params);
+      const responseActions = {
+        handleSuccess: (response: any) => {
+          const { items, totalItems } = response;
+          dispatch(setIntegrations(items));
+          dispatch(setTotalItems(totalItems));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      await handleRequest(callback, responseActions, isPage ? [] : [appActions.setIsLoading])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function resetIntegrations(): (dispatch: Dispatch) => void {
+  return (dispatch) => {
+    dispatch(setIntegrations([]));
+  };
+}
+
+function deleteIntegration(
+  integrationId: number | number[],
+  currentParams?: any
+): (dispatch: any, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        sites: { currentSiteInfo },
+      } = getState();
+
+      const callback = async () =>
+        Array.isArray(integrationId)
+          ? integrations.deleteIntegrationsBulk(integrationId)
+          : integrations.deleteIntegration(integrationId);
+
+      const responseActions = {
+        handleSuccess: () => {
+          const params = { ...DEFAULT_PARAMS, ...currentParams };
+          dispatch(getIntegrations(currentSiteInfo.id, params));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function changeIntegrationState(
+  integrationId: number | number[],
+  active: boolean,
+  currentParams?: any
+): (dispatch: any, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        sites: { currentSiteInfo },
+      } = getState();
+
+      const state = active ? "enable" : "disable";
+      const callback = async () =>
+        Array.isArray(integrationId)
+          ? integrations.changeStateBulk(integrationId, state)
+          : integrations.changeState(integrationId, state);
+
+      const responseActions = {
+        handleSuccess: () => {
+          const params = { ...DEFAULT_PARAMS, ...currentParams };
+          dispatch(getIntegrations(currentSiteInfo.id, params));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function getIntegration(id: number, siteID: number): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => integrations.getIntegration(id, siteID);
+      const responseActions = {
+        handleSuccess: (response: IIntegration) => setCurrentIntegration(response),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      await handleRequest(callback, responseActions, [appActions.setIsLoading])(dispatch);
+    } catch (e) {
+      console.log(e);
+    }
+  };
+}
+
+function createIntegration(data: IIntegration, siteID: number): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => integrations.createIntegration(data, siteID);
+      const responseActions = {
+        handleSuccess: (response: IIntegration) => dispatch(setCurrentIntegration(response)),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function updateIntegration(data: IIntegration, siteID: number): (dispatch: Dispatch) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => integrations.updateIntegration(data, siteID);
+      const responseActions = {
+        handleSuccess: (response: IIntegration) => dispatch(setCurrentIntegration(response)),
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+function copyIntegration(integration: Partial<IIntegration>): (dispatch: Dispatch) => void {
+  return (dispatch) => {
+    const payload = {
+      date: new Date(),
+      integration,
+    };
+    dispatch(setCopyIntegration(payload));
+  };
+}
+
+export {
+  getIntegrations,
+  resetIntegrations,
+  deleteIntegration,
+  changeIntegrationState,
+  getIntegration,
+  createIntegration,
+  updateIntegration,
+  setCurrentIntegration,
+  copyIntegration,
+};

package/src/containers/Integrations/constants.tsx

@@ -0,0 +1,14 @@
+const NAME = "integrations";
+
+const SET_INTEGRATIONS = `${NAME}/SET_INTEGRATIONS`;
+const SET_TOTAL_ITEMS = `${NAME}/SET_TOTAL_ITEMS`;
+const SET_CURRENT_INTEGRATION = `${NAME}/SET_CURRENT_INTEGRATION`;
+const SET_COPY_INTEGRATION = `${NAME}/SET_COPY_INTEGRATION`;
+
+const DEFAULT_PARAMS = {
+  page: 1,
+  itemsPerPage: 50,
+  pagination: true,
+};
+
+export { NAME, SET_INTEGRATIONS, SET_TOTAL_ITEMS, DEFAULT_PARAMS, SET_CURRENT_INTEGRATION, SET_COPY_INTEGRATION };

package/src/containers/Integrations/index.tsx

@@ -0,0 +1,4 @@
+import * as integrationsActions from "./actions";
+import { integrationsReducer } from "./reducer";
+
+export { integrationsActions, integrationsReducer };

package/src/containers/Integrations/interfaces.tsx

@@ -0,0 +1,24 @@
+import { IIntegration } from "@ax/types";
+import { SET_CURRENT_INTEGRATION, SET_INTEGRATIONS, SET_TOTAL_ITEMS, SET_COPY_INTEGRATION } from "./constants";
+
+export interface ISetIntegrations {
+  type: typeof SET_INTEGRATIONS;
+  payload: { integrations: IIntegration[] };
+}
+
+export interface ISetTotalItems {
+  type: typeof SET_TOTAL_ITEMS;
+  payload: { totalItems: number };
+}
+
+export interface ISetCurrentIntegration {
+  type: typeof SET_CURRENT_INTEGRATION;
+  payload: { currentIntegration: IIntegration | null };
+}
+
+export interface ISetCopyIntegration {
+  type: typeof SET_COPY_INTEGRATION;
+  payload: { integrationCopy: { date: Date; integration: Partial<IIntegration> } | null };
+}
+
+export type IntegrationsActionsCreators = ISetIntegrations;

package/src/containers/Integrations/reducer.tsx

@@ -0,0 +1,31 @@
+import { IIntegration } from "@ax/types";
+import { SET_CURRENT_INTEGRATION, SET_INTEGRATIONS, SET_TOTAL_ITEMS, SET_COPY_INTEGRATION } from "./constants";
+import { IntegrationsActionsCreators } from "./interfaces";
+
+export interface IIntegrationsState {
+  integrations: IIntegration[];
+  totalItems: number;
+  currentIntegration: IIntegration | null;
+  integrationCopy: { date: Date; integration: IIntegration } | null;
+}
+
+export const initialState = {
+  integrations: [],
+  totalItems: 0,
+  currentIntegration: null,
+  integrationCopy: null,
+};
+
+export function reducer(state = initialState, action: IntegrationsActionsCreators): IIntegrationsState {
+  switch (action.type) {
+    case SET_INTEGRATIONS:
+    case SET_TOTAL_ITEMS:
+    case SET_CURRENT_INTEGRATION:
+    case SET_COPY_INTEGRATION:
+      return { ...state, ...action.payload };
+    default:
+      return state;
+  }
+}
+
+export { initialState as integrationsInitialState, reducer as integrationsReducer };

package/src/containers/PageEditor/actions.tsx

@@ -36,7 +36,13 @@ import { navigationActions } from "@ax/containers/Navigation";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { setCurrentSiteErrorPages } from "@ax/containers/Sites/actions";
 import { pages, sites, structuredData } from "@ax/api";
-import { getDefaultPageNavigation, getPageData, getPageNavigation, getStateValues } from "./utils";
+import {
+  getDefaultPageNavigation,
+  getDefaultIntegrations,
+  getPageData,
+  getPageNavigation,
+  getStateValues,
+} from "./utils";
 import {
   SET_BREADCRUMB,
   SET_SCHEMA,
@@ -259,6 +265,8 @@ function generateNewPage(dispatch: Dispatch, getState: any, baseSchema: string)
     },
     pageEditor: { template },
     app: { lang },
+    dataPacks,
+    integrations: { integrations },
   } = getState();
 
   let page = getDefaultSchema(baseSchema);
@@ -269,6 +277,8 @@ function generateNewPage(dispatch: Dispatch, getState: any, baseSchema: string)
 
   page = { ...parsedPageData, template: currentTemplate, language: lang.id };
 
+  page.integrations = getDefaultIntegrations(dataPacks, integrations, template);
+
   if (structuredData) {
     page.structuredData = structuredData.id;
   }

package/src/containers/PageEditor/utils.tsx

@@ -1,4 +1,4 @@
-import { ISavePageParams } from "@ax/types";
+import { IIntegration, ISavePageParams } from "@ax/types";
 import { cleanContent } from "@ax/forms";
 
 const getPageParams = (getState: any): ISavePageParams => {
@@ -94,6 +94,27 @@ const getPageNavigation = (
   return { header, footer };
 };
 
+const getDefaultIntegrations = (dataPacks: any, integrations: IIntegration[], template: string): IIntegration[] => {
+  const templateIntegrations = dataPacks.activated.find((pack: any) =>
+    pack.templates.some((packTemplate: any) => packTemplate.id === template)
+  )?.config?.templates?.[template]?.integrations;
+
+  const availableIntegrations = integrations.filter(
+    (integration: IIntegration) =>
+      !templateIntegrations?.some((_integration: IIntegration) => Number(_integration.id) === Number(integration.id))
+  );
+
+  const allPagesIntegrations = availableIntegrations.filter(
+    (integration: IIntegration) => integration.contentPresence.presenceType === "all" && integration.active
+  );
+
+  const defaultIntegrations: IIntegration[] = [];
+  templateIntegrations && defaultIntegrations.push(...templateIntegrations);
+  allPagesIntegrations && defaultIntegrations.push(...allPagesIntegrations);
+
+  return defaultIntegrations;
+};
+
 const getDefaultPageNavigation = (defaultsContent: any, type: string) => {
   const navigations: any = defaultsContent.filter((content: any) => content.type === type);
 
@@ -102,4 +123,11 @@ const getDefaultPageNavigation = (defaultsContent: any, type: string) => {
   return navitagion;
 };
 
-export { getPageParams, getPageData, getStateValues, getPageNavigation, getDefaultPageNavigation };
+export {
+  getPageParams,
+  getPageData,
+  getStateValues,
+  getPageNavigation,
+  getDefaultIntegrations,
+  getDefaultPageNavigation,
+};

package/src/hooks/content.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useLayoutEffect, useState } from "react";
+import { useEffect, useState, useLayoutEffect } from "react";
+import { IEmptyStateProps } from "@ax/types";
 import { useWindowSize } from "./window";
 
 const useCategoryColors = (): any => {
@@ -39,6 +40,49 @@ const useCategoryColors = (): any => {
   };
 };
 
+const useEmptyState = (
+  elements: unknown[],
+  fetchState: { isLoading: boolean; isFiltered: boolean },
+  emptyStates: IEmptyStates
+): { isEmpty: boolean; emptyStateProps: IEmptyStateProps } => {
+  const { isLoading, isFiltered } = fetchState;
+  const [isEmpty, setIsEmpty] = useState(false);
+  const [emptyStateProps, setEmptyStateProps] = useState<IEmptyStateProps>({});
+  const [isLoaded, setIsLoaded] = useState<boolean>();
+
+  useEffect(() => {
+    if (isLoading || typeof isLoaded !== "undefined") {
+      setIsLoaded(!isLoading);
+    }
+  }, [isLoading, isLoaded]);
+
+  useEffect(() => {
+    if (isLoaded) {
+      setIsEmpty(!elements.length);
+      if (!isFiltered) {
+        emptyStates.noElementsProps && setEmptyStateProps(emptyStates.noElementsProps);
+      } else if (emptyStates.noSearchResultsProps) {
+        setEmptyStateProps(emptyStates.noSearchResultsProps);
+      } else {
+        const emptyProps = {
+          icon: "search",
+          title: "Oh! No Results Found",
+          message: "We couldn’t find what you are looking for. Please, try another search.",
+        };
+        setEmptyStateProps(emptyProps);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoaded]);
+
+  return { isEmpty, emptyStateProps };
+};
+
+interface IEmptyStates {
+  noElementsProps: IEmptyStateProps;
+  noSearchResultsProps?: IEmptyStateProps;
+}
+
 const useAdaptiveText = (
   containerRef: React.RefObject<HTMLDivElement>,
   fullText: string,
@@ -63,4 +107,4 @@ const useAdaptiveText = (
   return output;
 };
 
-export { useCategoryColors, useAdaptiveText };
+export { useCategoryColors, useEmptyState, useAdaptiveText };

package/src/hooks/index.tsx

@@ -2,7 +2,7 @@ import { useBulkSelection } from "./bulk";
 import { useDebounce, useEqualStructured, useIsDirty, usePrevious } from "./forms";
 import { useHandleClickOutside, useModal, useToast } from "./modals";
 import { useURLSearchParam } from "./location";
-import { useCategoryColors, useAdaptiveText } from "./content";
+import { useCategoryColors, useEmptyState, useAdaptiveText } from "./content";
 import { useWindowSize } from "./window";
 import { useOnMessageReceivedFromIframe, useOnMessageReceivedFromOutside } from "./iframe";
 
@@ -17,6 +17,7 @@ export {
   useBulkSelection,
   useURLSearchParam,
   useCategoryColors,
+  useEmptyState,
   useWindowSize,
   useAdaptiveText,
   useOnMessageReceivedFromIframe,

package/src/hooks/modals.tsx

@@ -34,18 +34,20 @@ const useHandleClickOutside = (isOpen: boolean, handleClickOutside: any) => {
 
 const useToast = () => {
   const [isVisible, setIsVisible] = useState(false);
+  const [state, setState] = useState<any>(null);
 
   let temp: any;
   const setTemp = () => (temp = setTimeout(() => setIsVisible(false), 6000));
   const stopTemp = () => clearTimeout(temp);
 
-  const toggleToast = () => {
+  const toggleToast = (state?: unknown) => {
     setIsVisible(true);
     setTemp();
     stopTemp();
+    state && setState(state);
   };
 
-  return { isVisible, setIsVisible, toggleToast };
+  return { isVisible, setIsVisible, toggleToast, state };
 };
 
 export { useModal, useHandleClickOutside, useToast };

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

@@ -6,17 +6,18 @@ export const Heading = styled.li`
 `;
 
 export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean; type: string }>`
-  background-color: ${(p) => (p.type === "multisite" ? p.theme.color.uiMainMenuBackgroundDark : p.theme.color.uiSiteMenuDark)};
+  background-color: ${(p) =>
+    p.type === "multisite" ? p.theme.color.uiMainMenuBackgroundDark : p.theme.color.uiSiteMenuDark};
   color: ${(p) => p.theme.color.textHighEmphasisInverse};
   cursor: default;
   padding-left: ${(p) => p.theme.spacing.s};
   padding-right: ${(p) => p.theme.spacing.s};
-  align-items: ${(p) => p.isSubmenu ? "flex-start" : "center"};
+  align-items: ${(p) => (p.isSubmenu ? "flex-start" : "center")};
   border-radius: ${(p) => ` 0 ${p.theme.radii.s} ${p.theme.radii.s} 0`};
-  flex-direction: ${(p) => p.isSubmenu ? "column" : "row"};
+  flex-direction: ${(p) => (p.isSubmenu ? "column" : "row")};
 
   ${Heading} {
-    margin-bottom: ${(p) => p.isSubmenu ? p.theme.spacing.xs : "0"};
+    margin-bottom: ${(p) => (p.isSubmenu ? p.theme.spacing.xs : "0")};
   }
 
   &.floating {
@@ -26,20 +27,20 @@ export const Dropdown = styled.ul<{ isSubmenu?: boolean; isSubmenuOpen: boolean;
     left: 100%;
     top: 0;
     z-index: 1000;
-    height: ${(p) => p.isSubmenu ? "auto" : "40px"};
-    width: calc(${(p) => p.theme.spacing.xl} * 3);
-    padding: ${(p) => p.isSubmenu ? p.theme.spacing.s : "0"};
+    height: ${(p) => (p.isSubmenu ? "auto" : "40px")};
+    min-width: calc(${(p) => p.theme.spacing.xl} * 3);
+    padding: ${(p) => (p.isSubmenu ? p.theme.spacing.s : "0")};
   }
 
   &.inline {
     position: relative;
-    display: ${(p) => p.isSubmenuOpen ? "flex" : "none"};
+    display: ${(p) => (p.isSubmenuOpen ? "flex" : "none")};
     overflow: hidden;
-    transition: all .5s ease-in-out;
-    opacity: ${(p) => p.isSubmenuOpen ? "1" : "0"};
+    transition: all 0.5s ease-in-out;
+    opacity: ${(p) => (p.isSubmenuOpen ? "1" : "0")};
     width: 100%;
-    padding-top: ${(p) => p.theme.spacing.xs };
-    padding-bottom: ${(p) => p.theme.spacing.xs };
+    padding-top: ${(p) => p.theme.spacing.xs};
+    padding-bottom: ${(p) => p.theme.spacing.xs};
     padding-left: ${(p) => `calc(${p.theme.spacing.m} * 2)`};
 
     ${Heading} {

package/src/modules/Content/index.tsx

@@ -34,6 +34,7 @@ import {
   ISetCurrentPageNameAction,
   pageStatus,
 } from "@ax/containers/PageEditor/interfaces";
+import { integrationsActions } from "@ax/containers/Integrations";
 
 import { getOptionValues, getOptionFilters, getCurrentFilter, filterByStatus, getSortedListStatus } from "./utils";
 import { useSortedListStatus, useFilterQuery } from "./hooks";
@@ -98,6 +99,7 @@ const Content = (props: IProps): JSX.Element => {
     sitesByLang,
     user,
     skipReviewOnPublish,
+    getIntegrations,
     setContentFilters,
     contentFilters,
     deleteAndRemoveFromSiteBulk,
@@ -277,6 +279,7 @@ const Content = (props: IProps): JSX.Element => {
     resetPageEditor();
     resetCurrentSiteErrorPages();
     fetchSitesByLang();
+    getIntegrations(currentSiteInfo.id);
     resetForm();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
@@ -866,6 +869,7 @@ interface IDispatchProps {
   restorePage(id: number | number[]): Promise<boolean>;
   getDataPack: (id: string) => Promise<void>;
   resetCurrentSiteErrorPages: () => Promise<void>;
+  getIntegrations(site: number): Promise<void>;
   getSitesByLang(params: IGetSitesParams): Promise<void>;
   setContentFilters(contentFilters: Record<string, string> | null): void;
   deleteAndRemoveFromSiteBulk(pageIds: number[], globalPageIds: number[]): Promise<boolean>;
@@ -902,6 +906,7 @@ const mapDispatchToProps = {
   getDataPack: dataPacksActions.getSiteDataPack,
   resetCurrentSiteErrorPages: sitesActions.resetCurrentSiteErrorPages,
   getSitesByLang: sitesActions.getSitesByLang,
+  getIntegrations: integrationsActions.getIntegrations,
   setContentFilters: sitesActions.setContentFilters,
   deleteAndRemoveFromSiteBulk: sitesActions.deleteAndRemoveFromSiteBulk,
   checkUserSession: appActions.checkUserSession,

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/IntegrationsField/index.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import { FieldsBehavior } from "@ax/components";
+import { IIntegration } from "@ax/types";
+
+import * as S from "./style";
+
+const pageEditorID = 0;
+
+const IntegrationsField = (props: IField): JSX.Element => {
+  const { template, templateConfig, updateDataPackFormValue, dataPackConfigFormData, updateEditorContent } = props;
+
+  const handleChange = (integrations: IIntegration[]) => {
+    const configFormData = {
+      ...dataPackConfigFormData,
+      templates: {
+        ...dataPackConfigFormData.templates,
+        [template]: {
+          ...(!!dataPackConfigFormData.templates && dataPackConfigFormData.templates[template]),
+          integrations,
+        },
+      },
+    };
+    updateDataPackFormValue(configFormData);
+    updateEditorContent(pageEditorID, "integrations", integrations);
+  };
+
+  return (
+    <S.Wrapper>
+      <FieldsBehavior
+        fieldType="IntegrationsField"
+        value={templateConfig.templates?.[template]?.integrations}
+        onChange={handleChange}
+      />
+    </S.Wrapper>
+  );
+};
+
+interface IField {
+  template: string;
+  templateConfig: any;
+  dataPackConfigFormData: any;
+  updateDataPackFormValue: (value: any) => void;
+  updateEditorContent: (selectedEditorID: number, key: string, value: any) => void;
+}
+
+export { IntegrationsField };

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/IntegrationsField/style.tsx

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.l};
+`;
+
+export { Wrapper };

package/src/modules/Settings/ContentTypes/DataPacks/Config/Form/TemplateConfig/TemplateEditor/Editor/ConfigPanel/{Field → NavigationField}/index.tsx

@@ -7,7 +7,7 @@ import * as S from "./style";
 
 const pageEditorID = 0;
 
-const Field = (props: IField): JSX.Element => {
+const NavigationField = (props: IField): JSX.Element => {
   const {
     type,
     template,
@@ -115,4 +115,4 @@ interface IField {
   updateDataPackFormValue: (value: any) => void;
 }
 
-export { Field };
+export { NavigationField };