@griddo/ax 1.61.7 → 1.62.2

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

@@ -12,13 +12,6 @@ const FileField = (props: IProps) => {
 
   const { isOpen, toggleModal } = useModal(false);
 
-  useEffect(() => {
-    if (!value) {
-      toggleModal();
-    }
-    // eslint-disable-next-line
-  }, []);
-
   const validFormats = ["pdf", "doc", "docx", "xls", "xlsx", "zip"];
 
   const handleClick = () => {

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

@@ -96,6 +96,7 @@ const ImageDataWrapper = styled.div`
   border-radius: ${(p) => p.theme.radii.s};
   color: ${(p) => p.theme.color.textMediumEmphasis};
   margin-bottom: ${(p) => p.theme.spacing.s};
+  max-width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
 `;
 
 const FileName = styled.div`

package/src/components/Fields/ReferenceField/AutoPanel/AutoItem/style.tsx

@@ -19,7 +19,6 @@ const IconActionWrapper = styled.div`
 `;
 
 const IconWrapper = styled.div`
-  opacity: 0;
   position: absolute;
   top: 50%;
   right: ${(p) => `calc((${p.theme.spacing.s} * 2) + ${p.theme.spacing.xxs})`};

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

@@ -3,7 +3,17 @@ import React, { memo, useEffect, useRef, useState } from "react";
 import * as S from "./style";
 
 const TextArea = (props: ITextAreaProps): JSX.Element => {
-  const { value, placeholder, error, name, onChange, disabled, handleValidation, editorID } = props;
+  const {
+    value,
+    placeholder,
+    error,
+    name,
+    onChange,
+    disabled,
+    handleValidation,
+    editorID,
+    rows = 1
+  } = props;
 
   const [state, setState] = useState<string>(value);
   const timeOutRef = useRef<ReturnType<typeof setTimeout>>();
@@ -36,8 +46,8 @@ const TextArea = (props: ITextAreaProps): JSX.Element => {
   return (
     <S.TextArea
       name={name}
-      minRows={1}
-      maxRows={3}
+      minRows={rows}
+      maxRows={4}
       value={state}
       onChange={handleOnChange}
       onBlur={handleOnBlur}
@@ -57,6 +67,7 @@ interface ITextAreaProps {
   disabled?: boolean;
   handleValidation?: (value: string) => void;
   editorID?: number;
+  rows?: number;
 }
 
 export default memo(TextArea);

package/src/components/Fields/VisualUniqueSelection/ImageSelection/index.tsx

@@ -1,15 +1,20 @@
 import React from "react";
 
 import { VisualOption } from "@ax/components";
+import { getOptions } from "../utils";
 
 import * as S from "./style";
 
-const ImageSelection = ({ value, onChange, options, objKey, columns, disabled }: IImageSelectionProps): JSX.Element => {
+const ImageSelection = (props: IImageSelectionProps): JSX.Element => {
+  const { value, onChange, options, objKey, columns, disabled, theme } = props;
+
+  const mappedOptions: any = getOptions(theme, options);
+
   const handleChange = (newValue: string) => onChange(newValue);
 
   return (
     <S.Wrapper columns={columns}>
-      {options.map((option: any, index: number) => (
+      {mappedOptions.map((option: any, index: number) => (
         <VisualOption
           value={option.value}
           onChange={handleChange}
@@ -34,6 +39,7 @@ interface IImageSelectionProps {
   objKey: string;
   columns: number;
   disabled?: boolean;
+  theme: string;
 }
 
 export default ImageSelection;

package/src/components/Fields/VisualUniqueSelection/ScrollableSelection/index.tsx

@@ -1,16 +1,19 @@
 import React, { useState, useRef, useEffect } from "react";
 
 import { IconAction, VisualOption } from "@ax/components";
+import { getOptions } from "../utils";
 
 import * as S from "./style";
 
 const ScrollableSelection = (props: IScrollableSelectionProps): JSX.Element => {
-  const { value, onChange, actions, options, objKey, columns, disabled, reference } = props;
+  const { value, onChange, actions, options, objKey, columns, disabled, reference, theme } = props;
   const [carouselIndex, setCarouselIndex] = useState(0);
   const [carouselItemWidth, setCarouselItemWidth] = useState<number>();
   const carouselRef = useRef<HTMLDivElement>(null);
 
-  const slides = Math.ceil(options.length / columns);
+  const mappedOptions: any = getOptions(theme, options);
+
+  const slides = Math.ceil(mappedOptions.length / columns);
 
   const handleSelection = (newValue: string) => {
     onChange(newValue);
@@ -38,7 +41,7 @@ const ScrollableSelection = (props: IScrollableSelectionProps): JSX.Element => {
   return (
     <S.Wrapper>
       <S.Carousel ref={carouselRef}>
-        {options.map((option: IScrollableUniqueSelectionFieldOptionsProps, index: number) => (
+        {mappedOptions.map((option: IScrollableUniqueSelectionFieldOptionsProps, index: number) => (
           <S.CarouselItem width={carouselItemWidth} columns={columns} key={index}>
             <VisualOption
               value={option.value}
@@ -75,7 +78,7 @@ interface IScrollableSelectionProps {
   value: string;
   title: string;
   onChange: (value: string) => void;
-  options: IScrollableUniqueSelectionFieldOptionsProps[];
+  options: any[];
   name: string;
   objKey: string;
   columns: number;
@@ -83,6 +86,7 @@ interface IScrollableSelectionProps {
   actions: any;
   selectedContent: any;
   reference?: string;
+  theme: string;
 }
 
 interface IScrollableUniqueSelectionFieldOptionsProps {

package/src/components/Fields/VisualUniqueSelection/utils.tsx

@@ -0,0 +1,30 @@
+const hasProps = (obj: Record<string, unknown>, props: string[]) => {
+  return (
+    !!props &&
+    props.map((prop) => Object.prototype.hasOwnProperty.call(obj, prop)).filter(Boolean).length === props.length
+  );
+};
+
+const defaultOptions = (vusOptions: Record<string, unknown>[]) => {
+  return !vusOptions.find((entry) => entry.theme);
+};
+
+const getOptions = (theme: string, vusOptions: Record<string, unknown>[]) => {
+  const themes = vusOptions.filter((entry) => entry.theme).map((entry) => entry.theme);
+  const themeExists = themes.includes(theme);
+  const defaultsOptions = vusOptions.filter((entry) => hasProps(entry, ["img", "value"]));
+
+  // 1 - Si options solo tiene las defaults options (legacy) devuelve las defaults.
+  // 2 - Si options no tiene el theme, devuelve las defaults.
+  if (defaultOptions(vusOptions) || !themeExists) return defaultsOptions;
+
+  // Si options tiene el theme, devuelve las options de ese theme.
+  if (themeExists) {
+    const optionsObj = vusOptions.find((entry) => entry.theme === theme);
+    return optionsObj && optionsObj.options;
+  }
+
+  return [];
+};
+
+export { getOptions };

package/src/components/Gallery/index.tsx

@@ -22,6 +22,8 @@ const Gallery = (props: IProps): JSX.Element => {
   const tabs = [];
   if (site) tabs.unshift(...["Local", "Global"]);
   const [selectedTab, setSelectedTab] = useState(tabs[0]);
+  const [selectedImage, setSelectedImage] = useState<number>();
+  const [imageSelectedData, setImageSelectedData] = useState<IData>(data);
   const isLocalTab = selectedTab === "Local";
   const isGlobalTab = selectedTab === "Global";
   const galleryScope = isLocalTab ? site.id : "global";
@@ -91,7 +93,7 @@ const Gallery = (props: IProps): JSX.Element => {
   };
 
   const setImage = (imageData: any) => {
-    const updatedImage = { ...data.imageSelected, ...imageData };
+    const updatedImage = { ...imageSelectedData.imageSelected, ...imageData };
     getImageSelected(updatedImage);
     toggleModal();
   };
@@ -162,11 +164,15 @@ const Gallery = (props: IProps): JSX.Element => {
                     data.items &&
                     data.items.map((item: IImage, index: number) => {
                       const isSelected = data.imageSelected ? item.id === data.imageSelected.id : false;
+                      if (isSelected && selectedImage !== item.id) {
+                        setSelectedImage(item.id);
+                        setImageSelectedData(data);
+                      }
                       return (
                         <S.GridItem key={item.name + index} orientation={item.orientation}>
                           <S.ImageWrapper
                             onClick={handleClick(item)}
-                            selected={isSelected}
+                            selected={isSelected || selectedImage === item.id}
                             orientation={item.orientation}
                           >
                             <img src={item.thumb} alt={item.alt} />
@@ -192,8 +198,8 @@ const Gallery = (props: IProps): JSX.Element => {
         </S.GalleryWrapper>
       </S.GalleryTabs>
       <GalleryPanel
-        isImageSelected={data?.isImageSelected}
-        imageSelected={data?.imageSelected}
+        isImageSelected={imageSelectedData?.isImageSelected}
+        imageSelected={imageSelectedData?.imageSelected}
         validFormats={validFormats}
         setImage={setImage}
         isGlobalTab={!isLocalTab}

package/src/components/MainWrapper/AppBar/style.tsx

@@ -99,8 +99,6 @@ const Header = styled.section<{ inversed?: boolean }>`
   display: flex;
   justify-content: space-between;
   padding-right: ${(p) => p.theme.spacing.s};
-  border-bottom: ${(p) => `1px solid ${p.theme.color.uiLine}`};
-  border-left: 1px solid ${(p) => p.theme.color.uiLine};
 
   button:first-child {
     margin-left: ${(p) => p.theme.spacing.m};

package/src/components/MainWrapper/style.tsx

@@ -4,12 +4,14 @@ export const Wrapper = styled.section<{ fixedAppBar: boolean | undefined }>`
   height: 100%;
   display: flex;
   flex-direction: column;
-  padding-top: ${p => p.fixedAppBar ? p.theme.spacing.xl : "0"};
+  padding-top: ${(p) => (p.fixedAppBar ? p.theme.spacing.xl : "0")};
 `;
 
 export const Main = styled.article<{ fullWidth: boolean | undefined }>`
   position: relative;
-  overflow: ${p => p.fullWidth ? "visible" : "auto"};
-  background: ${p => p.theme.color.uiBackground01};
+  overflow: ${(p) => (p.fullWidth ? "visible" : "auto")};
+  background: ${(p) => p.theme.color.uiBackground01};
+  border-top: ${(p) => `1px solid ${p.theme.color.uiLine}`};
+  margin-top: -1px;
   flex-grow: 1;
 `;

package/src/components/SideModal/SideModalOption/index.tsx

@@ -3,18 +3,18 @@ import React, { memo } from "react";
 import * as S from "./style";
 import { getDisplayName, getThumbnailProps, filterImageText } from "@ax/helpers";
 
-const getThumbnailData = (option: any) => {
+const getThumbnailData = (option: any, theme: string) => {
   option = filterImageText(option.component ? option.component : option);
 
-  return getThumbnailProps(option, false);
+  return getThumbnailProps(option, false, theme);
 };
 
 const SideModalOption = (props: IProps) => {
-  const { option, handleClick, toggleModal } = props;
+  const { option, handleClick, toggleModal, theme } = props;
 
   const isNavigationDefault = ["header", "footer"].includes(option.type);
 
-  const thumbnailProps = getThumbnailData(option);
+  const thumbnailProps = getThumbnailData(option, theme);
 
   const optionParam = option.component || option;
   const label = isNavigationDefault ? option.title : getDisplayName(optionParam);
@@ -37,6 +37,7 @@ interface IProps {
   handleClick: any;
   toggleModal: () => void;
   children: string;
+  theme: string;
 }
 
 export default memo(SideModalOption);

package/src/components/SideModal/index.tsx

@@ -21,6 +21,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     current,
     setDefault,
     showSearch,
+    theme,
   } = props;
 
   const componentList: any = [];
@@ -87,9 +88,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
     return (
       <MenuItem key={`${value}${i}`} active={isSelected}>
         <S.NavLink onClick={filterOptions}>
-          <S.Link active={isSelected}>
-            {label}
-          </S.Link>
+          <S.Link active={isSelected}>{label}</S.Link>
         </S.NavLink>
       </MenuItem>
     );
@@ -121,26 +120,31 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
       if (searchQuery.length > 0) {
         const name = displayName.toLowerCase();
         const search = searchQuery.toLocaleLowerCase();
-        if (!name.includes(search)) return null
-      };
+        if (!name.includes(search)) return null;
+      }
       return (
-        <SideModalOption option={option} handleClick={handleClick} toggleModal={toggleModal} key={`${option}${i}`}>
+        <SideModalOption
+          option={option}
+          handleClick={handleClick}
+          toggleModal={toggleModal}
+          key={`${option}${i}`}
+          theme={theme}
+        >
           {displayName}
         </SideModalOption>
-      )
-    }
-    );
+      );
+    });
 
   return isOpen
     ? createPortal(
         <S.Wrapper ref={node} optionsType={optionsType}>
           <S.Header>
             <S.Title>{optionsType}</S.Title>
-          {showSearch && (
-            <S.SearchWrapper>
-              <SearchField onChange={setSearchQuery} closeOnInactive />
-            </S.SearchWrapper>
-          )}
+            {showSearch && (
+              <S.SearchWrapper>
+                <SearchField onChange={setSearchQuery} closeOnInactive />
+              </S.SearchWrapper>
+            )}
           </S.Header>
           {setDefault && !setDefault.checked && (
             <S.CheckFieldWrapper>
@@ -179,6 +183,7 @@ interface ISideModalProps {
   current?: any;
   setDefault?: any;
   showSearch?: boolean;
+  theme: string;
 }
 
 export default SideModal;

package/src/containers/Analytics/actions.tsx

@@ -55,4 +55,26 @@ function updateAnalytics(analyticsState: IAnalytics, siteId: number | string = "
   };
 }
 
-export { getAnalytics, updateAnalytics };
+function updateScriptCode(scriptCode: string, siteId: number): (dispatch: any) => Promise<boolean> {
+  return async (dispatch) => {
+    try {
+      const callback = async () => {
+        return analytics.updateScriptCode(siteId, { scriptCode });
+      }
+
+      const responseActions = {
+        handleSuccess: () => {
+          dispatch(getAnalytics(siteId));
+        },
+        handleError: (response: any) => appActions.handleError(response)(dispatch),
+      };
+
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+    } catch (e) {
+      console.log(e);
+      return false;
+    }
+  };
+}
+
+export { setAnalytics, getAnalytics, updateAnalytics, updateScriptCode };

package/src/containers/Analytics/reducer.tsx

@@ -4,12 +4,14 @@ import { AnalyticsActionsCreators } from "./interfaces";
 
 export interface IAnalyticsState {
   scriptCode: string;
+  siteScriptCodeExists: boolean;
   dimensions: IDimension[];
   groups: IDimensionsGroup[];
 }
 
 export const initialState = {
   scriptCode: "",
+  siteScriptCodeExists: false,
   dimensions: [],
   groups: [],
 };

package/src/containers/Sites/actions.tsx

@@ -21,7 +21,7 @@ import {
 
 import { ISite, IGetSitePagesParams, ISettingsForm, IGetGlobalPagesParams, IPage } from "@ax/types";
 
-import { sites, languages, dataPack, social, structuredData } from "@ax/api";
+import { sites, languages, dataPack, social, structuredData, analytics } from "@ax/api";
 import { appActions } from "@ax/containers/App";
 import { structuredDataActions } from "@ax/containers/StructuredData";
 import { navigationActions, menuActions } from "@ax/containers/Navigation";
@@ -201,6 +201,14 @@ function setSiteInfo(currentSiteInfo: ISite): (dispatch: any, getState: any) =>
       } else {
         console.log("Error en sites getStructuredData"); // TODO: capturar errores mejor
       }
+
+      // get analytics
+      const analyticsResponse: any = await analytics.getAnalytics(currentSiteInfo.id);
+      if (isReqOk(socialResponse.status)) {
+        dispatch(analyticsActions.setAnalytics(analyticsResponse.data));
+      } else {
+        console.log("Error en sites getAnalytics"); // FIXME: capturar errores mejor
+      }
     } catch (e) {
       console.log(e); // FIXME: capturar errores
     }
@@ -241,7 +249,7 @@ function getFilteredContent(filter: any): (dispatch: any, getState: any) => Prom
 
 function getSitePages(
   params: IGetSitePagesParams,
-  structuredData?: string,
+  structuredData?: string | null,
   filterQuery?: string
 ): (dispatch: any) => Promise<void> {
   return async (dispatch) => {
@@ -368,8 +376,10 @@ function importPageFromGlobal(pageID: number | number[]): (dispatch: any, getSta
   return async (dispatch, getState) => {
     try {
       const {
-        sites: { currentSiteInfo },
-        structuredData: { currentStructuredData },
+        sites: {
+          currentSiteInfo,
+          currentFilter
+        },
       } = getState();
 
       const responseActions = {
@@ -378,7 +388,7 @@ function importPageFromGlobal(pageID: number | number[]): (dispatch: any, getSta
             siteID: currentSiteInfo.id,
             ...DEFAULT_PARAMS,
           };
-          const filter = currentStructuredData ? currentStructuredData.id : null;
+          const filter = currentFilter === "unique-pages" ? null : currentFilter;
           getSitePages(params, filter)(dispatch);
         },
         handleError: (response: any) => appActions.handleError(response)(dispatch),

package/src/forms/fields.tsx

@@ -7,6 +7,7 @@ const getInnerFields = (
   innerActions: any,
   selectedContent: IPage,
   isTemplateActivated: boolean,
+  theme: string,
   errors?: IErrorItem[],
   deleteError?: (error: IErrorItem) => void
 ) => {
@@ -24,6 +25,7 @@ const getInnerFields = (
           innerActions,
           selectedContent,
           isTemplateActivated,
+          theme,
           errors,
           deleteError
         );
@@ -43,6 +45,7 @@ const getInnerFields = (
           disabled={!isTemplateActivated || singleFieldProps.disabled}
           error={error}
           deleteError={deleteError}
+          theme={theme}
         />
       );
     })
@@ -52,7 +55,8 @@ const getInnerFields = (
 const getStructuredDataInnerFields = (
   innerFields: any[],
   content: any,
-  updateValue: (value: Record<string, unknown>) => void
+  updateValue: (value: Record<string, unknown>) => void,
+  theme: string
 ) => {
   let fieldArr: any[] = [];
 
@@ -68,7 +72,7 @@ const getStructuredDataInnerFields = (
       const value = content && content[key];
 
       if (type === "ConditionalField" || type === "ArrayFieldGroup") {
-        fieldArr = getStructuredDataInnerFields(fields, content, updateValue);
+        fieldArr = getStructuredDataInnerFields(fields, content, updateValue, theme);
       }
 
       const fieldProps = {
@@ -79,6 +83,7 @@ const getStructuredDataInnerFields = (
         field: singleFieldProps,
         onChange: handleChange,
         ...singleFieldProps,
+        theme,
       };
 
       return <FieldsBehavior key={key} {...fieldProps} />;

package/src/helpers/images.tsx

@@ -1,4 +1,4 @@
-const formatBytes = (bytes: number | null, decimals: number = 2) => {
+const formatBytes = (bytes: number | null, decimals = 2) => {
   if (bytes === 0 || bytes === null) return "0 Bytes";
 
   const k = 1024;
@@ -19,7 +19,4 @@ const imageToBase64 = (file: any): Promise<string> => {
   });
 };
 
-export {
-  formatBytes,
-  imageToBase64
-};
+export { formatBytes, imageToBase64 };

package/src/helpers/index.tsx

@@ -47,6 +47,9 @@ import {
   getSchemaType,
   getModuleCategories,
   getModuleStyles,
+  getDataPackSchema,
+  getSchemaThumbnails,
+  getTemplateThumbnails,
 } from "./schemas";
 
 import {
@@ -116,6 +119,8 @@ export {
   getDisplayName,
   getTemplateType,
   getTemplateDisplayName,
+  getSchemaThumbnails,
+  getTemplateThumbnails,
   filterByCategory,
   getStructuredDataFromPage,
   getCurrentPageStructuredData,
@@ -156,6 +161,7 @@ export {
   getFileExtension,
   moveArrayElement,
   isDevelopment,
+  getDataPackSchema,
   splitAndJoin,
   splitAndTrim,
 };

package/src/helpers/schemas.tsx

@@ -7,10 +7,21 @@ const allSChemas = { ...schemas.all, ...pageSchemas };
 
 const getSchema = (name: string) => allSChemas[name];
 const getDefaultSchema = (name: string) => allSChemas[name].default;
-const getSchemaThumbnails = (name: string) => allSChemas[name].thumbnails;
+
+const getSchemaThumbnails = (name: string, theme?: string) =>
+  theme && allSChemas[name].thumbnails[theme] ? allSChemas[name].thumbnails[theme] : allSChemas[name].thumbnails;
+
 const getTemplate = (name: string) => schemas.templates[name];
+
 const getDefaultTemplate = (name: string) => schemas.templates[name].default;
-const getTemplateThumbnails = (name: string) => schemas.templates[name] && schemas.templates[name].thumbnails;
+
+const getTemplateThumbnails = (name: string, theme?: string) =>
+  theme && schemas.templates[name].thumbnails[theme]
+    ? schemas.templates[name].thumbnails[theme]
+    : schemas.templates[name] && schemas.templates[name].thumbnails;
+
+const getDataPackSchema = (name: string) => schemas.dataPacks[name];
+
 const getDisplayName = (component: string) => {
   const { displayName } = getSchema(component);
   return displayName;
@@ -87,4 +98,5 @@ export {
   filterByCategory,
   getModuleCategories,
   getModuleStyles,
+  getDataPackSchema,
 };

package/src/helpers/thumbnails.tsx

@@ -7,7 +7,7 @@ const imageExists = (src: string) => {
   return req.status !== 404;
 };
 
-const getThumbnailProps = (option: any, template: boolean, path?: string) => {
+const getThumbnailProps = (option: any, template: boolean, theme: string, path?: string) => {
   let PATH = "";
   let thumbnails = {
     "1x": "",
@@ -20,9 +20,9 @@ const getThumbnailProps = (option: any, template: boolean, path?: string) => {
     thumbnails["2x"] = imageExists(PATH) ? `${PATH}thumbnail@2x.png` : "/img/placeholder/thumbnail@2x.png";
   } else {
     if (template) {
-      thumbnails = getTemplateThumbnails(option);
+      thumbnails = getTemplateThumbnails(option, theme);
     } else {
-      thumbnails = getSchemaThumbnails(option);
+      thumbnails = getSchemaThumbnails(option, theme);
     }
   }
 

package/src/modules/Analytics/DimensionItem/index.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 import { IDimension } from "@ax/types";
 import { useModal } from "@ax/hooks";
-import { splitAndJoin, trimText } from "@ax/helpers";
+import { splitAndJoin, splitCamelCase, trimText } from "@ax/helpers";
 import { Modal } from "@ax/components";
 
 import DimensionPanel from "../DimensionPanel";
@@ -38,7 +38,7 @@ const Item = (props: IProps): JSX.Element => {
   return (
     <>
       <S.Component onClick={handleClick}>
-        <S.Name>{item.name}</S.Name><S.Values>{trimText(valuesText, 75)}</S.Values>
+        <S.Name>{splitCamelCase(item.name)}</S.Name><S.Values>{trimText(valuesText, 70)}</S.Values>
         <S.StyledActionMenu icon="more" options={dimensionOptions} tooltip="Dimension actions" />
       </S.Component>
       <DimensionPanel item={item} isOpen={isOpen} toggleModal={toggleModal} setDimensionItem={setDimensionItem} />