@griddo/ax 10.6.9 → 10.6.11

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "10.6.9",
+  "version": "10.6.11",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -233,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "86f3dfd0dd7500fbe912ffeea5f36589dce230e5"
+  "gitHead": "18bf6b513f974ad898ecc8a13b73d4285a1025dc"
 }

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

@@ -18,18 +18,29 @@ const CheckField = (props: ICheckFieldProps): JSX.Element => {
     className,
     inversed = false,
     light = false,
+    setHoverCheck,
   } = props;
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const isChecked = e.target.checked;
-    if (onChange) {
-      onChange({ value, isChecked });
-    }
+    onChange && onChange({ value, isChecked });
   };
 
+  const handleMouseOver = () => setHoverCheck && setHoverCheck(true);
+
+  const handleMouseLeave = () => setHoverCheck && setHoverCheck(false);
+
   return (
     <S.Wrapper className={className}>
-      <S.Label data-testid="check-field-label" disabled={disabled} inversed={inversed} hasText={!!title}>
+      <S.Label
+        data-testid="check-field-label"
+        disabled={disabled}
+        inversed={inversed}
+        hasText={!!title}
+        onMouseOver={handleMouseOver}
+        onFocus={handleMouseOver}
+        onMouseLeave={handleMouseLeave}
+      >
         {icon ? (
           <S.IconLabelWrapper data-testid="check-field-icon-label">
             <S.IconWrapper>
@@ -76,6 +87,7 @@ export interface ICheckFieldProps {
   inversed?: boolean;
   className?: string;
   light?: boolean;
+  setHoverCheck?: (state: boolean) => void;
 }
 
 export default CheckField;

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

@@ -29,6 +29,7 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
     disabled,
     handleValidation,
     validators,
+    editorID,
   } = props;
 
   const currentDate = new Date();
@@ -50,15 +51,19 @@ const DateField = (props: IDateFieldProps): JSX.Element => {
 
   const dateFormat = "dd/MM/yyyy";
 
-  const minDate = futureDate ? initialDate.start : null;
-  const maxDate = pastDate ? initialDate.start : null;
+  const minDate = futureDate ? currentDate : null;
+  const maxDate = pastDate ? currentDate : null;
 
   const [dates, setDates] = useState(initialDate);
 
+  useEffect(() => {
+    setDates(initialDate);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorID]);
+
   useEffect(() => {
     const { start, end } = initialDate;
     handleOnChange([start, end]);
-
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -133,6 +138,7 @@ export interface IDateFieldProps {
   disabled?: boolean;
   handleValidation?: (value: string, validators?: Record<string, unknown>) => void;
   validators?: Record<string, unknown>;
+  editorID: number;
 }
 
 export default DateField;

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

@@ -1,17 +1,22 @@
-import React, { memo, useState } from "react";
+import React, { memo, useEffect, useState } from "react";
 import { Select, Icon } from "@ax/components";
 import HourInput from "./HourInput";
 
 import * as S from "./style";
 
 const TimeField = (props: IProps) => {
-  const { value, error, onChange, disabled } = props;
+  const { value, error, onChange, disabled, editorID } = props;
 
   const safeValue = !value || !value.length ? "00:00 am" : value;
   const splitValue = safeValue.split(" ");
   const initValue = { time: splitValue[0], meridian: splitValue[1] };
   const [state, setState] = useState(initValue);
 
+  useEffect(() => {
+    setState(initValue);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [editorID]);
+
   const handleChange = (newValue: string) => {
     setState({ ...state, time: newValue });
     onChange(`${newValue} ${state.meridian}`);
@@ -53,6 +58,7 @@ interface IProps {
   error?: boolean;
   onChange: (value: string) => void;
   disabled?: boolean;
+  editorID: number;
 }
 
 export default memo(TimeField);

package/src/components/Icon/components/CancelEvent.js

@@ -0,0 +1,10 @@
+import * as React from "react";
+const SvgCancelEvent = (props) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={24} height={24} fill="none" {...props}>
+    <path
+      fill="#5057FF"
+      d="M19 3h-1V1h-2v2H8V1H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2Zm0 16H5V9h14v10ZM5 7V5h14v2H5Zm3.23 9.41 1.06 1.06 2.44-2.44 2.44 2.44 1.06-1.06-2.44-2.44 2.44-2.44-1.06-1.06-2.44 2.44-2.44-2.44-1.06 1.06 2.44 2.44-2.44 2.44Z"
+    />
+  </svg>
+);
+export default SvgCancelEvent;

package/src/components/Icon/svgs/cancel-event.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 3H18V1H16V3H8V1H6V3H5C3.9 3 3 3.9 3 5V19C3 20.1 3.9 21 5 21H19C20.1 21 21 20.1 21 19V5C21 3.9 20.1 3 19 3ZM19 19H5V9H19V19ZM5 7V5H19V7H5ZM8.23 16.41L9.29 17.47L11.73 15.03L14.17 17.47L15.23 16.41L12.79 13.97L15.23 11.53L14.17 10.47L11.73 12.91L9.29 10.47L8.23 11.53L10.67 13.97L8.23 16.41Z" fill="#5057FF"/>
+</svg>

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

@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
 import { IErrorItem } from "@ax/types";
-import { trimText } from "@ax/helpers";
+import { getScheduleFormatDate, trimText } from "@ax/helpers";
 import { useModal } from "@ax/hooks";
 import {
   Button,
@@ -52,6 +52,7 @@ const AppBar = (props: IProps): JSX.Element => {
     searchValue,
     isDirty,
     exportAction,
+    scheduledPublication,
   } = props;
 
   const publishedTooltip: any = {
@@ -60,9 +61,11 @@ const AppBar = (props: IProps): JSX.Element => {
     offline: "Offline",
     "offline-pending": "Offline pending",
     modified: "Live & Modified",
+    scheduled: "Scheduled publication",
   };
 
   const fixedClass = fixedAppBar ? "fixed" : "";
+  const isScheduledPub = !!scheduledPublication && pageStatus === "scheduled";
 
   const { isOpen, toggleModal } = useModal();
   const [langSelected, setLangSelected] = useState(language);
@@ -268,6 +271,9 @@ const AppBar = (props: IProps): JSX.Element => {
               <Tooltip content={publishedTooltip[pageStatus]} bottom>
                 <PageStatus />
               </Tooltip>
+              {isScheduledPub && (
+                <S.ScheduledDate inversed={inversed}>{getScheduleFormatDate(scheduledPublication)}</S.ScheduledDate>
+              )}
             </S.IconStatusWrapper>
             {(rightButton || rightLineButton) && <S.Separator />}
           </>
@@ -348,6 +354,7 @@ export interface IAppBarProps {
   searchValue?: string;
   isDirty?: boolean;
   exportAction?(formats: (number | string)[]): void;
+  scheduledPublication?: string | null;
 }
 
 type IProps = IAppBarProps & RouteComponentProps;

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

@@ -53,7 +53,6 @@ const Subtitle = styled.span`
 
 const ActionText = styled.span`
   padding-left: ${(p) => p.theme.spacing.xs};
-  margin-left: ${(p) => p.theme.spacing.xxs};
 `;
 
 const ActionItem = styled.li`
@@ -130,10 +129,12 @@ const Separator = styled.div`
 `;
 
 const IconStatusWrapper = styled.div<{ last: boolean }>`
+  display: flex;
   position: relative;
   height: ${(p) => p.theme.spacing.m};
   cursor: pointer;
   margin-right: ${(p) => (p.last ? p.theme.spacing.xs : "0")};
+  align-items: center;
 `;
 
 const Header = styled.section<{ inversed?: boolean }>`
@@ -220,6 +221,12 @@ const ModalContent = styled.div`
 
 const StatusBtn = styled.span``;
 
+const ScheduledDate = styled.div<{ inversed?: boolean }>`
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => (p.inversed ? p.theme.color.textHighEmphasisInverse : p.theme.color.interactive01)};
+  margin-left: ${(p) => p.theme.spacing.xs};
+`;
+
 export {
   ActionMenu,
   Header,
@@ -244,4 +251,5 @@ export {
   StatusBtn,
   HelpText,
   ModalContent,
+  ScheduledDate,
 };

package/src/components/MainWrapper/index.tsx

@@ -57,6 +57,7 @@ export interface IWrapperProps {
   searchValue?: string;
   isDirty?: boolean;
   exportAction?(formats: (number | string)[]): void;
+  scheduledPublication?: string | null;
 }
 
 export default MainWrapper;

package/src/components/Modal/index.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from "react";
+import React, { memo, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { IconAction } from "@ax/components";
 import Button from "../Button";
@@ -19,6 +19,22 @@ const Modal = (props: IModalProps): JSX.Element | null => {
     isChild,
   } = props;
 
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        hide();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleKeyPress);
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleKeyPress);
+    };
+  }, [isOpen, hide]);
+
   const titleContent = title ? <S.Title>{title}</S.Title> : "";
 
   const mainActionButton = mainAction ? (

package/src/components/ScheduleModal/index.tsx

@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+
+import { IModal } from "@ax/types";
+import { Modal, FieldsBehavior } from "@ax/components";
+import { stringToDate } from "@ax/helpers";
+
+import * as S from "./style";
+
+const ScheduleModal = (props: IScheduleModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction, scheduleDate, setScheduleDate } = props;
+
+  const [error, setError] = useState(false);
+
+  const handleDateChange = (dateVal: string) => {
+    setScheduleDate({ ...scheduleDate, date: dateVal });
+    const now = new Date();
+    now.setHours(0, 0, 0, 0);
+    const date = stringToDate(dateVal);
+    if (date >= now) {
+      setError(false);
+    } else {
+      setError(true);
+    }
+  };
+
+  const handleTimeChange = (time: string) => setScheduleDate({ ...scheduleDate, time });
+
+  const modalAction: any = { ...mainModalAction, disabled: error };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Schedule publication"
+      secondaryAction={secondaryModalAction}
+      mainAction={modalAction}
+      size="M"
+      height={330}
+      overflow="visible"
+    >
+      <S.ModalContent>
+        <p>
+          You can schedule the publication of your page at a <strong>specific date and time</strong>.{" "}
+          <strong>The selected time is approximate</strong> due to our structural publication process.
+        </p>
+        <S.ModalFields>
+          <FieldsBehavior
+            title="Date"
+            name="date"
+            fieldType="DateField"
+            value={scheduleDate.date}
+            onChange={handleDateChange}
+            validators={{ dateFormat: "futureDate" }}
+            mandatory={true}
+            futureDate={true}
+          />
+          <FieldsBehavior
+            title="Time"
+            name="time"
+            fieldType="TimeField"
+            value={scheduleDate.time}
+            onChange={handleTimeChange}
+            helptext="12 hour time format"
+            mandatory={true}
+          />
+        </S.ModalFields>
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+const CancelScheduleModal = (props: IModal): JSX.Element => {
+  const { isOpen, toggleModal, mainModalAction, secondaryModalAction } = props;
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      hide={toggleModal}
+      title="Cancel schedule publication"
+      secondaryAction={secondaryModalAction}
+      mainAction={mainModalAction}
+      size="S"
+      height={240}
+    >
+      <S.ModalContent>
+        <p>
+          Are you sure you want to cancel the scheduled publication? Once canceled,{" "}
+          <strong>the page will not be published at the selected time</strong>.
+        </p>
+      </S.ModalContent>
+    </Modal>
+  );
+};
+
+interface IScheduleModal extends IModal {
+  scheduleDate: { date: string; time: string };
+  setScheduleDate: (scheduleDate: { date: string; time: string }) => void;
+}
+
+export { ScheduleModal, CancelScheduleModal };

package/src/components/ScheduleModal/style.tsx

@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+const ModalContent = styled.div`
+  padding: ${(p) => p.theme.spacing.m};
+
+  p {
+    margin-bottom: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+const ModalFields = styled.div`
+  display: flex;
+  width: 100%;
+  & > div:nth-child(odd) {
+    margin-right: ${(p) => p.theme.spacing.m};
+  }
+`;
+
+export { ModalContent, ModalFields };

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

@@ -24,7 +24,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
   const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : initialState;
   const [selectedValue, setSelectedValue] = useState(parsedValue);
   const [options, setOptions] = useState(filters);
-  const basicStatus = ["offline", "active"];
+  const basicStatus = ["offline", "active", "scheduled"];
 
   useEffect(() => {
     const parsedValue = Array.isArray(value) && value.length ? value.map((value) => value.value) : initialState;

package/src/components/index.tsx

@@ -99,6 +99,7 @@ import Pagination from "./Pagination";
 import ProgressBar from "./ProgressBar";
 import ReorderArrows from "./ReorderArrows";
 import ResizePanel from "./ResizePanel";
+import { ScheduleModal, CancelScheduleModal } from "./ScheduleModal";
 import SearchField from "./SearchField";
 import SearchTagsBar from "./SearchTagsBar";
 import SideModal from "./SideModal";
@@ -212,6 +213,8 @@ export {
   ProgressBar,
   ReorderArrows,
   ResizePanel,
+  ScheduleModal,
+  CancelScheduleModal,
   SearchField,
   SearchTagsBar,
   SideModal,

package/src/containers/PageEditor/actions.tsx

@@ -653,7 +653,7 @@ function duplicatePage(pageID: number, data: any, siteID?: number): (dispatch: D
         handleSuccess: (data: any) => {
           if (!siteID) {
             dispatch(setCurrentPageID(data.id));
-            dispatch(setCurrentPageStatus("offline"));
+            dispatch(setCurrentPageStatus(pageStatus.OFFLINE));
           }
           return true;
         },
@@ -1460,6 +1460,25 @@ function setIsTranslated(isTranslated: boolean): (dispatch: Dispatch) => Promise
   };
 }
 
+function schedulePublication(date: string | null): (dispatch: Dispatch, getState: any) => Promise<boolean> {
+  return async (dispatch, getState) => {
+    try {
+      const {
+        pageEditor: { editorContent },
+      } = getState();
+
+      const status = date ? pageStatus.SCHEDULED : pageStatus.OFFLINE;
+      const updatedEditorContent = { ...editorContent, publicationScheduled: date };
+
+      dispatch(setEditorContent(updatedEditorContent));
+      return await savePage(false, { status })(dispatch, getState);
+    } catch (e) {
+      console.log("Error", e);
+      return false;
+    }
+  };
+}
+
 export {
   setEditorContent,
   setTemplate,
@@ -1511,4 +1530,5 @@ export {
   getPageSummary,
   getPageTranslation,
   setIsTranslated,
+  schedulePublication,
 };

package/src/containers/PageEditor/interfaces.tsx

@@ -151,6 +151,7 @@ export enum pageStatus {
   UPLOAD_PENDING = "upload-pending",
   OFFLINE_PENDING = "offline-pending",
   MODIFIED = "modified",
+  SCHEDULED = "scheduled",
 }
 
 type EditorActionsCreators = ISetEditorContent;

package/src/forms/validators.tsx

@@ -105,14 +105,15 @@ const VALIDATORS = {
       return { isValid: true, errorCode: "" };
     }
     const now = new Date();
+    now.setHours(0, 0, 0, 0);
     const date = stringToDate(val);
     switch (type) {
       case "futureDate": {
-        const isValid = isValidDate(val) && dateToString(date) >= dateToString(now);
+        const isValid = isValidDate(val) && date >= now;
         return { isValid, errorCode: "ERR010" };
       }
       case "pastDate": {
-        const isValid = isValidDate(val) && dateToString(date) <= dateToString(now);
+        const isValid = isValidDate(val) && date <= now;
         return { isValid, errorCode: "ERR011" };
       }
       default:

package/src/helpers/dates.tsx

@@ -79,6 +79,11 @@ const getDaysAgo = (date: Date): string => {
   return formatDistanceToNowStrict(dateObj, { addSuffix: true });
 };
 
+const getScheduleFormatDate = (date: string): string => {
+  const dateObj = parse(date, "dd/MM/yyyy HH:mm:ss", new Date());
+  return dateToString(dateObj, "dd/MM/yy · HH:mm");
+};
+
 export {
   dateToString,
   stringToDate,
@@ -91,4 +96,5 @@ export {
   getFormattedDateWithTimezone,
   getDaysAgo,
   getRange,
+  getScheduleFormatDate,
 };

package/src/helpers/index.tsx

@@ -90,6 +90,7 @@ import {
   getFormattedDateWithTimezone,
   getDaysAgo,
   getRange,
+  getScheduleFormatDate,
 } from "./dates";
 
 import { imageResizeCropAndCompress, compressImage } from "./imageResize";
@@ -165,6 +166,7 @@ export {
   getFormattedDateWithTimezone,
   getDaysAgo,
   getRange,
+  getScheduleFormatDate,
   imageResizeCropAndCompress,
   compressImage,
   validateEmail,

package/src/hooks/bulk.tsx

@@ -17,13 +17,14 @@ const useBulkSelection = (itemIDs: any[]) => {
   const [checkState, setCheckState] = useState<Record<string, boolean>>({
     isAllSelected: false,
     indeterminate: false,
+    hoverCheck: false,
   });
 
   useEffect(() => {
     const isAllSelected = areAllItemsSelected(items);
     const indeterminate = !isAllSelected && areItemsSelected(items);
 
-    setCheckState({ isAllSelected, indeterminate });
+    setCheckState({ isAllSelected, indeterminate, hoverCheck: false });
 
     // eslint-disable-next-line
   }, [selectedItems, items]);
@@ -126,6 +127,8 @@ const useBulkSelection = (itemIDs: any[]) => {
     });
   };
 
+  const setHoverCheck = (value: boolean) => setCheckState((state) => ({ ...state, hoverCheck: value }));
+
   return {
     resetBulkSelection,
     selectedItems,
@@ -134,6 +137,7 @@ const useBulkSelection = (itemIDs: any[]) => {
     checkState,
     addToBulkSelection,
     selectAllItems,
+    setHoverCheck,
   };
 };
 

package/src/modules/Categories/CategoriesList/BulkHeader/TableHeader/index.tsx

@@ -1,24 +1,27 @@
 import React from "react";
 
-import { CheckField, TableCounter, TranslationsFilter } from "@ax/components";
+import { CheckField, TableCounter, Tooltip, TranslationsFilter } from "@ax/components";
 import { IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
-const TableHeader = (props: IProps) => {
-  const { totalItems, selectAllItems, isScrolling, filterItems, filterValues } = props;
+const TableHeader = (props: IProps): JSX.Element => {
+  const { totalItems, selectAllItems, isScrolling, filterItems, filterValues, setHoverCheck, checkState } = props;
   return (
     <S.TableHeader isScrolling={isScrolling}>
       <S.CheckHeader>
-        <CheckField
-          key="selectAll"
-          name="selectAll"
-          value="selectAll"
-          onChange={selectAllItems}
-          checked={false}
-          disabled={false}
-          error={false}
-        />
+        <Tooltip content="Select All Items">
+          <CheckField
+            key="selectAll"
+            name="selectAll"
+            value="selectAll"
+            onChange={selectAllItems}
+            checked={checkState.isAllSelected || checkState.hoverCheck}
+            disabled={false}
+            error={false}
+            setHoverCheck={setHoverCheck}
+          />
+        </Tooltip>
       </S.CheckHeader>
       <S.NameHeader>Name</S.NameHeader>
       <S.CodeHeader>Code</S.CodeHeader>
@@ -39,6 +42,8 @@ interface IProps {
   selectAllItems: () => void;
   filterValues: Record<string, IQueryValue[]>;
   filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
+  setHoverCheck: (state: boolean) => void;
+  checkState: Record<string, boolean>;
 }
 
 export default TableHeader;

package/src/modules/Categories/CategoriesList/BulkHeader/index.tsx

@@ -14,6 +14,7 @@ const BulkHeader = (props: IProps): JSX.Element => {
     bulkActions,
     filterItems,
     filterValues,
+    setHoverCheck,
   } = props;
 
   return showBulk ? (
@@ -30,13 +31,15 @@ const BulkHeader = (props: IProps): JSX.Element => {
       isScrolling={isScrolling}
       filterItems={filterItems}
       filterValues={filterValues}
+      setHoverCheck={setHoverCheck}
+      checkState={checkState}
     />
   );
 };
 
 interface IProps {
   showBulk: boolean;
-  checkState: any;
+  checkState: Record<string, boolean>;
   selectItems: () => void;
   selectAllItems: () => void;
   totalItems: number;
@@ -44,6 +47,7 @@ interface IProps {
   bulkActions: { icon: string; text: string; action: () => void }[];
   filterValues: Record<string, IQueryValue[]>;
   filterItems: (filterPointer: string, filtersSelected: IQueryValue[]) => void;
+  setHoverCheck: (state: boolean) => void;
 }
 
 export default BulkHeader;

package/src/modules/Categories/CategoriesList/CategoryItem/index.tsx

@@ -28,6 +28,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
     dragHandleProps,
     icon,
     deleteCategoryGroup,
+    hoverCheck,
   } = props;
 
   const { isOpen, toggleModal } = useModal();
@@ -193,7 +194,7 @@ const CategoryItem = (props: ICategoryItemProps): JSX.Element => {
           <S.IconWrapper>{icon}</S.IconWrapper>
         </S.HandleCell>
         <S.CheckCell role="cell">
-          <CheckField name="check" value={category.id} checked={isSelected} onChange={handleOnChange} />
+          <CheckField name="check" value={category.id} checked={isSelected || hoverCheck} onChange={handleOnChange} />
         </S.CheckCell>
         <S.NameCell role="cell" onClick={handleClick} clickable={allowedToEditTaxonomy} isGroup={isGroup}>
           {isGroup && (
@@ -263,6 +264,7 @@ interface IProps {
   currentSiteID: number | null;
   icon: JSX.Element;
   dragHandleProps?: any;
+  hoverCheck?: boolean;
 }
 
 interface IDispatchProps {