@griddo/ax 1.57.21 → 1.58.2

package/src/Style/index.tsx

@@ -1,13 +1,12 @@
 import * as React from "react";
 
 import { ThemeProvider, createGlobalStyle } from "styled-components";
-import { core } from "components";
+import { parseTheme } from "@griddo/core";
 import reset from "styled-reset";
 import { normalize } from "polished";
 import fonts from "./fonts";
 import globalTheme from "../themes/theme.json";
 
-const { parseTheme } = core;
 const GlobalStyle = createGlobalStyle`
   ${reset}
   ${normalize()}

package/src/api/sites.tsx

@@ -226,20 +226,23 @@ const removePageBulk = async (siteID: number, ids: number[]): Promise<AxiosRespo
   return sendRequest(SERVICES.REMOVE_PAGE_BULK, { ids });
 };
 
-const getSitePagesLight = async (params: IGetSitePagesParams) => {
+const getSitePagesLight = async (params: IGetSitePagesParams): Promise<AxiosResponse> => {
   const {
     host,
     endpoint: [prefix, suffix],
   } = SERVICES.GET_SITE_PAGES_LIGHT;
 
-  const { siteID, deleted, page, itemsPerPage, query } = params;
+  const { siteID, deleted, page, itemsPerPage, query, lang, filterStructuredData } = params;
 
-  SERVICES.GET_SITE_PAGES_LIGHT.dynamicUrl = `${host}${prefix}${siteID}${suffix}?deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}`;
+  SERVICES.GET_SITE_PAGES_LIGHT.dynamicUrl = `${host}${prefix}${siteID}${suffix}?deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}&filterStructuredData=${filterStructuredData}`;
   if (query) {
     SERVICES.GET_SITE_PAGES_LIGHT.dynamicUrl = `${host}${prefix}${siteID}${suffix}?deleted=${deleted}&page=${page}&itemsPerPage=${itemsPerPage}&query=${query}`;
   }
 
-  return sendRequest(SERVICES.GET_SITE_PAGES_LIGHT);
+  const dataHeader = {} as { lang: number };
+  if (lang) dataHeader.lang = lang;
+
+  return sendRequest(SERVICES.GET_SITE_PAGES_LIGHT, null, dataHeader);
 };
 
 const getSiteImages = async (site: number | string, page: number, itemsPerPage: number | null, thumbWidth?: number, thumbHeight?: number, query?: string, search?: string): Promise<AxiosResponse> => {

package/src/api/structuredData.tsx

@@ -1,6 +1,7 @@
 import { template } from "./config";
 import { IServiceConfig, sendRequest, sendInitialRequest } from "./utils";
 import { IGetStructuredDataParams } from "@ax/types";
+import { AxiosResponse } from "axios";
 
 const SERVICES: { [key: string]: IServiceConfig } = {
   GET_DATA: {
@@ -68,6 +69,11 @@ const SERVICES: { [key: string]: IServiceConfig } = {
     endpoint: ["/structured_data_content/", "/bulk"],
     method: "PUT",
   },
+  GET_CONTENT_TYPES: {
+    ...template,
+    endpoint: ["/site/", "/structured_data"],
+    method: "GET",
+  }
 };
 
 const getData = (token: string | null, siteID?: number | null) => {
@@ -182,6 +188,18 @@ const setDataStatusBulk = (dataContentID: number[], status: string) => {
   return sendRequest(SERVICES.SET_DATA_STATUS_BULK, { ids: dataContentID });
 };
 
+const getContentTypes = (siteID: number | null, lang?: number): Promise<AxiosResponse> => {
+  const { host, endpoint } = SERVICES.GET_CONTENT_TYPES;
+  const [prefix, suffix] = endpoint;
+
+  SERVICES.GET_CONTENT_TYPES.dynamicUrl = `${host}${prefix}${siteID}${suffix}`;
+
+  const dataHeader = {} as { lang: number };
+  if (lang) dataHeader.lang = lang;
+
+  return sendRequest(SERVICES.GET_CONTENT_TYPES, null, dataHeader);
+};
+
 export default {
   getData,
   getDataContent,
@@ -196,4 +214,5 @@ export default {
   restoreDataContentBulk,
   setDataStatus,
   setDataStatusBulk,
+  getContentTypes,
 };

package/src/components/Browser/index.tsx

@@ -1,7 +1,8 @@
 import React, { useEffect } from "react";
 
 import * as components from "components";
-import { providers, core, translations, cloudinaryDefaults } from "components";
+import { providers, translations, cloudinaryDefaults } from "components";
+import { Preview } from "@griddo/core";
 
 import * as S from "./style";
 
@@ -11,7 +12,6 @@ const Browser = (props: IBrowserProps): JSX.Element => {
   const API_URL = process.env.REACT_APP_API_ENDPOINT;
   const PUBLIC_API_URL = process.env.REACT_APP_PUBLIC_API_ENDPOINT;
   const { SiteProvider, AnimationProvider } = providers;
-  const { Preview } = core;
 
   useEffect(() => {
     localStorage.setItem("selectedID", "0");

package/src/components/Fields/ReferenceField/AutoPanel/index.tsx

@@ -1,16 +1,16 @@
 import React, { useState } from "react";
 
 import { IDataSource, ISite, IStructuredData } from "@ax/types";
-
 import { Button, FloatingMenu, IconAction, RadioGroup, Select, FieldsBehavior } from "@ax/components";
-import AutoItem from "./AutoItem";
 
+import { IReferenceState, useReference } from "../Context";
+import AutoItem from "./AutoItem";
 import * as S from "./style";
 
 const AutoPanel = (props: IProps): JSX.Element => {
-  const { onChange, context, site, structuredData, validators } = props;
+  const { onChange, site, structuredData, validators } = props;
 
-  const { state, setState } = context;
+  const { state, setState } = useReference();
 
   const init = state.quantity ? "number" : "all";
   const [allItems, setAllItems] = useState<string | boolean>(init);
@@ -59,7 +59,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
   ];
 
   const handleOrderDirection = (orderDirection: string) =>
-    setState({ ...context, state: { ...state, orderDirection } });
+    setState((state: IReferenceState) => ({ ...state, orderDirection }));
 
   const optionsOnSelect = (
     <S.SelectWrapper>
@@ -79,7 +79,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
     name: "Sort",
     options,
     value: state.order,
-    onChange: (order: string | boolean) => setState({ ...context, state: { ...state, order } }),
+    onChange: (order: string | boolean) => setState((state: IReferenceState) => ({ ...state, order })),
     optionsOnSelect,
   };
 
@@ -87,7 +87,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
     fieldType: "NumberField",
     title: "",
     value: state.quantity,
-    onChange: (quantity: number) => setState({ ...context, state: { ...state, quantity } }),
+    onChange: (quantity: number) => setState((state: IReferenceState) => ({ ...state, quantity })),
     maxValue: validators && validators.maxValue ? validators.maxValue : undefined,
     minValue: validators && validators.minValue ? validators.minValue : undefined,
   };
@@ -109,7 +109,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
     if (!state.source.includes(value)) {
       const newSources = state.source;
       newSources.push(value);
-      setState({ ...context, state: { ...state, source: newSources } });
+      setState((state: IReferenceState) => ({ ...state, source: newSources }));
     }
   };
 
@@ -142,12 +142,12 @@ const AutoPanel = (props: IProps): JSX.Element => {
   const removeItem = (item: string) => {
     if (state.source.includes(item)) {
       const newSources = state.source.filter((e: string) => e !== item);
-      setState({ ...context, state: { ...state, source: newSources } });
+      setState((state: IReferenceState) => ({ ...state, source: newSources }));
     }
   };
 
   const handleAddFilter = (newFilters: any[]) => {
-    setState({ ...context, state: { ...state, filter: newFilters } });
+    setState((state: IReferenceState) => ({ ...state, filter: newFilters }));
   };
 
   const quantityOptions = [
@@ -166,7 +166,7 @@ const AutoPanel = (props: IProps): JSX.Element => {
   const handleItemsChange = (value: string | boolean) => {
     setAllItems(value);
     if (value === "all") {
-      setState({ ...context, state: { ...state, quantity: 0 } });
+      setState((state: IReferenceState) => ({ ...state, quantity: 0 }));
     }
   };
 
@@ -214,7 +214,6 @@ const AutoPanel = (props: IProps): JSX.Element => {
 };
 
 interface IProps {
-  context: any;
   structuredData: { global: IStructuredData[]; site: IStructuredData[] };
   onChange: (value: any) => void;
   site: ISite;

package/src/components/Fields/ReferenceField/Context/index.tsx

@@ -1,4 +1,4 @@
-import { createContext, useState, useCallback } from "react";
+import React, { createContext, useState, useCallback, useContext, ReactElement } from "react";
 import { moveElement } from "@ax/forms";
 
 const initState = {
@@ -16,52 +16,71 @@ const initState = {
   sourceTitles: [],
 };
 
-const useReference = (modes?: string[]) => {
-  const mode = modes && modes.length ? modes[0] : "auto";
-  const [state, setState] = useState({ state: { ...initState, mode } });
+const ReferenceContext = createContext({ state: { ...initState } });
 
-  const setCurrentState = useCallback((newState: any): void => {
-    setState(newState);
-  }, []);
+const ReferenceProvider = ({ modes, children }: { modes?: string[], children: ReactElement }): JSX.Element => {
+  const reference = useReferenceProvider(modes);
+
+  return (
+    <ReferenceContext.Provider value={reference}>
+      {children}
+    </ReferenceContext.Provider>
+  );
+};
+
+const useReference = (): any => {
+  return useContext(ReferenceContext);
+};
+
+const useReferenceProvider = (modes?: string[]) => {
+  const mode = modes && modes.length ? modes[0] : "auto";
+  const [state, setState] = useState<IReferenceState>({ ...initState, mode });
 
   const setModeAndSource = useCallback(
-    (mode: string, source: string[]) => {
+    (mode: string, source: never[]) => {
       const defaultState = {
         ...state,
-        state: {
-          ...state.state,
-          mode,
-          source,
-        },
+        mode,
+        source,
       };
-      setCurrentState(defaultState);
+      setState(defaultState);
     },
-    [setCurrentState, state]
+    [setState, state]
   );
 
   const setReorderElements = (elementID: number, isPush: boolean) => {
-    const { selectedItems } = state.state;
+    const { selectedItems } = state;
     const newItems = moveElement(elementID, selectedItems, isPush, "id");
     const fixed = newItems.map((item: any) => item.id);
-    const newState = {
+    const newState: IReferenceState = {
       ...state,
-      state: {
-        ...state.state,
-        selectedItems: newItems,
-        fixed,
-      },
+      selectedItems: newItems,
+      fixed,
     };
-    setCurrentState(newState);
+    setState(newState);
   };
 
   return {
-    ...state,
-    setState: setCurrentState,
+    state: { ...state },
+    setState,
     setModeAndSource,
     setReorderElements,
   };
 };
 
-const { Provider, Consumer } = createContext({ state: initState });
+export interface IReferenceState {
+  mode: string,
+  order: string,
+  orderDirection: string,
+  quantity: number,
+  items: any,
+  selectedItems: any,
+  fixed: any,
+  search: string,
+  showSelected: boolean,
+  source: any,
+  filter: any,
+  sourceTitles: any,
+}
 
-export { Provider, Consumer, initState, useReference };
+export { ReferenceProvider, useReference };

package/src/components/Fields/ReferenceField/ItemList/Item/index.tsx

@@ -56,7 +56,7 @@ const Item = (props: IProps) => {
     <S.Item>
       <S.TextWrapper>
         <S.Header>
-          <S.Type>{source.title.toUpperCase()}</S.Type>
+          <S.Type>{source?.title.toUpperCase()}</S.Type>
           {item.modified && <S.Date>{getFormattedDateWithTimezone(item.modified, "d MMM Y")}</S.Date>}
           <S.ReorderArrowsWrapper>
             <ReorderArrows

package/src/components/Fields/ReferenceField/ItemList/index.tsx

@@ -6,12 +6,13 @@ import { IDataSource, IRootState, IStructuredDataContent } from "@ax/types";
 import { isReqOk } from "@ax/helpers";
 import Item from "./Item";
 
+import { IReferenceState, useReference } from "../Context";
 import * as S from "./style";
 
 const ItemList = (props: IProps) => {
-  const { items, currentSite, context, handleListDelete, handleChange } = props;
+  const { items, currentSite, handleListDelete, handleChange } = props;
 
-  const { state, setState, setReorderElements } = context;
+  const { state, setState, setReorderElements } = useReference();
 
   useEffect(() => {
     const params = {
@@ -23,14 +24,14 @@ const ItemList = (props: IProps) => {
       const siteID = currentSite ? currentSite : "global";
       const response = await structuredData.getDistributorContent(siteID, params);
       if (isReqOk(response.status)) {
-        setState({ ...context, state: { ...state, selectedItems: response.data } });
+        setState((state: IReferenceState) => ({ ...state, selectedItems: response.data }));
       } else {
         console.log("Error en getItems");
       }
     };
     getItems();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [items]);
 
   useEffect(() => {
     const { mode, fixed } = state;
@@ -46,7 +47,7 @@ const ItemList = (props: IProps) => {
     if (state.fixed.includes(item.id)) {
       const newSelIds = state.fixed.filter((a: any) => a !== item.id);
       const selItems = state.selectedItems.filter((b: any) => b.id !== item.id);
-      setState({ ...context, state: { ...state, fixed: newSelIds, selectedItems: selItems } });
+      setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems }));
       handleListDelete(newSelIds);
     }
   };
@@ -75,7 +76,6 @@ const ItemList = (props: IProps) => {
 interface IProps {
   items: number[];
   currentSite: number;
-  context: any;
   handleListDelete(value: string[]): void;
   handleChange(newValue: any): void;
 }

package/src/components/Fields/ReferenceField/ManualPanel/index.tsx

@@ -8,13 +8,14 @@ import { Button, Loader, Select, TextField } from "@ax/components";
 
 import { useDebounce } from "@ax/hooks";
 
+import { IReferenceState, useReference } from "../Context";
 import Item from "./Item";
 import * as S from "./style";
 
 const ManualPanel = (props: IProps) => {
-  const { onChange, currentSite, context } = props;
+  const { onChange, currentSite } = props;
 
-  const { state, setState } = context;
+  const { state, setState } = useReference();
 
   const [isLoading, setIsLoading] = useState(false);
   const [selectedSource, setSelectedSource] = useState(state.sourceTitles[0].id);
@@ -40,7 +41,7 @@ const ManualPanel = (props: IProps) => {
         await structuredData.getDataContents(params, currentSite);
       if (isReqOk(response.status)) {
         const { items } = response.data;
-        setState({ ...context, state: { ...state, items } });
+        setState((state: IReferenceState) => ({ ...state, items }));
       } else {
         console.log("Error en getAndSetItems");
       }
@@ -55,8 +56,8 @@ const ManualPanel = (props: IProps) => {
   }, [currentSite, selectedSource, debouncedSearch, state.mode]);
 
   const handleOnClick = (item: IStructuredDataContent) => {
-    let newSelIds;
-    let selItems;
+    let newSelIds: number[];
+    let selItems: number[];
     if (state.fixed.includes(item.id)) {
       newSelIds = state.fixed.filter((a: any) => a !== item.id);
       selItems = state.selectedItems.filter((b: any) => b.id !== item.id);
@@ -65,11 +66,11 @@ const ManualPanel = (props: IProps) => {
       selItems = [...state.selectedItems, item];
     }
     const showSelected = state.showSelected && newSelIds.length === 0 ? false : state.showSelected;
-    setState({ ...context, state: { ...state, fixed: newSelIds, selectedItems: selItems, showSelected } });
+    setState((state: IReferenceState) => ({ ...state, fixed: newSelIds, selectedItems: selItems, showSelected }));
   };
 
   const handleSelectedClick = () => {
-    setState({ ...context, state: { ...state, showSelected: !state.showSelected } });
+    setState((state: IReferenceState) => ({ ...state, showSelected: !state.showSelected }));
   };
 
   const handleAdd = () => {
@@ -83,7 +84,7 @@ const ManualPanel = (props: IProps) => {
 
   const textFieldProps = {
     value: state.search,
-    onChange: (search: string) => setState({ ...context, state: { ...state, search } }),
+    onChange: (search: string) => setState((state: IReferenceState) => ({ ...state, search })),
     placeholder: "Search",
     icon: "search",
     iconPosition: "in",
@@ -152,7 +153,6 @@ const ManualPanel = (props: IProps) => {
 interface IProps {
   currentSite: number;
   onChange: (value: any) => void;
-  context: any;
 }
 
 const mapStateToProps = (state: IRootState) => ({

package/src/components/Fields/ReferenceField/index.tsx

@@ -9,19 +9,26 @@ import { IconAction, FloatingPanel, Select, Tag } from "@ax/components";
 import AutoPanel from "./AutoPanel";
 import ItemList from "./ItemList";
 import ManualPanel from "./ManualPanel";
-import { Provider, Consumer, useReference } from "./Context";
+import { useReference, ReferenceProvider } from "./Context";
 
 import * as S from "./style";
 
+const ReferenceFieldWithProvider = (props: IProps) => (
+  <ReferenceProvider modes={props.selectionType}>
+    <ReferenceField {...props} />
+  </ReferenceProvider>
+)
+
 const ReferenceField = (props: IProps) => {
-  const { source, value, onChange, disabled, site, selectionType, structuredDataValues, validators } = props;
+  const { source, value, onChange, disabled, site, selectionType, structuredDataValues, validators, maxItems } = props;
 
   const { isOpen, toggleModal } = useModal();
 
-  const contextValue = useReference(selectionType);
-  const { state, setState, setModeAndSource } = contextValue;
+  const { state, setState, setModeAndSource } = useReference();
   const { mode } = state;
   const singleMode = selectionType && selectionType.length === 1;
+  const isAuto = mode === "auto";
+  const hasMaxItems = value && value.fixed && maxItems && !isAuto && value.fixed.length >= maxItems;
 
   const handleMode = (mode: string) => {
     const { fixed, order, quantity, filter } = state;
@@ -31,6 +38,7 @@ const ReferenceField = (props: IProps) => {
         unique.includes(selItem.structuredData) ? unique : [...unique, selItem.structuredData],
       []
     );
+
     const resetSource = mode === "manual" || source.length === 1 ? source : manualSources;
 
     const newValue =
@@ -51,8 +59,6 @@ const ReferenceField = (props: IProps) => {
     setModeAndSource(mode, resetSource);
   };
 
-  const isAuto = mode === "auto";
-
   useEffect(() => {
     const getSourcesTitles = async () => {
       const response = await structuredData.getDataTitles(source);
@@ -72,7 +78,7 @@ const ReferenceField = (props: IProps) => {
           const [order, orderDirection = "ASC"] = value.order.split("-");
           newState = { ...newState, order, orderDirection };
         }
-        setState({ state: newState });
+        setState({ ...newState });
       });
     }
 
@@ -142,19 +148,20 @@ const ReferenceField = (props: IProps) => {
     </S.DataWrapper>
   );
 
-  const getPanel = (context: any) =>
+  const getPanel = () =>
     isAuto ? (
       <AutoPanel
-        context={context}
         structuredData={structuredDataValues}
         onChange={handleOnChange}
         site={site}
         validators={validators}
       />
     ) : (
-      <ManualPanel context={context} onChange={handleOnChange} />
+        <ManualPanel onChange={handleOnChange} />
     );
 
+  const manualItems = !isAuto && value && Array.isArray(value.fixed) ? value.fixed.length : 0;
+
   return (
     <S.Wrapper>
       <S.Label>Elements</S.Label>
@@ -169,37 +176,26 @@ const ReferenceField = (props: IProps) => {
             disabled={disabled}
           />
         )}
-        {singleMode && !isAuto && value && <S.SingleModeText>{value.fixed.length} items</S.SingleModeText>}
+        {singleMode && !isAuto && value && <S.SingleModeText>{manualItems} items</S.SingleModeText>}
         {singleMode && isAuto && <S.SingleModeText>Configure automatic selection</S.SingleModeText>}
-        {!disabled && (
+        {!disabled && !hasMaxItems && (
           <S.ActionWrapper>
             <IconAction icon={icon} onClick={handleAddItems} />
           </S.ActionWrapper>
         )}
       </S.ModeWrapper>
-      <Provider value={contextValue}>
-        <Consumer>
-          {(context: any) => {
-            return (
-              <>
-                {isAuto ? (
-                  autoData
-                ) : (
-                  <ItemList
-                    items={value ? value.fixed : []}
-                    handleListDelete={handleListDelete}
-                    context={context}
-                    handleChange={onChange}
-                  />
-                )}
-                <FloatingPanel title="Configure elements" toggleModal={toggleModal} isOpen={isOpen}>
-                  {isOpen && getPanel(context)}
-                </FloatingPanel>
-              </>
-            );
-          }}
-        </Consumer>
-      </Provider>
+      {isAuto ? (
+        autoData
+      ) : (
+        <ItemList
+          items={value ? value.fixed : []}
+          handleListDelete={handleListDelete}
+          handleChange={onChange}
+        />
+      )}
+      <FloatingPanel title="Configure elements" toggleModal={toggleModal} isOpen={isOpen}>
+        {isOpen && getPanel()}
+      </FloatingPanel>
     </S.Wrapper>
   );
 };
@@ -213,10 +209,11 @@ interface IProps {
   selectionType?: string[];
   structuredDataValues: { global: IStructuredData[]; site: IStructuredData[] };
   validators?: Record<string, unknown>;
+  maxItems?: number;
 }
 
 const mapStateToProps = (state: IRootState) => ({
   structuredDataValues: state.structuredData.structuredData,
 });
 
-export default connect(mapStateToProps, null)(ReferenceField);
+export default connect(mapStateToProps, null)(ReferenceFieldWithProvider);

package/src/components/Fields/Select/style.tsx

@@ -13,7 +13,6 @@ export const StyledSelect = styled(Select)<{ isDisabled: boolean | undefined; er
     border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.uiLine)};
     box-shadow: none;
     height: ${(p) => p.theme.spacing.l};
-    min-width: calc(${(p) => p.theme.spacing.xl} * 2);
     max-width: calc(${(p) => p.theme.spacing.xl} * 6);
     :hover {
       border-color: ${(p) => (p.error ? p.theme.color.error : p.theme.color.uiLine)};

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

@@ -10,10 +10,12 @@ const SelectionListItem = (props: ISelectionListItemProps): JSX.Element => {
     onClick(option);
   };
 
+  const pageType = type || "Page";
+
   return (
     <S.ListItem onClick={handleOnClick}>
       <S.Header>
-        <S.Type>{type}</S.Type>
+        <S.Type>{pageType}</S.Type>
         <S.Date>{getFormattedDateWithTimezone(date, "d MMM Y")}</S.Date>
       </S.Header>
       <S.Content>{title}</S.Content>