@griddo/ax 1.75.258 → 10.1.0

package/src/components/Fields/index.tsx

@@ -38,6 +38,7 @@ import UrlField from "./UrlField";
 import VisualOption from "./VisualOption";
 import VisualUniqueSelection from "./VisualUniqueSelection";
 import Wysiwyg from "./Wysiwyg";
+import IntegrationsField from "./IntegrationsField";
 
 export {
   AnalyticsField,
@@ -80,4 +81,5 @@ export {
   VisualOption,
   VisualUniqueSelection,
   Wysiwyg,
+  IntegrationsField,
 };

package/src/components/Icon/components/Deactivate.js

@@ -0,0 +1,14 @@
+import React from "react";
+
+const SvgDeactivate = (props) => (
+  <svg width={24} height={24} fill="none" {...props}>
+    <g>
+      <path
+        d="M19,6.3H4.9C2.2,6.3,0,8.8,0,12s2.2,5.7,4.9,5.7H19c2.8,0,4.9-2.5,4.9-5.7S21.7,6.3,19,6.3z M5.8,16.4 c-2.3,0-4.2-1.9-4.2-4.4s1.9-4.4,4.2-4.4C8.2,7.6,10,9.5,10,12S8.1,16.4,5.8,16.4z"
+        fill="#C7C8D0"
+      />
+    </g>
+  </svg>
+);
+
+export default SvgDeactivate;

package/src/components/Icon/components/Lock.js

@@ -0,0 +1,15 @@
+import React from "react";
+
+const SvgLock = (props) => (
+  <svg width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#20224C"
+      fillOpacity="0.2"
+      d="M18.9,8h-1.1V5.7C17.7,2.6,15.2,0,12,0S6.3,2.6,6.3,5.7V8H5.1c-1.3,0-2.3,1-2.3,2.3v11.4c0,1.3,1,2.3,2.3,2.3
+ h13.7c1.3,0,2.3-1,2.3-2.3V10.3C21.1,9,20.1,8,18.9,8z M8.6,5.7c0-1.9,1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4V8H8.6V5.7z M18.9,21.7H5.1
+ V10.3h13.7V21.7z M12,18.3c1.3,0,2.3-1,2.3-2.3c0-1.3-1-2.3-2.3-2.3s-2.3,1-2.3,2.3C9.7,17.3,10.7,18.3,12,18.3z"
+    />
+  </svg>
+);
+
+export default SvgLock;

package/src/components/Icon/svgs/Deactivate.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+	<g>
+		<path
+			d="M19,6.3H4.9C2.2,6.3,0,8.8,0,12s2.2,5.7,4.9,5.7H19c2.8,0,4.9-2.5,4.9-5.7S21.7,6.3,19,6.3z M5.8,16.4 c-2.3,0-4.2-1.9-4.2-4.4s1.9-4.4,4.2-4.4C8.2,7.6,10,9.5,10,12S8.1,16.4,5.8,16.4z"
+			fill="#C7C8D0"
+		/>
+	</g>
+</svg>

package/src/components/Icon/svgs/Lock.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24">
+<path fill="#20224C" fill-opacity="0.2" d="M18.9,8h-1.1V5.7C17.7,2.6,15.2,0,12,0S6.3,2.6,6.3,5.7V8H5.1c-1.3,0-2.3,1-2.3,2.3v11.4c0,1.3,1,2.3,2.3,2.3
+	h13.7c1.3,0,2.3-1,2.3-2.3V10.3C21.1,9,20.1,8,18.9,8z M8.6,5.7c0-1.9,1.5-3.4,3.4-3.4s3.4,1.5,3.4,3.4V8H8.6V5.7z M18.9,21.7H5.1
+	V10.3h13.7V21.7z M12,18.3c1.3,0,2.3-1,2.3-2.3c0-1.3-1-2.3-2.3-2.3s-2.3,1-2.3,2.3C9.7,17.3,10.7,18.3,12,18.3z"/>
+</svg>

package/src/components/PageFinder/SelectionListItem/index.tsx

@@ -0,0 +1,46 @@
+import React from "react";
+import { getFormattedDateWithTimezone } from "@ax/helpers";
+import { CheckField } from "@ax/components";
+import { ICheck, IPage } from "@ax/types";
+
+import * as S from "./style";
+
+const SelectionListItem = (props: ISelectionListItemProps): JSX.Element => {
+  const { option, title, type, date, onClick, pageID, isSelected, onChange, multiple } = props;
+
+  const handleClick = () => (multiple ? onChange({ value: option, isChecked: !isSelected }) : onClick(option));
+  const handleChange = (value: ICheck) => onChange({ value: option, isChecked: value.isChecked });
+
+  const pageType = type || "Page";
+
+  return (
+    <S.ListItem>
+      {multiple && (
+        <S.CheckWrapper>
+          <CheckField name="check" value={pageID} checked={isSelected} onChange={handleChange} />
+        </S.CheckWrapper>
+      )}
+      <S.Content onClick={handleClick} data-testid="selection-list-item">
+        <S.Header>
+          <S.Type>{pageType}</S.Type>
+          <S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>
+        </S.Header>
+        <S.Title>{title}</S.Title>
+      </S.Content>
+    </S.ListItem>
+  );
+};
+
+interface ISelectionListItemProps {
+  option: any;
+  title: string;
+  type: string;
+  date: Date;
+  onClick: (value: any) => void;
+  pageID: number;
+  isSelected: boolean;
+  onChange: (item: { value: IPage; isChecked: boolean }) => void;
+  multiple?: boolean;
+}
+
+export default SelectionListItem;

package/src/components/PageFinder/SelectionListItem/style.tsx

@@ -0,0 +1,46 @@
+import styled from "styled-components";
+
+const ListItem = styled.li`
+  display: flex;
+  width: 100%;
+  padding: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color.uiBarBackground};
+  border: 1px solid ${(p) => p.theme.color.uiLine};
+  border-radius: ${(p) => p.theme.radii.s};
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+  :hover {
+    background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    cursor: pointer;
+  }
+`;
+
+const Title = styled.div`
+  ${(p) => p.theme.textStyle.fieldContent}
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+`;
+
+const Header = styled.div`
+  display: flex;
+  margin-bottom: ${(p) => p.theme.spacing.xxs};
+`;
+
+const Type = styled.div`
+  ${(p) => p.theme.textStyle.headingXXS};
+  color: ${(p) => p.theme.colors.textLowEmphasis};
+`;
+
+const Date = styled.div`
+  ${(p) => p.theme.textStyle.uiXS};
+  color: ${(p) => p.theme.colors.textLowEmphasis};
+  margin-left: auto;
+`;
+
+const CheckWrapper = styled.div`
+  display: flex;
+`;
+
+const Content = styled.div`
+  width: 100%;
+`;
+
+export { ListItem, Title, Header, Type, Date, CheckWrapper, Content };

package/src/components/{Fields/UrlField/PageFinder → PageFinder}/index.tsx

@@ -5,13 +5,13 @@ import { IContentType, IGlobalLanguage, IPage, IRootState, ISite } from "@ax/typ
 import { useDebounce } from "@ax/hooks";
 import { getStructuredDataTitle, isReqOk } from "@ax/helpers";
 import { sites, structuredData } from "@ax/api";
-import { Loader, Pagination, TextField, Select } from "@ax/components";
+import { Loader, Pagination, TextField, Select, Button } from "@ax/components";
 import SelectionListItem from "./SelectionListItem";
 
 import * as S from "./style";
 
 const PageFinder = (props: IPageFinderProps): JSX.Element => {
-  const { onClick, currentSiteID, isOpen, allSites, lang, globalLangs } = props;
+  const { onClick, currentSiteID, isOpen, allSites, lang, globalLangs, multiple, hideSites, pages } = props;
 
   const siteOptions = allSites.map((site) => ({ label: site.name, value: site.id.toString() }));
   const langOptions = globalLangs.map((lang) => ({ label: lang.label, value: lang.id.toString() }));
@@ -27,11 +27,18 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
   };
   const [state, setState] = useState(initialState);
   const [isLoading, setIsLoading] = useState(false);
+  const [selectedPages, setSelectedPages] = useState<IPage[]>([]);
+  const [selectedPagesIds, setSelectedPagesIds] = useState<number[]>(pages ? pages : []);
+  const [showSelected, setShowSelected] = useState(false);
   const debouncedSearch = useDebounce(state.query);
 
   const allTypesOption = { label: "All content", value: "all" };
-  const [contentTypeOptions, setContentTypeOptions] = useState<{ label: string, value: string }[]>([{ ...allTypesOption }]);
-  const changeContentTypeOptions = (types: { label: string, value: string }[]) => setContentTypeOptions([allTypesOption, ...types]);
+  const [contentTypeOptions, setContentTypeOptions] = useState<{ label: string; value: string }[]>([
+    { ...allTypesOption },
+  ]);
+
+  const changeContentTypeOptions = (types: { label: string; value: string }[]) =>
+    setContentTypeOptions([allTypesOption, ...types]);
 
   const itemsPerPage = 50;
 
@@ -44,6 +51,35 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isOpen]);
 
