@griddo/ax 1.72.11 → 1.73.2

package/src/components/ConfigPanel/GlobalPageForm/index.tsx

@@ -10,7 +10,7 @@ const noteText = "This is Global content and you cannot edit it here. To do so,
 const noteTitle = "Global content";
 
 const GlobalPageForm = (props: IProps): JSX.Element => {
-  const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions } = props;
+  const { selectedTab, setSelectedTab, schema, pageTitle, setHistoryPush, actions, header, footer } = props;
   const tabs = ["content", "config"];
 
   const handleGetGlobalPage = async () => {
@@ -32,12 +32,28 @@ const GlobalPageForm = (props: IProps): JSX.Element => {
     options: { excludeDetailPages: true },
   };
 
+  const handleRestoreHeader = () =>
+    actions.restorePageNavigationAction && actions.restorePageNavigationAction("header");
+
+  const handleRestoreFooter = () =>
+    actions.restorePageNavigationAction && actions.restorePageNavigationAction("footer");
+
   return (
     <section>
       <Tabs tabs={tabs} active={selectedTab} setSelectedTab={setSelectedTab} />
-      <S.FieldWrapper>
+      <S.NoteWrapper>
         <NoteField value={{ text: noteText, title: noteTitle }} />
-      </S.FieldWrapper>
+      </S.NoteWrapper>
+      {selectedTab === "content" && header === 0 && (
+        <S.FieldWrapper>
+          This page doesn&apos;t have a header. Click <S.Link onClick={handleRestoreHeader}>here</S.Link> to restore it.
+        </S.FieldWrapper>
+      )}
+      {selectedTab === "content" && footer === 0 && (
+        <S.FieldWrapper>
+          This page doesn&apos;t have a footer. Click <S.Link onClick={handleRestoreFooter}>here</S.Link> to restore it.
+        </S.FieldWrapper>
+      )}
       {selectedTab === "content" && (
         <S.DataWrapper>
           <S.IconWrapper>
@@ -70,9 +86,12 @@ interface IProps {
   schema: ISchema;
   pageTitle?: string;
   setHistoryPush?: (path: string, isEditor: boolean) => void;
+  header?: number | null;
+  footer?: number | null;
   actions: {
     getGlobalFromLocalPageAction(): Promise<void>;
     saveCurrentSiteInfoAction(): Promise<void>;
+    restorePageNavigationAction(type: string): Promise<void>;
   };
 }
 

package/src/components/ConfigPanel/GlobalPageForm/style.tsx

@@ -1,7 +1,7 @@
 import { Button } from "@ax/components";
 import styled from "styled-components";
 
-const FieldWrapper = styled.div`
+const NoteWrapper = styled.div`
   margin-top: ${(p) => p.theme.spacing.s};
   margin-bottom: ${(p) => p.theme.spacing.m};
 `;
@@ -33,4 +33,20 @@ const StyledButton = styled(Button)`
   margin-left: auto;
 `;
 
-export { FieldWrapper, DataWrapper, IconWrapper, DataTitle, StyledButton };
+const FieldWrapper = styled.div`
+  margin-top: ${(p) => p.theme.spacing.s};
+  margin-bottom: ${(p) => p.theme.spacing.s};
+  background-color: ${(p) => p.theme.color?.uiBackground03};
+  padding: ${(p) => p.theme.spacing?.s};
+  border-radius: ${(p) => p.theme.radii?.s};
+  ${(p) => p.theme.textStyle?.uiXS};
+  color: ${(p) => p.theme.color?.textMediumEmphasis};
+`;
+
+const Link = styled.span`
+  cursor: pointer;
+  font-weight: bold;
+  color: ${(p) => p.theme.color?.interactive01};
+`;
+
+export { NoteWrapper, FieldWrapper, DataWrapper, IconWrapper, DataTitle, StyledButton, Link };

package/src/components/ConfigPanel/NavigationForm/Field/index.tsx

@@ -7,10 +7,8 @@ import { IRootState } from "@ax/types";
 
 import * as S from "./style";
 
-const pageEditorID = 0;
-
 const Field = (props: IProps) => {
-  const { type, defaults, updateEditorContent, selectedContent, theme } = props;
+  const { type, defaults, updateEditorContent, selectedContent, theme, removeNavigationFromPage } = props;
   const { isOpen, toggleModal } = useModal();
   const isDefault = selectedContent.setAsDefault;
 
@@ -27,21 +25,17 @@ const Field = (props: IProps) => {
   }
 
   const optionsType = `${type}s`;
-
-  const actionMenuOptions = [
-    {
-      label: "replace",
-      icon: "change",
-      action: toggleModal,
-    },
-  ];
-
   const actionMenuIcon = "more";
+  const pageEditorID = 0;
 
   const handleReplace = (option: any) => {
     updateEditorContent(pageEditorID, type, option.id);
   };
 
+  const handleRemove = () => {
+    removeNavigationFromPage(type);
+  };
+
   const setDefault = {
     title: `Set the default ${type}`,
     action: () => {
@@ -52,12 +46,28 @@ const Field = (props: IProps) => {
     checked: selectedContent.setAsDefault,
   };
 
+  const actionMenuOptions = [
+    {
+      label: "remove",
+      icon: "delete",
+      action: handleRemove,
+    },
+  ];
+
+  if (hasMultipleOptions) {
+    actionMenuOptions.unshift({
+      label: "replace",
+      icon: "change",
+      action: toggleModal,
+    });
+  }
+
   return (
     <>
       <S.Component isArray disabled>
         <S.Label containerInfo>{selectedContent.title}</S.Label>
         <S.HiddenButtonsWrapper>
-          {hasMultipleOptions && <ActionMenu options={actionMenuOptions} icon={actionMenuIcon} />}
+          <ActionMenu options={actionMenuOptions} icon={actionMenuIcon} />
         </S.HiddenButtonsWrapper>
       </S.Component>
       {hasMultipleOptions && (
@@ -87,6 +97,7 @@ interface IStateProps {
 
 interface IDispatchProps {
   updateEditorContent: (selectedEditorID: number, key: string, value: any) => void;
+  removeNavigationFromPage: (key: string) => void;
 }
 
 type IProps = IField & IStateProps & IDispatchProps;
@@ -98,6 +109,7 @@ const mapStateToProps = (state: IRootState) => ({
 
 const mapDispatchToProps = {
   updateEditorContent: pageEditorActions.updateEditorContent,
+  removeNavigationFromPage: pageEditorActions.removeNavigationFromPage,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Field);

package/src/components/ConfigPanel/index.tsx

@@ -34,6 +34,8 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
     userEditing,
     theme,
     lastElementAddedId,
+    header,
+    footer,
   } = props;
 
   const wrapperRef = useRef<HTMLDivElement>(null);
@@ -66,6 +68,8 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
           pageTitle={pageTitle}
           setHistoryPush={setHistoryPush}
           actions={actions}
+          header={header}
+          footer={footer}
         />
       );
     } else {
@@ -80,6 +84,8 @@ const ConfigPanel = (props: IStateProps): JSX.Element => {
           isGlobal={isGlobal}
           theme={theme}
           setHistoryPush={setHistoryPush}
+          header={header}
+          footer={footer}
         />
       );
     }
@@ -119,6 +125,8 @@ interface IStateProps {
   userEditing?: IUserEditing | null;
   theme: string;
   lastElementAddedId?: null | number;
+  header?: number | null;
+  footer?: number | null;
 }
 
 export default ConfigPanel;

package/src/components/ErrorCenter/index.tsx

@@ -4,7 +4,7 @@ import { Icon } from "@ax/components";
 
 import * as S from "./style";
 
-const ErrorCenter = (props: IProps): JSX.Element => {
+const ErrorCenter = (props: IErrorCenterProps): JSX.Element => {
   const { errors, actions } = props;
 
   const goToElement = (key: string) => {
@@ -26,9 +26,13 @@ const ErrorCenter = (props: IProps): JSX.Element => {
 
     const icon = item.type === "warning" ? "warning" : "alert";
     const isClicable = !!item.editorID || !!item.hasDeactivatedPackage || !!item.key;
-
     return (
-      <S.Wrapper key={`${item.editorID}${item.key}`} clickable={isClicable} onClick={handleClick}>
+      <S.Wrapper
+        data-testid="error-center-wrapper"
+        key={`${item.editorID}${item.key}`}
+        clickable={isClicable}
+        onClick={handleClick}
+      >
         <S.Header type={item.type}>
           <Icon name={icon} size="16" />
           <S.Type>{item.type}</S.Type>
@@ -51,7 +55,7 @@ const ErrorCenter = (props: IProps): JSX.Element => {
   );
 };
 
-interface IProps {
+export interface IErrorCenterProps {
   errors: IErrorItem[];
   actions?: {
     goToError(editorID: number | null, tab: string, template: boolean): void;

package/src/components/Fields/DateField/DatePickerInput/index.tsx

@@ -1,13 +1,13 @@
 import React, { useEffect, useState, forwardRef } from "react";
 
-import { isValidDate, stringToDate, getStringifyDateRange } from "@ax/helpers";
+import { isValidDate, stringToDate, getStringifyDateRange, getRange, isValidDateRange } from "@ax/helpers";
 
 import { Icon, IconAction } from "@ax/components";
 
 import * as S from "./style";
 
 const DatePickerInput = (props: IDatePickerProps, ref: any): JSX.Element => {
-  const { dates, onClick, handleChange, isOpen, error, disabled } = props;
+  const { dates, onClick, handleChange, isOpen, error, disabled, handleValidation, validators } = props;
   const { start, end } = dates;
   const placeholder = "dd/mm/yyyy";
 
@@ -19,15 +19,29 @@ const DatePickerInput = (props: IDatePickerProps, ref: any): JSX.Element => {
   const handleOnChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const inputValue = e.target.value;
     setValue(inputValue);
+    const range = getRange(inputValue);
+    const isRange = range.length === 2;
 
-    if (isValidDate(inputValue)) {
-      const date = stringToDate(inputValue);
-      handleChange([date, null]);
-    } else if (!inputValue) {
-      handleChange([null, null]);
+    if (isRange && isValidDateRange(inputValue)) {
+      const start = stringToDate(range[0]);
+      const end = stringToDate(range[1]);
+      handleChange([start, end]);
+    } else {
+      if (isValidDate(inputValue)) {
+        const date = stringToDate(inputValue);
+        handleChange([date, null]);
+      } else if (!inputValue) {
+        handleChange([null, null]);
+      }
     }
   };
 
+  const handleOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    const inputValue = e.target.value;
+
+    handleValidation && handleValidation(inputValue, validators);
+  };
+
   const CalendarIcon = <IconAction icon="calendar" onClick={onClick} />;
   const CloseIcon = (
     <S.IconWrapper>
@@ -37,7 +51,13 @@ const DatePickerInput = (props: IDatePickerProps, ref: any): JSX.Element => {
 
   return (
     <S.InputWrapper error={error}>
-      <S.Input value={value || ""} placeholder={placeholder} onChange={handleOnChange} disabled={disabled} />
+      <S.Input
+        value={value || ""}
+        placeholder={placeholder}
+        onChange={handleOnChange}
+        onBlur={handleOnBlur}
+        disabled={disabled}
+      />
       <S.ButtonWrapper>{isOpen ? CloseIcon : CalendarIcon}</S.ButtonWrapper>
     </S.InputWrapper>
   );
@@ -50,6 +70,8 @@ interface IDatePickerProps {
   isOpen: boolean;
   error?: boolean;
   disabled?: boolean;
+  handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
+  validators?: Record<string, unknown>;
 }
 
 export default forwardRef(DatePickerInput);

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

@@ -28,11 +28,14 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
     selectsRange = false,
     disabled,
     handleValidation,
+    validators,
   } = props;
 
   const currentDate = new Date();
   const defaultValue = mandatory ? dateToString(currentDate, "yyyy/MM/dd") : null;
   const stringDate = value && typeof value === "number" ? dateToString(new Date(value * 1000)) : value;
+  const dateValidators = { format: "date", ...validators };
+
   const dateValue = stringDate && (isValidDate(stringDate) || isValidDateRange(stringDate)) ? stringDate : defaultValue;
   const isRange = dateValue && dateValue.split(" - ").length > 1;
   const { isOpen, toggleModal } = useModal();
@@ -77,7 +80,7 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
     setDates(rangeDates);
     onChange(selectedDate);
 
-    handleValidation && handleValidation(start);
+    handleValidation && handleValidation(selectedDate, dateValidators);
   };
 
   const { start, end } = dates;
@@ -91,6 +94,8 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
       isOpen={isOpen}
       error={error}
       disabled={disabled}
+      handleValidation={handleValidation}
+      validators={dateValidators}
     />
   );
 
@@ -126,7 +131,8 @@ export interface IDateFieldProps {
   futureDate?: boolean;
   pastDate?: boolean;
   disabled?: boolean;
-  handleValidation?: (value: string) => void;
+  handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
+  validators?: Record<string, unknown>;
 }
 
 export default DateField;

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

@@ -64,6 +64,7 @@ const Select = (props: ISelectProps): JSX.Element => {
         hasEmptyOption={hasEmptyOption}
         onInputChange={handleInputChange}
         alignRight={alignRight}
+        aria-label={name}
       />
     </div>
   );

package/src/components/Flag/index.tsx

@@ -10,30 +10,32 @@ const getImage = (name: string) => {
     pt: "Pt_PT",
   };
   const filename = simpleIcons[name?.toLowerCase()] || name;
+
   try {
     return require(`./components/${filename}`).default;
   } catch (err) {
     return null;
   }
 };
-export default class Flag extends React.Component<IProps> {
-  public render() {
-    const name = this.props.name.charAt(0).toUpperCase() + this.props.name.slice(1);
+const Flag = (props: IProps) => {
+  const name = props.name.charAt(0).toUpperCase() + props.name.slice(1);
 
-    const size = this.props.size ? this.props.size : "24";
+  const size = props.size ? props.size : "24";
 
-    const Svg = getImage(name);
+  const Svg = getImage(name);
 
-    if (Svg) {
-      return <Svg height={size} width={size} viewBox="0 0 512 512" />;
-    }
-    return null;
+  if (Svg) {
+    return <Svg height={size} width={size} viewBox="0 0 512 512" />;
   }
-}
 
-interface IStateProps {
+  return null;
+};
+
+export interface IStateProps {
   name: string;
   size?: string;
 }
 
 type IProps = IStateProps;
+
+export default Flag;

package/src/components/FloatingMenu/index.tsx

@@ -1,10 +1,10 @@
-import React, { useRef, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import { useHandleClickOutside } from "@ax/hooks";
 
 import * as S from "./style";
 
-const FloatingMenu = (props: IProps) => {
+const FloatingMenu = (props: IFloatingProps) => {
   const {
     children,
     isInAppBar,
@@ -13,13 +13,23 @@ const FloatingMenu = (props: IProps) => {
     closeOnSelect = true,
     isCheckGroup,
     reactiveToHover,
-    offset
+    offset,
   } = props;
   const wrapper = useRef<any>(null);
   const button = useRef<any>(null);
   const menuOptions = useRef<any>(null);
   const [isOpen, setOpen] = useState(false);
 
+  useEffect(() => {
+    if (isOpen && menuOptions.current) {
+      const bounding = menuOptions.current.getBoundingClientRect();
+      if (bounding.bottom > (window.innerHeight || document.documentElement.clientHeight)) {
+        menuOptions.current.scrollIntoView({ block: "end", behavior: "smooth" });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isOpen]);
+
   const handleClickOutside = (e: any) => {
     if (wrapper.current.contains(e.target)) {
       return;
@@ -51,8 +61,7 @@ const FloatingMenu = (props: IProps) => {
   const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) =>
     reactiveToHover && !isOpen ? handleClick(e) : null;
 
-  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) =>
-    reactiveToHover && isOpen && setOpen(false);
+  const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => reactiveToHover && isOpen && setOpen(false);
 
   useHandleClickOutside(isOpen, handleClickOutside);
 
@@ -67,8 +76,15 @@ const FloatingMenu = (props: IProps) => {
       <S.ButtonWrapper ref={button} data-testid="floating-menu-button">
         <Button />
       </S.ButtonWrapper>
+
       {isOpen && (
-        <S.MenuWrapper isInAppBar={isInAppBar} ref={menuOptions} position={position} offset={offset} data-testid="floating-menu-wrapper">
+        <S.MenuWrapper
+          isInAppBar={isInAppBar}
+          ref={menuOptions}
+          position={position}
+          offset={offset}
+          data-testid="floating-menu-wrapper"
+        >
           <S.Menu>{children}</S.Menu>
         </S.MenuWrapper>
       )}
@@ -76,7 +92,7 @@ const FloatingMenu = (props: IProps) => {
   );
 };
 
-interface IProps {
+export interface IFloatingProps {
   children: any;
   Button: any;
   isInAppBar?: boolean;

package/src/components/FloatingMenu/style.tsx

@@ -5,6 +5,7 @@ const Wrapper = styled.div``;
 const ButtonWrapper = styled.div`
   display: flex;
   align-items: center;
+  cursor: pointer;
 `;
 
 const MenuWrapper = styled.div<{ isInAppBar?: boolean; position: string; offset?: number }>`

package/src/components/FloatingPanel/index.tsx

@@ -6,7 +6,7 @@ import { IconAction } from "@ax/components";
 
 import * as S from "./style";
 
-const FloatingPanel = (props: IProps): JSX.Element | null => {
+const FloatingPanel = (props: IFloatingPanelProps): JSX.Element | null => {
   const {
     children,
     title,
@@ -40,7 +40,13 @@ const FloatingPanel = (props: IProps): JSX.Element | null => {
   };
 
   return createPortal(
-    <S.Wrapper ref={node} isOpen={isOpen} isOpenedSecond={isOpenedSecond} secondary={secondary}>
+    <S.Wrapper
+      data-testid="floating-panel"
+      ref={node}
+      isOpen={isOpen}
+      isOpenedSecond={isOpenedSecond}
+      secondary={secondary}
+    >
       <S.Header>
         <S.Title>{title}</S.Title>
         {!isOpenedSecond && (
@@ -55,7 +61,7 @@ const FloatingPanel = (props: IProps): JSX.Element | null => {
   );
 };
 
-interface IProps {
+export interface IFloatingPanelProps {
   isOpen: boolean;
   isOpenedSecond?: boolean;
   children: JSX.Element[] | JSX.Element | boolean;

package/src/components/GuardModal/index.tsx

@@ -4,7 +4,7 @@ import { Modal } from "@ax/components";
 
 import * as S from "./style";
 
-const GuardModal = (props: IProps): JSX.Element => {
+const GuardModal = (props: IGuardModalProps): JSX.Element => {
   const { isOpen, discardChanges, toggleModal } = props;
 
   const mainAction = {
@@ -33,12 +33,12 @@ const GuardModal = (props: IProps): JSX.Element => {
       mainAction={mainAction}
       secondaryAction={secondaryAction}
     >
-      {<S.ModalContent>{modalText}</S.ModalContent>}
+      {<S.ModalContent data-testid='guard-modal-content'>{modalText}</S.ModalContent>}
     </Modal>
   );
 };
 
-interface IProps {
+export interface IGuardModalProps {
   isOpen: boolean;
   discardChanges: () => void;
   toggleModal: () => void;

package/src/components/Icon/index.tsx

@@ -7,6 +7,7 @@ const getImage = (name: string) => {
     return null;
   }
 };
+
 const Icon = (props: IProps) => {
   const name =
     props.name &&
@@ -28,7 +29,7 @@ const Icon = (props: IProps) => {
   return null;
 };
 
-interface IStateProps {
+export interface IStateProps {
   name: string;
   size?: string;
   fill?: string;

package/src/components/IconAction/index.tsx

@@ -27,11 +27,11 @@ const IconAction = (props: IIconActionProps): JSX.Element => {
   );
 };
 
-interface IIconActionProps {
+export interface IIconActionProps {
   icon: string;
   disabled?: boolean;
-  size?: "s" | "m" | undefined;
-  onClick?: any;
+  size?: "s" | "m";
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
   inversed?: boolean;
 }
 

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

@@ -124,7 +124,9 @@ const AppBar = (props: IProps): JSX.Element => {
 
   const ErrorCenterBtn = () => (
     <S.ErrorWrapper>
-      <Icon name="alert" size="24" />
+      <Tooltip content="Error center" bottom>
+        <Icon name="alert" size="24" />
+      </Tooltip>
     </S.ErrorWrapper>
   );
 

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

@@ -92,6 +92,7 @@ const LanguageWrapper = styled.div`
   position: relative;
   display: flex;
   align-items: center;
+  cursor: pointer;
 `;
 
 const FlagWrapper = styled.div``;
@@ -113,6 +114,7 @@ const Separator = styled.div`
 const IconStatusWrapper = styled.div`
   position: relative;
   height: ${(p) => p.theme.spacing.m};
+  cursor: pointer;
 `;
 
 const Header = styled.section<{ inversed?: boolean }>`
@@ -169,6 +171,7 @@ const ErrorWrapper = styled.div`
     path {
       fill: ${(p) => p.theme.color.error};
     }
+    cursor: pointer;
   }
 `;
 

package/src/components/MenuItem/index.tsx

@@ -13,7 +13,7 @@ const MenuItem = (props: IMenuItemProps): JSX.Element => {
     }
   };
 
-  const handleExtendedAction = (e: React.MouseEvent<HTMLLIElement>) => {
+  const handleExtendedAction = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     extendedAction && extendedAction.action();
   };

package/src/components/Modal/index.tsx

@@ -40,7 +40,7 @@ const Modal = (props: IModalProps): JSX.Element | null => {
     ? createPortal(
         <>
           <S.ModalOverlay />
-          <S.ModalWrapper>
+          <S.ModalWrapper data-testid="modal-wrapper">
             <S.Modal size={size}>
               <S.ModalHeader>
                 {titleContent}

package/src/components/Notification/SubNotification/index.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import { Icon } from "@ax/components";
+
+import * as S from "./style";
+
+const SubNotification = (props: ISubNotificationProps): JSX.Element => {
+  const { text } = props;
+
+  const [isVisible, setIsVisible] = useState(true);
+
+  const handleClose = () => {
+    setIsVisible(false);
+  };
+
+  return (
+    <S.Wrapper isVisible={isVisible} data-testid="subnotification-wrapper">
+      <S.Row>
+        <S.Text>{text}</S.Text>
+        <S.ActionsWrapper>
+          <S.CloseWrapper onClick={handleClose} data-testid="subnotification-close-button">
+            <Icon name="close" size="16" />
+          </S.CloseWrapper>
+        </S.ActionsWrapper>
+      </S.Row>
+    </S.Wrapper>
+  );
+};
+
+export interface ISubNotificationProps {
+  text: string;
+}
+
+export default SubNotification;