@griddo/ax 1.75.258 → 10.1.0

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

@@ -0,0 +1,81 @@
+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;
+  label {
+    margin-bottom: ${(p) => p.theme.spacing.s};
+  }
+`;
+
+const NameCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  width: 200px;
+`;
+
+const DescriptionCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  flex: 1;
+`;
+
+const AppliedOnCell = styled(Cell)`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textMediumEmphasis};
+  flex: 1;
+  display: inline;
+  align-self: center;
+`;
+
+const ContentPresence = styled.span`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+`;
+
+const StateCell = styled(Cell)`
+  width: 170px;
+`;
+
+const ActionsCell = styled(Cell)`
+  width: 125px;
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+const StyledActionMenu = styled(ActionMenu)`
+  opacity: 0;
+  width: 32px;
+  display: flex;
+  margin-left: auto;
+`;
+
+const ItemRow = styled(Row)`
+  &:hover {
+    ${StyledActionMenu} {
+      opacity: 1;
+    }
+  }
+`;
+
+export {
+  CheckCell,
+  NameCell,
+  DescriptionCell,
+  AppliedOnCell,
+  StateCell,
+  ActionsCell,
+  ItemRow,
+  ContentPresence,
+  ModalContent,
+  StyledActionMenu,
+};

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

@@ -0,0 +1,49 @@
+import React from "react";
+
+import { IIntegration, IModal } from "@ax/types";
+import { Modal } from "@ax/components";
+
+import { getIntegrationsNames } from "./utils";
+import * as S from "./style";
+
+const DeleteModal = (props: IModal & { integrations: IIntegration[]; selectedIds: number[] }): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, integrations, selectedIds } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Delete Integrations"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+    >
+      <S.ModalContent>
+        Are you sure you want to delete {getIntegrationsNames(integrations, selectedIds)}? This action{" "}
+        <strong>cannot be undone</strong>.
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+const DeactivateModal = (props: IModal & { integrations: IIntegration[]; selectedIds: number[] }): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, integrations, selectedIds } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Deactivate Integrations"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+    >
+      <S.ModalContent>
+        Are you sure you want to disable {getIntegrationsNames(integrations, selectedIds)}? These integrations will stop
+        working in the pages previously added.
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+export { DeleteModal, DeactivateModal };

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

@@ -0,0 +1,72 @@
+import { useState } from "react";
+
+const useSortedListStatus = () => {
+  const sortedInitialState: { isAscending: boolean; sortedByTitle: boolean } = {
+    isAscending: false,
+    sortedByTitle: false,
+  };
+
+  const [sortedListStatus, setSortedListStatus] = useState(sortedInitialState);
+
+  return {
+    sortedListStatus,
+    setSortedListStatus,
+  };
+};
+
+const useFilterQuery = () => {
+  const initialQueryValues = {
+    order: "",
+    filterApplication: "all",
+    filterState: "all",
+  };
+
+  const [query, setQuery] = useState(initialQueryValues);
+
+  const setFilterQuery = (filterValues: any) => {
+    const { order, filterApplication, filterState } = filterValues;
+    let filterQuery = "";
+
+    const currentQuery = (pointer: string, values: string) => {
+      return filterQuery.concat(`&${pointer}=${values}`);
+    };
+
+    const isNotInitialValue = (pointer: "order" | "filterApplication" | "filterState") => {
+      return filterValues[pointer] && initialQueryValues[pointer] !== filterValues[pointer];
+    };
+
+    if (isNotInitialValue("order")) filterQuery = currentQuery("order", order);
+    if (isNotInitialValue("filterApplication")) filterQuery = currentQuery("filterApplication", filterApplication);
+    if (isNotInitialValue("filterState")) filterQuery = currentQuery("filterState", filterState);
+
+    return filterQuery;
+  };
+
+  const setFiltersSelection = (pointer: string, filter: string, isAscendent?: boolean) => {
+    const { order, filterApplication, filterState } = query;
+    const orderMethod = isAscendent ? "asc" : "desc";
+    const filterValues = {
+      order: pointer === "order" ? `${filter}-${orderMethod}` : order,
+      filterApplication: pointer === "filterApplication" ? filter : filterApplication,
+      filterState: pointer === "filterState" ? filter : filterState,
+    };
+
+    setQuery(filterValues);
+
+    return filterValues;
+  };
+
+  const resetFilterQuery = () => setQuery(initialQueryValues);
+
+  const isFiltered = Object.keys(query).some((key: any) => query[key as never] !== initialQueryValues[key as never]);
+
+  return {
+    setFiltersSelection,
+    setFilterQuery,
+    resetFilterQuery,
+    filterValues: query,
+    isFiltered,
+  };
+};
+
+export { useSortedListStatus, useFilterQuery };

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