+  useEffect(() => {
+    let isMounted = true;
+    const params = {
+      deleted: false,
+      filterPages: selectedPagesIds,
+      siteID: state.site,
+      ignoreLang: true,
+    };
+
+    const getSelectedItems = async () => {
+      if (!isMounted) return;
+      const response: { status: number; data: { totalItems: number; items: any } } = await sites.getSitePages(params);
+      if (isReqOk(response.status)) {
+        setSelectedPages(response.data.items);
+      } else {
+        console.log("Error en getSelectedItems");
+      }
+    };
+
+    if (selectedPagesIds && selectedPagesIds.length > 0) {
+      getSelectedItems();
+    }
+
+    return function cleanup() {
+      isMounted = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   useEffect(() => {
     let isMounted = true;
     const params = {
@@ -61,9 +97,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
       if (!isMounted) return;
 
       setIsLoading(true);
-      const response: { status: number; data: { totalItems: number; items: any } } = await sites.getSitePages(
-        params
-      );
+      const response: { status: number; data: { totalItems: number; items: any } } = await sites.getSitePages(params);
       if (isReqOk(response.status)) {
         setState((state) => ({ ...state, items: response.data.items, totalItems: response.data.totalItems }));
       } else {
@@ -85,7 +119,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
     const contentTypes = data.items.map((type: IContentType) => ({ label: type.title, value: type.id }));
     changeContentTypeOptions(contentTypes);
     changeState("type", "all");
-  }
+  };
 
   useEffect(() => {
     getAndSetContentTypes();
@@ -102,9 +136,28 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   const setPage = (newPage: number) => changeState("page", newPage);
 
-  const PageList =
-    state.items &&
-    state.items.map((page: IPage) => (
+  const handleChange = (item: { value: IPage; isChecked: boolean }) => {
+    const { value, isChecked } = item;
+
+    let newSelection: IPage[] = [...selectedPages];
+    isChecked ? newSelection.push(value) : (newSelection = newSelection.filter((page: IPage) => page.id !== value.id));
+    const newSelectionIDs = newSelection.map((page: IPage) => page.id);
+
+    setSelectedPages(newSelection);
+    setSelectedPagesIds(newSelectionIDs);
+
+    if (showSelected && newSelection.length === 0) {
+      setShowSelected(false);
+    }
+  };
+
+  const handleSelectedClick = () => setShowSelected(!showSelected);
+
+  const handleButtonClick = () => onClick(selectedPages);
+
+  const getPageList = (items: IPage[]) =>
+    items &&
+    items.map((page: IPage) => (
       <SelectionListItem
         option={page}
         key={page.id}
@@ -112,6 +165,10 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
         type={getStructuredDataTitle(page.structuredData)}
         date={page.modified}
         onClick={onClick}
+        pageID={page.id}
+        isSelected={selectedPagesIds.includes(page.id)}
+        onChange={handleChange}
+        multiple={multiple}
       />
     ));
 
@@ -119,6 +176,8 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
 
   const hasQuery = state.query.length > 0;
 
+  const buttonText = !showSelected ? `view selected (${selectedPages.length})` : "hide selected";
+
   return (
     <S.Wrapper>
       <S.LanguageSiteFilters>
@@ -129,13 +188,22 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
           value={state.lang.toString()}
           type="inline"
         />
-        <Select
-          name="select"
-          options={siteOptions}
-          onChange={(value) => changeState("site", value)}
-          value={state.site.toString()}
-          type="inline"
-        />
+        {!hideSites && (
+          <Select
+            name="select"
+            options={siteOptions}
+            onChange={(value) => changeState("site", value)}
+            value={state.site.toString()}
+            type="inline"
+          />
+        )}
+        {selectedPages.length > 0 && (
+          <S.ButtonWrapper>
+            <Button type="button" buttonStyle="text" onClick={handleSelectedClick}>
+              {buttonText}
+            </Button>
+          </S.ButtonWrapper>
+        )}
       </S.LanguageSiteFilters>
       <S.ContentTypeFilter>
         <S.Text>Content type</S.Text>
@@ -146,7 +214,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
           value={state.type}
           mandatory
         />
-      </ S.ContentTypeFilter>
+      </S.ContentTypeFilter>
       <S.SearchWrapper>
         {hasQuery ? (
           <TextField {...textFieldProps} onClickIcon={resetQuery} icon="close" />
@@ -161,7 +229,7 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
         </S.LoadingWrapper>
       ) : (
         <S.ListWrapper>
-          <S.PageList>{PageList}</S.PageList>
+          <S.PageList>{getPageList(showSelected ? selectedPages : state.items)}</S.PageList>
           <S.PaginationWrapper>
             {showPagination && (
               <Pagination
@@ -175,17 +243,27 @@ const PageFinder = (props: IPageFinderProps): JSX.Element => {
           </S.PaginationWrapper>
         </S.ListWrapper>
       )}
+      {selectedPages.length > 0 && (
+        <S.ActionWrapper>
+          <Button type="button" onClick={handleButtonClick}>
+            Add pages
+          </Button>
+        </S.ActionWrapper>
+      )}
     </S.Wrapper>
   );
 };
 
 interface IPageFinderProps {
-  onClick: (value: IPage) => void;
+  onClick: (value: IPage | IPage[]) => void;
   currentSiteID: number;
   isOpen: boolean;
   allSites: ISite[];
   lang: { locale: string; id: number };
   globalLangs: IGlobalLanguage[];
+  multiple?: boolean;
+  hideSites?: boolean;
+  pages?: number[];
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/{Fields/UrlField/PageFinder → PageFinder}/style.tsx

@@ -5,7 +5,7 @@ const Wrapper = styled.div`
   position: relative;
   width: 100%;
   height: 100%;
-  padding-bottom: ${p => p.theme.spacing.xl};
+  padding-bottom: ${(p) => p.theme.spacing.xl};
   flex-direction: column;
 `;
 
@@ -67,6 +67,17 @@ const ContentTypeFilter = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.s};
 `;
 
+const ActionWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  padding-top: ${(p) => p.theme.spacing.s};
+`;
+
+const ButtonWrapper = styled.div`
+  display: flex;
+  justify-content: flex-end;
+`;
+
 export {
   Wrapper,
   ListWrapper,
@@ -78,4 +89,6 @@ export {
   PaginationWrapper,
   LanguageSiteFilters,
   ContentTypeFilter,
+  ActionWrapper,
+  ButtonWrapper,
 };

package/src/components/TableFilters/CheckGroupFilter/index.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useState } from "react";
+import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
+import { areEquals } from "@ax/helpers";
+
+import * as S from "./style";
+
+const CheckGroupFilter = (props: ITypeFilterProps): JSX.Element => {
+  const {
+    label,
+    description,
+    filterItems,
+    filters,
+    pointer,
+    value,
+    selectAllOption,
+    initialState,
+    multipleSelection = true,
+  } = props;
+
+  const [selectedValue, setSelectedValue] = useState(initialState);
+
+  useEffect(() => {
+    if (value) {
+      const valueArray = typeof value === "string" ? value.split(",") : value;
+      setSelectedValue(valueArray);
+    }
+  }, [value]);
+
+  const setFilterQuery = (selection: any) => {
+    if (!selection.length) {
+      selection = initialState;
+    }
+    setSelectedValue(selection);
+    const queryFilters = selection.join(",");
+    filterItems(pointer, queryFilters);
+  };
+
+  const isActive = !areEquals(selectedValue, initialState);
+
+  const Header = () => (
+    <S.StyledHeader isActive={isActive}>
+      {label}
+      <S.IconsWrapper>
+        {isActive ? <Icon name="Filter" size="16" /> : <Icon name="DownArrow" size="16" />}
+      </S.IconsWrapper>
+    </S.StyledHeader>
+  );
+
+  return (
+    <FloatingMenu Button={Header} closeOnSelect={true} isCheckGroup={true} position="center">
+      <ListTitle>{description}</ListTitle>
+      <S.ChecksWrapper>
+        <CheckGroup
+          options={filters}
+          value={selectedValue}
+          onChange={setFilterQuery}
+          selectAllOption={selectAllOption}
+          multipleSelection={multipleSelection}
+        />
+      </S.ChecksWrapper>
+    </FloatingMenu>
+  );
+};
+
+interface IFilter {
+  name: string;
+  value: string;
+  title: string;
+}
+
+interface ITypeFilterProps {
+  label: string;
+  description: string;
+  filterItems(pointer: string, filter: string): void;
+  filters: IFilter[];
+  pointer: string;
+  value: any;
+  selectAllOption: string;
+  initialState: string[];
+  multipleSelection?: boolean;
+}
+
+export default CheckGroupFilter;

package/src/components/TableFilters/CheckGroupFilter/style.tsx

@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+const StyledHeader = styled.div<{ isActive: boolean }>`
+  ${(p) => p.theme.textStyle.uiS};
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column wrap;
+  flex-direction: row;
+  color: ${(p) => (p.isActive ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis)};
+  width: 100%;
+  justify-content: center;
+  position: relative;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+const ChecksWrapper = styled.div`
+  padding: ${(p) => p.theme.spacing.xs} ${(p) => p.theme.spacing.s};
+`;
+
+export { StyledHeader, IconsWrapper, InteractiveArrow, ChecksWrapper };

package/src/components/TableFilters/StateFilter/index.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from "react";
+
+import { Icon, FloatingMenu, ListTitle, ListItem } from "@ax/components";
+
+import * as S from "./style";
+
+const StateFilter = (props: IProps): JSX.Element => {
+  const { value, filterItems } = props;
+
+  const [selectedValue, setSelectedValue] = useState<string>("all");
+
+  const isFilterActived = selectedValue !== "all";
+
+  useEffect(() => {
+    value && setSelectedValue(value);
+  }, [value]);
+
+  const setFilterQuery = (selection: any) => {
+    if (!selection.length) {
+      selection = "";
+    }
+    setSelectedValue(selection);
+    filterItems("filterState", selection);
+  };
+
+  const sortAllStates = () => setFilterQuery("all");
+  const sortEnableState = () => setFilterQuery("enable");
+  const sortDisableState = () => setFilterQuery("disable");
+
+  const Header = () => (
+    <S.State isActive={isFilterActived}>
+      State
+      <S.IconsWrapper>
+        {isFilterActived ? (
+          <Icon name="Filter" size="16" />
+        ) : (
+          <S.InteractiveArrow>
+            <Icon name="DownArrow" size="16" />
+          </S.InteractiveArrow>
+        )}
+      </S.IconsWrapper>
+    </S.State>
+  );
+
+  return (
+    <FloatingMenu Button={Header} position="center">
+      <ListTitle>Filter by state</ListTitle>
+      <ListItem isSelected={!isFilterActived} onClick={sortAllStates}>
+        ALL
+      </ListItem>
+      <ListItem isSelected={selectedValue === "enable"} onClick={sortEnableState}>
+        Enabled
+      </ListItem>
+      <ListItem isSelected={selectedValue === "disable"} onClick={sortDisableState}>
+        Disabled
+      </ListItem>
+    </FloatingMenu>
+  );
+};
+
+interface IProps {
+  filterItems(pointer: string, filter: string): void;
+  value: string;
+}
+
+export default StateFilter;

package/src/components/TableFilters/StateFilter/style.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+import { Header } from "@ax/components/TableList/style";
+
+const State = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
+  width: 170px;
+  &:hover {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
+const IconsWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  svg {
+    margin-left: 4px;
+  }
+`;
+
+const InteractiveArrow = styled.div`
+  display: flex;
+  svg {
+    path {
+      fill: ${(p) => p.theme.color.interactive01};
+    }
+  }
+`;
+
+export { State, IconsWrapper, InteractiveArrow };

package/src/components/TableFilters/index.tsx

@@ -7,6 +7,8 @@ import StatusFilter from "./StatusFilter";
 import TranslationsFilter from "./TranslationsFilter";
 import TypeFilter from "./TypeFilter";
 import DateFilter from "./DateFilter";
+import CheckGroupFilter from "./CheckGroupFilter";
+import StateFilter from "./StateFilter";
 import LastAccessFilter from "./LastAccessFilter";
 
 export {
@@ -19,5 +21,7 @@ export {
   TranslationsFilter,
   TypeFilter,
   DateFilter,
+  CheckGroupFilter,
+  StateFilter,
   LastAccessFilter,
 };