@griddo/ax 10.1.69 → 10.1.71

package/src/containers/App/constants.tsx

@@ -12,6 +12,7 @@ const SET_GLOBAL_LANGUAGES = `${NAME}/SET_GLOBAL_LANGUAGES`;
 const SET_GLOBAL_SETTINGS = `${NAME}/SET_GLOBAL_SETTINGS`;
 const SET_USER = `${NAME}/SET_USER`;
 const SET_SESSION_STARTED_AT = `${NAME}/SET_SESSION_STARTED_AT`;
+const SET_HAS_ANIMATION = `${NAME}/SET_HAS_ANIMATION`;
 
 export {
   SET_ERROR,
@@ -26,4 +27,5 @@ export {
   SET_GLOBAL_SETTINGS,
   SET_USER,
   SET_SESSION_STARTED_AT,
+  SET_HAS_ANIMATION,
 };

package/src/containers/App/interfaces.tsx

@@ -10,6 +10,7 @@ import {
   SET_GLOBAL_SETTINGS,
   SET_USER,
   SET_SESSION_STARTED_AT,
+  SET_HAS_ANIMATION,
 } from "./constants";
 import { IUser } from "./reducer";
 
@@ -70,6 +71,11 @@ export interface ISetSessionStartedAtAction {
   payload: { sessionStartedAt: null | Date };
 }
 
+export interface ISetHasAnimation {
+  type: typeof SET_HAS_ANIMATION;
+  payload: { hasAnimation: boolean };
+}
+
 export type AppActionsCreators = ISetIsLoading & ISetIsSaving;
 
 export type AuthActionsCreators = ISetTokenAction &

package/src/containers/App/reducer.tsx

@@ -12,6 +12,7 @@ import {
   SET_GLOBAL_SETTINGS,
   SET_USER,
   SET_SESSION_STARTED_AT,
+  SET_HAS_ANIMATION,
 } from "./constants";
 
 export interface IAppState {
@@ -26,6 +27,7 @@ export interface IAppState {
   globalLangs: any;
   globalSettings: IGlobalSettings;
   sessionStartedAt: null | Date;
+  hasAnimation: boolean;
 }
 export interface IError {
   code?: any;
@@ -83,6 +85,7 @@ export const initialState = {
     autoTranslation: false,
   },
   sessionStartedAt: null,
+  hasAnimation: false,
 };
 
 export function reducer(state = initialState, action: any): IAppState {
@@ -99,6 +102,7 @@ export function reducer(state = initialState, action: any): IAppState {
     case SET_GLOBAL_SETTINGS:
     case SET_USER:
     case SET_SESSION_STARTED_AT:
+    case SET_HAS_ANIMATION:
       return { ...state, ...action.payload };
     case SET_ERROR:
     case RESET_ERROR:

package/src/containers/Integrations/actions.tsx

@@ -31,7 +31,7 @@ function setCopyIntegration(
   return { type: SET_COPY_INTEGRATION, payload: { integrationCopy } };
 }
 
-function getIntegrations(site: number, params?: any, isPage?: boolean): (dispatch: Dispatch) => Promise<void> {
+function getIntegrations(site: number, params?: any, skipLoading?: boolean): (dispatch: Dispatch) => Promise<void> {
   return async (dispatch) => {
     try {
       const callback = async () => integrations.getIntegrations(site, params);
@@ -43,7 +43,7 @@ function getIntegrations(site: number, params?: any, isPage?: boolean): (dispatc
         },
         handleError: (response: any) => appActions.handleError(response)(dispatch),
       };
-      await handleRequest(callback, responseActions, isPage ? [] : [appActions.setIsLoading])(dispatch);
+      await handleRequest(callback, responseActions, skipLoading ? [] : [appActions.setIsLoading])(dispatch);
     } catch (e) {
       console.log(e);
     }
@@ -177,6 +177,35 @@ function copyIntegration(integration: Partial<IIntegration>): (dispatch: Dispatc
   };
 }
 
+function orderIntegration(
+  id: number,
+  newOrder: number,
+  currentParams?: any
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        sites: { currentSiteInfo },
+      } = getState();
+
+      dispatch(appActions.setIsLoading(true));
+
+      const callback = async () => integrations.orderIntegration(id, newOrder);
+      const responseActions = {
+        handleSuccess: () => {
+          const params = { ...DEFAULT_PARAMS, ...currentParams };
+          getIntegrations(currentSiteInfo.id, params)(dispatch);
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+      return await handleRequest(callback, responseActions, [])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
 export {
   getIntegrations,
   resetIntegrations,
@@ -187,4 +216,5 @@ export {
   updateIntegration,
   setCurrentIntegration,
   copyIntegration,
+  orderIntegration,
 };

package/src/modules/Login/index.tsx

@@ -7,7 +7,7 @@ import { Login } from "@ax/components";
 import { IGlobalSettings } from "@ax/containers/App/reducer";
 
 const LoginModule = (props: IProps) => {
-  const { isLoggingIn, globalSettings, login, resetError, getGlobalSettings } = props;
+  const { isLoggingIn, globalSettings, login, resetError, getGlobalSettings, setHistoryPush } = props;
 
   const initState = {
     email: "",
@@ -16,6 +16,7 @@ const LoginModule = (props: IProps) => {
   };
 
   const [state, setState] = useState(initState);
+  const [isSuccess, setIsSuccess] = useState(false);
 
   useEffect(() => {
     const prefix = process.env.REACT_APP_SITE_TITLE ? process.env.REACT_APP_SITE_TITLE : "";
@@ -28,7 +29,10 @@ const LoginModule = (props: IProps) => {
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    await login(state.email, state.password, state.rememberMe);
+    const isLogged = await login(state.email, state.password, state.rememberMe);
+    if(isLogged){
+      setIsSuccess(true);
+    }
   };
 
   const _handleEmail = (email: string) => {
@@ -41,6 +45,11 @@ const LoginModule = (props: IProps) => {
     setState({ ...state, password });
   };
 
+  const handleLoginSuccess = () => {
+    const welcomePageURI = "/sites";
+    setHistoryPush(welcomePageURI);
+  }
+
   const _handleRememberMe = () => setState({ ...state, rememberMe: !state.rememberMe });
 
   return (
@@ -54,6 +63,8 @@ const LoginModule = (props: IProps) => {
       settings={globalSettings}
       rememberMe={state.rememberMe}
       handleRememberMe={_handleRememberMe}
+      isLoginSuccess={isSuccess}
+      handleLoginSuccess={handleLoginSuccess}
     />
   );
 };
@@ -63,15 +74,17 @@ interface IProps {
   isLoggingIn: boolean;
   children: any;
   globalSettings: IGlobalSettings;
-  login(email: string, password: string, rememberMe: boolean): Promise<void>;
+  login(email: string, password: string, rememberMe: boolean): Promise<boolean>;
   resetError(): void;
   getGlobalSettings(): void;
+  setHistoryPush(path: string): Promise<void>
 }
 
 const mapDispatchToProps = {
   login: appActions.login,
   resetError: appActions.resetError,
   getGlobalSettings: appActions.getGlobalSettings,
+  setHistoryPush: appActions.setHistoryPush,
 };
 
 const mapStateToProps = (state: IRootState) => ({

package/src/modules/Settings/Integrations/BulkHeader/TableHeader/index.tsx

@@ -45,7 +45,7 @@ const TableHeader = (props: IProps): JSX.Element => {
         />
       </S.CheckHeader>
       <S.NameHeader>
-        <NameFilter sortItems={sortByName} sortedState={sortedListStatus} />
+        Name
       </S.NameHeader>
       <S.DescriptionHeader></S.DescriptionHeader>
       <S.AppliedOnHeader>

package/src/modules/Settings/Integrations/BulkHeader/TableHeader/style.tsx

@@ -14,8 +14,8 @@ const CheckHeader = styled(Header)`
   width: 32px;
 `;
 
-const NameHeader = styled.div`
-  width: 200px;
+const NameHeader = styled(Header)`
+  width: 350px;
 `;
 
 const DescriptionHeader = styled(Header)`

package/src/modules/Settings/Integrations/IntegrationForm/index.tsx

@@ -30,6 +30,7 @@ const IntegrationForm = (props: IProps) => {
         contentPresence: { presenceType: "all", relatedPages: [] },
         active: true,
         variables: [],
+        scriptOrder: 0,
       };
 
   const [form, setForm] = useState<IIntegration>(initState);
@@ -222,7 +223,7 @@ const IntegrationForm = (props: IProps) => {
               value={form.contentBodyPosition}
               options={bodyOptions}
               onChange={handleContentBodyPositionChange}
-              disabled={!form.contentBody.trim().length}
+              disabled={!form.contentBody || !form.contentBody.trim().length}
             />
             <FieldsBehavior
               title="Add code to:"

package/src/modules/Settings/Integrations/IntegrationItem/index.tsx

@@ -1,8 +1,9 @@
 import React from "react";
 import { connect } from "react-redux";
+import { DraggableProvided } from "react-beautiful-dnd";
 
-import { ICheck, IIntegration, IRootState } from "@ax/types";
-import { CheckField, Modal, Toast, ToggleField } from "@ax/components";
+import { ICheck, IIntegration } from "@ax/types";
+import { CheckField, Icon, Modal, Toast, ToggleField } from "@ax/components";
 import { useModal, useToast } from "@ax/hooks";
 import { integrations } from "@ax/api";
 import { integrationsActions } from "@ax/containers/Integrations";
@@ -21,6 +22,9 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
     getParams,
     changeState,
     toggleToastChange,
+    innerRef,
+    provided,
+    listLength,
   } = props;
 
   const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
@@ -113,12 +117,24 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
 
   return (
     <>
-      <S.ItemRow role="rowgroup" selected={isSelected} data-testid="integration-item-row">
-        <S.CheckCell role="cell">
+      <S.ItemRow
+        role="rowgroup"
+        selected={isSelected}
+        ref={innerRef}
+        data-testid="integration-item-row"
+        {...provided?.draggableProps}
+      >
+        <S.HandleWrapper {...provided?.dragHandleProps} hidden={listLength < 2} data-testid="handle-wrapper">
+          <S.IconHandleWrapper>
+            <Icon name="drag" size="16" />
+          </S.IconHandleWrapper>
+        </S.HandleWrapper>
+        <S.CheckCell role="cell" hasHandle={listLength >= 2}>
           <CheckField name="check" value={integration.id ?? ""} checked={isSelected} onChange={handleOnChange} />
         </S.CheckCell>
         <S.NameCell role="cell" onClick={handleClick}>
-          {integration.name}
+          <S.Order>#{integration.correlativeScriptOrder}</S.Order>
+          <div>{integration.name}</div>
         </S.NameCell>
         <S.DescriptionCell role="cell" onClick={handleClick}>
           {integration.description}
@@ -156,8 +172,8 @@ const IntegrationItem = (props: IIntegrationItemProps): JSX.Element => {
       >
         <S.ModalContent>
           Are you sure you want to {integration.active ? "disable" : "enable"}{" "}
-          <strong>{integration.name} add-on</strong>? This add-on will {integration.active ? "stop" : "start"}{" "}
-          working in the pages previously added.
+          <strong>{integration.name} add-on</strong>? This add-on will {integration.active ? "stop" : "start"} working
+          in the pages previously added.
         </S.ModalContent>
       </Modal>
       <CopyModal isOpen={isOpenCopy} hide={toggleModalCopy} action={copyIntegration} />
@@ -175,13 +191,11 @@ interface IProps {
   getParams: () => any;
   changeState: (integrationId: number, active: boolean, params: any) => Promise<boolean>;
   toggleToastChange: (state: { total: number; active: boolean }) => void;
-  currentSiteID: number;
+  innerRef: any;
+  provided: DraggableProvided;
+  listLength: number;
 }
 
-const mapStateToProps = (state: IRootState) => ({
-  currentSiteID: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
-});
-
 const mapDispatchToProps = {
   setHistoryPush: appActions.setHistoryPush,
   setCurrentIntegration: integrationsActions.setCurrentIntegration,
@@ -194,4 +208,4 @@ interface IDispatchProps {
 
 export type IIntegrationItemProps = IProps & IDispatchProps;
 
-export default connect(mapStateToProps, mapDispatchToProps)(IntegrationItem);
+export default connect(null, mapDispatchToProps)(IntegrationItem);

package/src/modules/Settings/Integrations/IntegrationItem/style.tsx

@@ -3,18 +3,26 @@ import styled from "styled-components";
 import { Cell, Row } from "@ax/components/TableList/TableItem/style";
 import { ActionMenu } from "@ax/components";
 
-const CheckCell = styled(Cell)`
-  padding-left: ${(p) => p.theme.spacing.m};
-  width: 32px;
+const CheckCell = styled(Cell)<{ hasHandle: boolean }>`
+  width: 24px;
+  padding: ${(p) => p.hasHandle ? `${p.theme.spacing.s} ${p.theme.spacing.xs}`: `0 ${p.theme.spacing.s} 0 ${p.theme.spacing.m}`};
   label {
-    margin-bottom: ${(p) => p.theme.spacing.s};
+    margin-bottom: 18px;
   }
 `;
 
 const NameCell = styled(Cell)`
   ${(p) => p.theme.textStyle.uiM};
   color: ${(p) => p.theme.color.textHighEmphasis};
-  width: 200px;
+  width: 350px;
+  flex-flow: row wrap;
+  justify-content: flex-start;
+  align-items: center;
+`;
+
+const Order = styled.div`
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  margin-right: ${(p) => p.theme.spacing.xxs};
 `;
 
 const DescriptionCell = styled(Cell)`
@@ -67,6 +75,22 @@ const ItemRow = styled(Row)`
   }
 `;
 
+const HandleWrapper = styled.div<{ hidden?: boolean }>`
+  padding-left: ${(p) => p.theme.spacing.xs};
+  display: ${(p) => (p.hidden ? "none" : "flex")};
+  align-items: center;
+`;
+
+const IconHandleWrapper = styled.div`
+  width: ${(p) => p.theme.spacing.s};
+  height: ${(p) => p.theme.spacing.s};
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.textLowEmphasis};
+    }
+  }
+`;
+
 export {
   CheckCell,
   NameCell,
@@ -78,4 +102,7 @@ export {
   ContentPresence,
   ModalContent,
   StyledActionMenu,
+  HandleWrapper,
+  IconHandleWrapper,
+  Order,
 };

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

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
 import { connect } from "react-redux";
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
 
 import { IEmptyStateProps, IIntegration, IRootState } from "@ax/types";
 import { MainWrapper, ErrorToast, TableList, EmptyState, Toast } from "@ax/components";
@@ -12,10 +13,8 @@ import IntegrationItem from "./IntegrationItem";
 import { useFilterQuery, useSortedListStatus } from "./hooks";
 import { getSortedListStatus } from "./utils";
 import { DeactivateModal, DeleteModal } from "./atoms";
-import * as S from "./style";
 
-const itemsPerPage = 50;
-const firstPage = 1;
+import * as S from "./style";
 
 const Integrations = (props: IIntegrationsProps): JSX.Element => {
   const {
@@ -29,9 +28,13 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
     changeIntegrationState,
     setHistoryPush,
     setCurrentIntegration,
+    orderIntegration,
   } = props;
 
-  const [page, setPage] = useState(firstPage);
+  if (!currentSite) {
+    throw new Error(`ERROR: User reached Integrations with null site info`);
+  }
+
   const [isScrolling, setIsScrolling] = useState(false);
   const tableRef = useRef<HTMLDivElement>(null);
   const [currentFilterQuery, setCurrentFilterQuery] = useState("");
@@ -64,14 +67,12 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 
   const getParams = useCallback(() => {
     const params = {
-      page,
-      itemsPerPage,
-      pagination: true,
+      pagination: false,
       filter: currentFilterQuery,
     };
 
     return params;
-  }, [page, currentFilterQuery]);
+  }, [currentFilterQuery]);
 
   useEffect(() => {
     const params = getParams();
@@ -82,7 +83,7 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
       resetIntegrations();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [page, currentSite, currentFilterQuery]);
+  }, [currentSite, currentFilterQuery]);
 
   const {
     resetBulkSelection,
@@ -121,7 +122,6 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
   const handleSelectAll = () => selectAllItems();
 
   const sortItems = async (orderPointer: string, isAscending: boolean) => {
-    setPage(firstPage);
     const sortedState = getSortedListStatus(orderPointer, isAscending);
     setSortedListStatus(sortedState);
 
@@ -131,7 +131,6 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
   };
 
   const filterItems = async (filterPointer: string, filtersSelected: string) => {
-    setPage(firstPage);
     const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
     const filterQuery = setFilterQuery(filtersSelection);
     setCurrentFilterQuery(filterQuery);
@@ -156,11 +155,22 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
 
   const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
 
-  const pagination = {
-    setPage,
-    itemsPerPage,
-    totalItems,
-    currPage: page,
+  const onDragEnd = (result: DropResult) => {
+    if (!result.destination) {
+      return;
+    }
+
+    if (result.destination.index === result.source.index) {
+      return;
+    }
+
+    const newScriptOrder = result.destination.index
+      ? integrations[result.destination.index - (result.destination.index > result.source.index ? 0 : 1)].scriptOrder +
+        1
+      : 1;
+
+    const params = getParams();
+    orderIntegration(parseInt(result.draggableId), newScriptOrder, params);
   };
 
   const mainDeleteModalAction = {
@@ -192,70 +202,91 @@ const Integrations = (props: IIntegrationsProps): JSX.Element => {
     action: () => setHistoryPush(`/sites/settings/addons/new`),
   };
 
+  const ComponentList = React.memo(function ComponentList({ components }: any) {
+    return components.map((integration: IIntegration, index: number) => {
+      const isItemSelected = isSelected(integration.id);
+      return (
+        <Draggable draggableId={`${integration.id}`} index={index} key={integration.id}>
+          {(provided) => (
+            <IntegrationItem
+              key={`${integration.name}${integration.id}`}
+              integration={integration}
+              isSelected={isItemSelected}
+              onChange={addToBulkSelection}
+              toggleToastDelete={toggleToastDelete}
+              getParams={getParams}
+              deleteIntegration={deleteIntegration}
+              changeState={changeIntegrationState}
+              toggleToastChange={toggleToastChange}
+              innerRef={provided.innerRef}
+              provided={provided}
+              listLength={integrations.length}
+            />
+          )}
+        </Draggable>
+      );
+    });
+  });
+
   return (
-    <>
-      <MainWrapper backLink={false} title="Add-ons" rightButton={rightButtonProps}>
-        <S.Wrapper data-testid="integrations-main-wrapper">
-          <S.ContentWrapper>
-            <ErrorToast />
-            <S.TitleWrapper>
-              <S.Title>Custom Code</S.Title>
-              <S.Description>Add custom code to the head or body of your site&apos;s pages.</S.Description>
-            </S.TitleWrapper>
-            <S.TableWrapper>
-              <TableList
-                tableHeader={TableHeader}
-                pagination={pagination}
-                onScroll={onScroll}
-                hasFixedHeader={true}
-                tableRef={tableRef}
-              >
-                {isEmpty ? (
-                  <S.EmptyWrapper>
-                    <EmptyState {...emptyStateProps} />
-                  </S.EmptyWrapper>
-                ) : (
-                  integrations.map((integration: IIntegration) => {
-                    const isItemSelected = isSelected(integration.id);
-                    return (
-                      <IntegrationItem
-                        key={`${integration.name}${integration.id}`}
-                        integration={integration}
-                        isSelected={isItemSelected}
-                        onChange={addToBulkSelection}
-                        toggleToastDelete={toggleToastDelete}
-                        getParams={getParams}
-                        deleteIntegration={deleteIntegration}
-                        changeState={changeIntegrationState}
-                        toggleToastChange={toggleToastChange}
-                      />
-                    );
-                  })
-                )}
-              </TableList>
-            </S.TableWrapper>
-            {isVisibleDelete && <Toast {...deletedToastProps} />}
-            {isVisibleChange && <Toast {...changedToastProps} />}
-          </S.ContentWrapper>
-        </S.Wrapper>
-        <DeleteModal
-          isOpen={isOpenDelete}
-          toggleModal={toggleModalDelete}
-          secondaryModalAction={secondaryDeleteModalAction}
-          mainModalAction={mainDeleteModalAction}
-          integrations={integrations}
-          selectedIds={selectedItems.all}
-        />
-        <DeactivateModal
-          isOpen={isOpenDeactivate}
-          toggleModal={toggleModalDeactivate}
-          secondaryModalAction={secondaryDeactivateModalAction}
-          mainModalAction={mainDeactivateModalAction}
-          integrations={integrations}
-          selectedIds={selectedItems.all}
-        />
-      </MainWrapper>
-    </>
+    <MainWrapper backLink={false} title="Add-ons" rightButton={rightButtonProps}>
+      <S.Wrapper data-testid="integrations-main-wrapper">
+        <S.ContentWrapper>
+          <ErrorToast />
+          <S.TitleWrapper>
+            <S.Title>Custom Code</S.Title>
+            <S.Description>Add custom code to the head or body of your site&apos;s pages.</S.Description>
+          </S.TitleWrapper>
+          <S.TableWrapper>
+            <TableList tableHeader={TableHeader} onScroll={onScroll} hasFixedHeader={true} tableRef={tableRef}>
+              {isEmpty ? (
+                <S.EmptyWrapper>
+                  <EmptyState {...emptyStateProps} />
+                </S.EmptyWrapper>
+              ) : (
+                <>
+                  {integrations.length >= 2 && (
+                    <S.OrderNote>
+                      You can easily <strong>reorder</strong> the list using <strong>drag and drop</strong>. The order{" "}
+                      <strong>determines the priority of the add-on</strong>, and the code appears on the page
+                      accordingly.
+                    </S.OrderNote>
+                  )}
+                  <DragDropContext onDragEnd={onDragEnd}>
+                    <Droppable droppableId="integrationsList">
+                      {(provided) => (
+                        <div ref={provided.innerRef} {...provided.droppableProps} data-testid="droppable">
+                          <ComponentList components={integrations} />
+                          {provided.placeholder}
+                        </div>
+                      )}
+                    </Droppable>
+                  </DragDropContext>
+                </>
+              )}
+            </TableList>
+          </S.TableWrapper>
+          {isVisibleDelete && <Toast {...deletedToastProps} />}
+          {isVisibleChange && <Toast {...changedToastProps} />}
+        </S.ContentWrapper>
+      </S.Wrapper>
+      <DeleteModal
+        isOpen={isOpenDelete}
+        toggleModal={toggleModalDelete}
+        secondaryModalAction={secondaryDeleteModalAction}
+        mainModalAction={mainDeleteModalAction}
+        integrations={integrations}
+        selectedIds={selectedItems.all}
+      />
+      <DeactivateModal
+        isOpen={isOpenDeactivate}
+        toggleModal={toggleModalDeactivate}
+        secondaryModalAction={secondaryDeactivateModalAction}
+        mainModalAction={mainDeactivateModalAction}
+        integrations={integrations}
+        selectedIds={selectedItems.all}
+      />
+    </MainWrapper>
   );
 };
 
@@ -273,13 +304,14 @@ const mapDispatchToProps = {
   changeIntegrationState: integrationsActions.changeIntegrationState,
   setHistoryPush: appActions.setHistoryPush,
   setCurrentIntegration: integrationsActions.setCurrentIntegration,
+  orderIntegration: integrationsActions.orderIntegration,
 };
 
 interface IStateProps {
   isLoading: boolean;
   integrations: IIntegration[];
   totalItems: number;
-  currentSite: number;
+  currentSite: number | null;
 }
 
 interface IDispatchProps {
@@ -287,11 +319,12 @@ interface IDispatchProps {
   resetIntegrations: () => void;
   deleteIntegration: (
     integrationId: number | number[],
-    currentParams: { page: number; itemsPerPage: number; pagination: boolean; filter: any }
+    currentParams: { pagination: boolean; filter: any }
   ) => Promise<boolean>;
   changeIntegrationState: (integrationId: number | number[], active: boolean, currentParams?: any) => Promise<boolean>;
   setHistoryPush: (path: string) => void;
   setCurrentIntegration: (integration: IIntegration | null) => void;
+  orderIntegration(id: number, newOrder: number, currentParams?: any): Promise<boolean>;
 }
 
 export type IIntegrationsProps = IStateProps & IDispatchProps;