@@ -0,0 +1,299 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { connect } from "react-redux";
+
+import { IEmptyStateProps, IIntegration, IRootState } from "@ax/types";
+import { MainWrapper, ErrorToast, TableList, EmptyState, Toast } from "@ax/components";
+import { integrationsActions } from "@ax/containers/Integrations";
+import { appActions } from "@ax/containers/App";
+import { useBulkSelection, useEmptyState, useModal, useToast } from "@ax/hooks";
+
+import BulkHeader from "./BulkHeader";
+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;
+
+const Integrations = (props: IIntegrationsProps): JSX.Element => {
+  const {
+    isLoading,
+    getIntegrations,
+    integrations,
+    totalItems,
+    currentSite,
+    resetIntegrations,
+    deleteIntegration,
+    changeIntegrationState,
+    setHistoryPush,
+    setCurrentIntegration,
+  } = props;
+
+  const [page, setPage] = useState(firstPage);
+  const [isScrolling, setIsScrolling] = useState(false);
+  const tableRef = useRef<HTMLDivElement>(null);
+  const [currentFilterQuery, setCurrentFilterQuery] = useState("");
+  const { setFiltersSelection, setFilterQuery, filterValues, isFiltered } = useFilterQuery();
+  const { sortedListStatus, setSortedListStatus } = useSortedListStatus();
+  const { isOpen: isOpenDelete, toggleModal: toggleModalDelete } = useModal();
+  const { isOpen: isOpenDeactivate, toggleModal: toggleModalDeactivate } = useModal();
+  const {
+    isVisible: isVisibleDelete,
+    toggleToast: toggleToastDelete,
+    setIsVisible: setIsVisibleDelete,
+    state: stateToastDelete,
+  } = useToast();
+  const {
+    isVisible: isVisibleChange,
+    toggleToast: toggleToastChange,
+    setIsVisible: setIsVisibleChange,
+    state: stateToastChange,
+  } = useToast();
+
+  const noElementsProps: IEmptyStateProps = {
+    message: "To start using third-party integrations in your site, create as many Custom Code as you need.",
+    button: "Create custom code",
+    action: () => setHistoryPush(`/sites/settings/integrations/new`),
+  };
+  const fetchState = { isLoading, isFiltered };
+  const { isEmpty, emptyStateProps } = useEmptyState(integrations, fetchState, { noElementsProps });
+
+  const integrationsIds = integrations && integrations.map((integration: IIntegration) => integration.id);
+
+  const getParams = useCallback(() => {
+    const params = {
+      page,
+      itemsPerPage,
+      pagination: true,
+      filter: currentFilterQuery,
+    };
+
+    return params;
+  }, [page, currentFilterQuery]);
+
+  useEffect(() => {
+    const params = getParams();
+    getIntegrations(currentSite, params);
+    setCurrentIntegration(null);
+
+    return () => {
+      resetIntegrations();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, currentSite, currentFilterQuery]);
+
+  const {
+    resetBulkSelection,
+    selectedItems,
+    isSelected,
+    areItemsSelected,
+    checkState,
+    addToBulkSelection,
+    selectAllItems,
+  } = useBulkSelection(integrationsIds);
+
+  const bulkDelete = async () => {
+    const params = getParams();
+    const deleted = await deleteIntegration(selectedItems.all, params);
+    if (deleted) {
+      toggleToastDelete({ total: selectedItems.all.length });
+    }
+    toggleModalDelete();
+    resetBulkSelection();
+  };
+
+  const bulkDeactivate = async () => {
+    const params = getParams();
+    const changed = await changeIntegrationState(selectedItems.all, false, params);
+    if (changed) {
+      toggleToastChange({ total: selectedItems.all.length, active: false });
+    }
+    toggleModalDeactivate();
+    resetBulkSelection();
+  };
+
+  const unselectAllItems = () => resetBulkSelection();
+
+  const selectItems = () => (checkState.isAllSelected ? unselectAllItems() : handleSelectAll());
+
+  const handleSelectAll = () => selectAllItems();
+
+  const sortItems = async (orderPointer: string, isAscending: boolean) => {
+    setPage(firstPage);
+    const sortedState = getSortedListStatus(orderPointer, isAscending);
+    setSortedListStatus(sortedState);
+
+    const filtersSelection = setFiltersSelection("order", orderPointer, isAscending);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const filterItems = async (filterPointer: string, filtersSelected: string) => {
+    setPage(firstPage);
+    const filtersSelection = setFiltersSelection(filterPointer, filtersSelected);
+    const filterQuery = setFilterQuery(filtersSelection);
+    setCurrentFilterQuery(filterQuery);
+  };
+
+  const TableHeader = (
+    <BulkHeader
+      showBulk={areItemsSelected(integrationsIds)}
+      bulkDelete={toggleModalDelete}
+      bulkDeactivate={toggleModalDeactivate}
+      selectAllItems={handleSelectAll}
+      totalItems={totalItems}
+      selectItems={selectItems}
+      checkState={checkState}
+      isScrolling={isScrolling}
+      filterItems={filterItems}
+      filterValues={filterValues}
+      sortItems={sortItems}
+      sortedListStatus={sortedListStatus}
+    />
+  );
+
+  const onScroll = (e: any) => setIsScrolling(e.target.scrollTop > 0);
+
+  const pagination = {
+    setPage,
+    itemsPerPage,
+    totalItems,
+    currPage: page,
+  };
+
+  const mainDeleteModalAction = {
+    title: "Delete integrations",
+    onClick: bulkDelete,
+  };
+  const secondaryDeleteModalAction = { title: "Cancel", onClick: toggleModalDelete };
+
+  const mainDeactivateModalAction = {
+    title: "Deactivate integrations",
+    onClick: bulkDeactivate,
+  };
+  const secondaryDeactivateModalAction = { title: "Cancel", onClick: toggleModalDeactivate };
+
+  const deletedToastProps = {
+    setIsVisible: setIsVisibleDelete,
+    message: stateToastDelete?.total > 1 ? `${stateToastDelete?.total} integrations deleted` : "Integration deleted",
+  };
+
+  const changedToastProps = {
+    setIsVisible: setIsVisibleChange,
+    message: `${stateToastChange?.total} integration${stateToastChange?.total > 1 ? "s" : ""} ${
+      stateToastChange?.active ? "enabled" : "disabled"
+    }`,
+  };
+
+  const rightButtonProps = {
+    label: "New Custom Code",
+    action: () => setHistoryPush(`/sites/settings/integrations/new`),
+  };
+
+  return (
+    <>
+      <MainWrapper backLink={false} title="Third-Party Integration" 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>
+    </>
+  );
+};
+
+const mapStateToProps = (state: IRootState) => ({
+  isLoading: state.app.isLoading,
+  integrations: state.integrations.integrations,
+  totalItems: state.integrations.totalItems,
+  currentSite: state.sites.currentSiteInfo && state.sites.currentSiteInfo.id,
+});
+
+const mapDispatchToProps = {
+  getIntegrations: integrationsActions.getIntegrations,
+  resetIntegrations: integrationsActions.resetIntegrations,
+  deleteIntegration: integrationsActions.deleteIntegration,
+  changeIntegrationState: integrationsActions.changeIntegrationState,
+  setHistoryPush: appActions.setHistoryPush,
+  setCurrentIntegration: integrationsActions.setCurrentIntegration,
+};
+
+interface IStateProps {
+  isLoading: boolean;
+  integrations: IIntegration[];
+  totalItems: number;
+  currentSite: number;
+}
+
+interface IDispatchProps {
+  getIntegrations: (site: number, params: any) => Promise<void>;
+  resetIntegrations: () => void;
+  deleteIntegration: (
+    integrationId: number | number[],
+    currentParams: { page: number; itemsPerPage: number; 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;
+}
+
+export type IIntegrationsProps = IStateProps & IDispatchProps;
+
+export default connect(mapStateToProps, mapDispatchToProps)(Integrations);

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

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  display: flex;
+  height: 100%;
+`;
+
+const ContentWrapper = styled.div`
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  width: 100%;
+`;
+
+const TitleWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.headingXS};
+  margin-bottom: ${(p) => p.theme.spacing.xs};
+`;
+
+const Description = styled.div`
+  ${(p) => p.theme.textStyle.uiM};
+`;
+
+const TableWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  position: relative;
+  height: calc(100vh - ${(p) => p.theme.spacing.xl});
+  overflow: auto;
+`;
+
+const EmptyWrapper = styled.div`
+  height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 5))`};
+  display: flex;
+  align-items: center;
+`;
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+`;
+
+export { Wrapper, ContentWrapper, TitleWrapper, Title, Description, TableWrapper, EmptyWrapper, ModalContent };

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

@@ -0,0 +1,39 @@
+import React from "react";
+import { IIntegration } from "@ax/types";
+
+const getSortedListStatus = (
+  orderPointer: string,
+  isAscending: boolean
+): { isAscending: boolean; sortedByTitle: boolean } => {
+  const sortedListStatus = {
+    isAscending,
+    sortedByTitle: orderPointer === "name",
+  };
+
+  return sortedListStatus;
+};
+
+const getIntegrationsNames = (integrations: IIntegration[], ids: number[]) => {
+  const names = integrations.reduce(
+    (prev: string[], curr) => (curr.id && ids.includes(curr.id) ? [...prev, curr.name] : prev),
+    []
+  );
+  const namesString = names.join(", ");
+  const lastCommaIndex = namesString.lastIndexOf(", ");
+  if (lastCommaIndex > -1) {
+    return (
+      <>
+        <strong>{namesString.substring(0, lastCommaIndex - 1)}</strong> and
+        <strong>{namesString.substring(lastCommaIndex + 1)}</strong> integrations
+      </>
+    );
+  } else {
+    return (
+      <>
+        <strong>{namesString}</strong> integration
+      </>
+    );
+  }
+};
+
+export { getSortedListStatus, getIntegrationsNames };

package/src/routes/site.tsx

@@ -13,6 +13,8 @@ import Users from "./../modules/Users";
 import UserCreate from "./../modules/Users/UserCreate";
 import UserEdit from "./../modules/Users/UserEdit";
 import Profile from "./../modules/Users/Profile";
+import Integrations from "./../modules/Settings/Integrations";
+import IntegrationForm from "./../modules/Settings/Integrations/IntegrationForm";
 
 const BASE_PATH = "/sites";
 
@@ -101,10 +103,27 @@ export default [
             component: SeoAnalyticsSettings,
             name: "SEO & Analytics",
           },
+          {
+            path: `${BASE_PATH}/settings/integrations`,
+            component: Integrations,
+            name: "Third-Party Integration",
+          },
         ],
       },
     ],
   },
+  {
+    path: `${BASE_PATH}/settings/integrations/new`,
+    component: IntegrationForm,
+    name: "New Integration",
+    showInNav: false,
+  },
+  {
+    path: `${BASE_PATH}/settings/integrations/edit`,
+    component: IntegrationForm,
+    name: "Edit Integration",
+    showInNav: false,
+  },
   { path: `${BASE_PATH}/settings/languages`, component: Settings, name: "Languages", showInNav: false },
   { path: `${BASE_PATH}/settings/social`, component: Settings, name: "Social", showInNav: false },
   { path: `${BASE_PATH}/settings/analytics`, component: SeoAnalyticsSettings, name: "Analytics", showInNav: false },

package/src/schemas/pages/Page.tsx

@@ -105,6 +105,10 @@ export default {
             },
           ],
         },
+        {
+          type: "IntegrationsField",
+          key: "integrations",
+        },
       ],
     },
     {
@@ -267,6 +271,7 @@ export default {
     socialDescription: "",
     socialImage: {},
     dimensions: {},
+    integrations: null,
     theme: null,
     customizeThemes: false,
     headerTheme: null,