pcm-shared-components 2.0.18 → 2.0.21

package/dist/components/Timelines/ReservationTimelineComponent/index.js

@@ -1,966 +0,0 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-import React, { useRef, useState, useEffect } from 'react';
-import Timeline, { TimelineMarkers, CustomMarker, TimelineHeaders, DateHeader, SidebarHeader } from 'react-calendar-timeline';
-import 'react-calendar-timeline/lib/Timeline.css';
-import './css/styles.css';
-import './css/header.css';
-import moment from 'moment';
-import Tooltip from 'react-tooltip-lite';
-// import TimelinePopUp from './components/TimelinePopUp';  **************** NOTE NOW USING TimelinePopUpComponent *************************
-import SearchLotsTextBox from './components/SearchLotsTextBox';
-import IconButton from '@mui/material/IconButton';
-import ZoomIn from '@mui/icons-material/ZoomIn';
-import ZoomOut from '@mui/icons-material/ZoomOut';
-import Edit from '@mui/icons-material/Edit';
-import Close from '@mui/icons-material/Close';
-import * as MDIIcon from '@mdi/react';
-import { mdiCursorMove } from '@mdi/js';
-import { DATE_TIME_FORMAT } from 'app/tools/date_formatter';
-import { doDatesConflictWithOtherReservations } from 'app/tools/date_overlap';
-import { makeStyles } from '@mui/styles';
-// import i18next from 'i18next';
-import PropTypes from 'prop-types';
-import { ThemeProvider } from '@mui/system';
-import { createTheme, useTheme } from '@mui/material/styles';
-const ZERO_HOUR = {
-  hour: 0
-};
-let focus_debounce, new_res_debounce;
-const newItemId = -1;
-const useStyles = makeStyles(() => ({
-  timelineWrapper: {
-    fontFamily: 'sans-serif',
-    fontSize: 'large',
-    textAlign: 'center',
-    maxWidth: '100%',
-    maxHeight: '90vh !important',
-    height: ({
-      height
-    }) => height,
-    padding: ({
-      padding
-    }) => padding,
-    overflow: 'scroll'
-  }
-}));
-
-/**
- * ## Importing the component in your project
- * 
- ```js
-
- import {ReservationTimelineComponent} from 'pcm-shared-components';
- 
- ```
- * 
- */
-export const ReservationTimelineComponent = props => {
-  //Refs
-  let useRefTimeline = useRef();
-
-  //---------------------------------------------------
-  // Props 
-  //---------------------------------------------------
-  //todo addNewProps [onItemDeselect   onAddNewReservation]
-  const {
-    editResId,
-    lotData,
-    reservationData,
-    language,
-    defaultTimeStart,
-    defaultTimeEnd,
-    newReservationPlaceholderTimeStart,
-    newReservationPlaceholderTimeEnd,
-    allowAddNewReservation,
-    showAddNewReservationButtonInPopup,
-    updateReservationTimelineResize,
-    updateNewReservationTimeLineItem,
-    updateReservationTimelineMove,
-    beforeItemMoveDifferentLot,
-    numberOfReservations,
-    onNewResItemDoubleClick,
-    onItemDoubleClick,
-    onItemDeselect,
-    onItemSelect,
-    adjustNewResStartEndTime,
-    height,
-    padding,
-    getNewKey,
-    lineHeight,
-    itemHeightRatio,
-    TimelinePopUpComponent,
-    i18next,
-    theme
-  } = props;
-  const compTheme = theme ? theme : useTheme();
-  const defaultTheme = createTheme(compTheme);
-  const classes = useStyles(props);
-
-  //---------------------------------------------------
-  // Hooks 
-  //---------------------------------------------------
-  const [lot_search, setLotSearch] = useState('');
-  const [should_focus_on_lot_filter, setFocusOnFilter] = useState(false);
-  const getLotNumberFromReservationId = reservationId => {
-    try {
-      const reservationObject = reservationData.find(rd => Number(rd.reservation_id) === Number(reservationId));
-      if (reservationObject) {
-        //found the res obj now return the lot number
-        return reservationObject.lot_number;
-      }
-    } catch (error) {
-      console.error(error);
-    }
-    return null;
-  };
-  const filterLots = (lot_number_to_search = '') => {
-    let timeline_items;
-    try {
-      if (lot_number_to_search.length === 0) {
-        timeline_items = lotData.map(item => {
-          return {
-            ...item,
-            id: item.lot_id,
-            title: item.lot_id
-          };
-        });
-      } else {
-        timeline_items = lotData.filter(filter_me => filter_me.lot_id.toLowerCase().indexOf(lot_number_to_search.toLowerCase()) >= 0).map(item => {
-          return {
-            ...item,
-            id: item.lot_id,
-            title: item.lot_id
-          };
-        });
-      }
-      if (String(editResId).length > 0) {
-        //Okay so make sure we only display the group/lot number that is associated with this reservation id.
-        const lotNumber = getLotNumberFromReservationId(editResId);
-        if (lotNumber) {
-          //found the res obj now filter all lot except for the one associated to this reservation.
-          timeline_items = timeline_items.filter(ti => ti.id === lotNumber);
-        }
-      }
-      clearTimeout(focus_debounce);
-      focus_debounce = setTimeout(() => {
-        //have a little bug where the text box was loosing focus then the timeline lot items are being updated, this is my workaround
-        if (should_focus_on_lot_filter && String(editResId).length === 0) {
-          document.getElementById('lot_filter_search').focus();
-        }
-      }, 0.5);
-    } catch (error) {}
-    return timeline_items;
-  };
-  const [state, setState] = useState({
-    // if having loading issues then do this..
-    // groups: filterLots(lot_search),
-    canMove: false,
-    canResize: false,
-    // Think of "items" as "a singular phase" represented in the Timeline
-    // It can be a "Think phase item", an "Explore phase item", or any "Build phase item"
-    // Each item can be customized - given or requirements, all item configurations are the same
-    //loading the data groups/lots here is a must or else I will loose them when I toggle from one viewer to another and back to this one.
-    groups: [],
-    //only force a lot group refresh if we have not focused on the text box yet that way we only fire it once or else it's getting fired multiple times...
-    // groups: should_focus_on_lot_filter?[]:filterLots(lot_search),//only force a lot group refresh if we have not focused on the text box yet that way we only fire it wonce or else it's getting fired multiple times...
-    // The only differentiator between items are the "group" they belong to, their "title" and their "start/end times"
-    items: []
-  });
-
-  //---------------------------------------------------
-  // Use Effect 
-  //---------------------------------------------------
-  useEffect(() => {
-    moment.locale(language);
-  }, []);
-  useEffect(() => {
-    //morph the current lot data into what is needed to create the timeline groups
-    // need at the minimum id, and title.
-
-    if (lotData.length > 0) {
-      setState(previousState => {
-        return {
-          ...previousState,
-          groups: filterLots(lot_search)
-        };
-      });
-    }
-  }, [lotData]);
-  useEffect(() => {
-    try {
-      // if (data.length > 0) {
-      //morph the reservation into timeline items.
-      setState(previousState => {
-        return {
-          ...previousState,
-          items: filterReservation()
-        };
-      });
-      // }
-    } catch (error) {}
-  }, [reservationData]);
-  useEffect(() => {
-    setState(previousState => {
-      return {
-        ...previousState,
-        groups: filterLots(lot_search),
-        items: filterReservation(lot_search)
-      };
-    });
-    focus_debounce = setTimeout(() => {
-      //have a little bug where the text box was loosing focus then the timeline lot items are being updated, this is my workaround
-      if (should_focus_on_lot_filter && String(editResId) === 0) {
-        document.getElementById('lot_filter_search').focus();
-      }
-    }, 0.05);
-  }, [lot_search]);
-  useEffect(() => {
-    const newItem = state.items.find(item => Number(item.id) === -1);
-    let sameDates = false;
-    if (newItem) {
-      // check to see if the place holder dates match the existing new item
-      const start_time = newItem.start_time;
-      const end_time = newItem.end_time;
-      // When comparing dates involving '==' or '===' should use the '+' prefix
-      // it will then compare the dates' millisecond values
-      if (+new Date(start_time) === +new Date(newReservationPlaceholderTimeStart) && +new Date(end_time) === +new Date(newReservationPlaceholderTimeEnd)) {
-        sameDates = true;
-      }
-    }
-    if (newReservationPlaceholderTimeStart, newReservationPlaceholderTimeEnd && !sameDates) {
-      // new res item doesn't exist with the current dates add it...
-      addNewReservationItem(getLotNumberFromReservationId(editResId), newReservationPlaceholderTimeStart, getNumberOfNights(newReservationPlaceholderTimeStart, newReservationPlaceholderTimeEnd));
-    }
-  }, [newReservationPlaceholderTimeStart, newReservationPlaceholderTimeEnd]);
-
-  //Functions
-
-  /**
-   * filterReservation
-   * 
-   * Used to filter out the reservations that needs to be displayed on the timeline.
-   * Note: cancelled and expired reservations are filtered out....
-   *
-   * @param {string} [lot_number_to_search='']
-   * @returns returns the filtered reservation (will not return cancelled reservations and filtered reservations by lot number)
-   */
-  const filterReservation = (lot_number_to_search = '') => {
-    let timeline_reservations = reservationData.map(res => {
-      return {
-        ...res,
-        id: res.reservation_id,
-        group: res.lot_number,
-        title: res.reservation_id + ' ' + res.client_name,
-        start_time: moment(res.arrival_date, DATE_TIME_FORMAT),
-        end_time: moment(res.departure_date, DATE_TIME_FORMAT),
-        className: timeLineItemClassName(res)
-        // className: res.conflict_detected === 'No' ? (parseInt(res.transaction_status_id, 10) === 2 ? 'green_row' : 'yellow_row') : 'item_collision'
-      };
-    }).filter(res_f => parseInt(res_f.transaction_status_id, 10) <= 2 && parseInt(res_f.reservation_status_id, 10) !== 3);
-    try {
-      if (lot_number_to_search.length > 0) {
-        timeline_reservations = timeline_reservations.filter(filter_me => filter_me.lot_number.toLowerCase().indexOf(lot_number_to_search.toLowerCase()) >= 0);
-      }
-
-      //set the number of displayed reservation in the timeline after all filtering....
-      numberOfReservations(timeline_reservations.length);
-    } catch (error) {}
-    return timeline_reservations;
-  };
-  const getNewReservationStyling = (reservation_data, lot_number, startDate, endDate) => {
-    return doDatesConflictWithOtherReservations(reservation_data, lot_number, startDate, endDate) ? 'item_collision' : 'border-dashed bg-gray-400/75';
-  };
-  const addNewReservationItem = (groupId, startDate, numberNights = 2) => {
-    // Used to add an new reservation item on the timeline
-    try {
-      if (allowAddNewReservation) {
-        const {
-          newStartTime,
-          newEndTime
-        } = adjustNewResStartEndTime(startDate, startDate);
-        const new_end_date_count = newEndTime.add(numberNights, 'days');
-        //Add new reservation item, make sure to also remove the -1 = new res item before adding a new one...
-        setState(previousState => {
-          return {
-            ...previousState,
-            canResize: true,
-            canMove: true,
-            items: [...previousState.items.filter(item => Number(item.id) !== -1), {
-              id: newItemId,
-              group: groupId,
-              title: i18next.t('reservation_new.title.new_reservation'),
-              start_time: newStartTime,
-              end_time: new_end_date_count,
-              className: getNewReservationStyling(previousState.items.filter(item => Number(item.id) !== -1), groupId, newStartTime, new_end_date_count)
-            }]
-          };
-        });
-
-        //Pass up the new reservation from to date changes so I can adjust the parent component accordingly
-        updateNewReservationTimeLineItem(newStartTime, new_end_date_count);
-      }
-    } catch (error) {
-      console.error('Error adding new reservation time to timeline:', error);
-    }
-  };
-  const handleAddNewReservationItem = (groupId, startDate, e) => {
-    addNewReservationItem(groupId, startDate);
-  };
-  const timeLineItemClassName = res => {
-    let class_name_collection = '';
-    if (res.conflict_detected === 'No') {
-      class_name_collection = parseInt(res.transaction_status_id, 10) === 2 ? 'green_row' : 'yellow_row';
-    } else {
-      class_name_collection = 'item_collision';
-    }
-    if (String(editResId) === String(res.reservation_id)) {
-      class_name_collection += ' edit_res_id';
-    }
-    return class_name_collection;
-  };
-  const handleItemResize = (itemId, time) => {
-    let res_id;
-    let lot_number;
-    let new_departure_date;
-    let arrival_date;
-
-    //? this will get the information needed of the item to proceed
-    state.items.filter(f_item => f_item.id === itemId).map(item => {
-      res_id = item.reservation_id;
-      lot_number = item.group;
-      //? This will be used as the default snapback time for my hours and minutes.
-      //? What ever previous hours and minutes defined as the start time will be used as the default snapback time for the new start drag date time
-      const current_time = moment(item.end_time).toDate();
-
-      //? Need to set and adjust the new start time of the item based on it's previous hours and minutes so it always snaps to the same value
-      new_departure_date = moment(moment(time).set({
-        hour: current_time.getHours(),
-        minute: current_time.getMinutes(),
-        second: 0,
-        millisecond: 0
-      }));
-
-      //need the current arrival date because the same call is made to the server weather we do a move or a resize
-      arrival_date = item.start_time;
-      //? note the item start time will not change when the item is resized as I only allow the right part of the item to change
-    });
-
-    if (Number(itemId) > newItemId) {
-      // valid reservation item
-      //make the same change in redux or store, and also reevaluate the reservations conflicts for all reservations associated to this lot number/res id
-      updateReservationTimelineResize(res_id, lot_number, arrival_date, new_departure_date, getTimeDifference(arrival_date, new_departure_date));
-    } else {
-      // new reservation item
-      setState(previousState => {
-        return {
-          ...previousState,
-          items: [...previousState.items.map(it => {
-            if (Number(it.id) === Number(itemId)) {
-              return {
-                ...it,
-                end_time: moment(new_departure_date),
-                className: getNewReservationStyling(previousState.items.filter(item => Number(item.id) !== -1), it.group, it.start_time, new_departure_date)
-              };
-            } else {
-              return it;
-            }
-          })]
-        };
-      });
-
-      //Pass up the new reservation from to date changes so I can adjust the parent component accordingly
-      updateNewReservationTimeLineItem(arrival_date, new_departure_date);
-    }
-  };
-  const handleItemMove = (itemId, dragTime, newGroupOrder) => {
-    let res_id;
-    let original_lot_number;
-    let new_lot_number = groups[newGroupOrder].lot_id;
-    let new_departure_date;
-    let new_arrival_date;
-    const ARE_WE_MOVING_TO_THE_SAME_LOT_ID = state.items.filter(f_item => f_item.id === itemId).find(gr => gr.group === new_lot_number) ? true : false;
-    const moveItem = () => {
-      state.items.filter(f_item => f_item.id === itemId).map(item => {
-        res_id = item.reservation_id;
-        original_lot_number = item.group;
-
-        //? This will be used as the default snap time for my hours and minutes.
-        //? What ever previous hours and minutes defined as the start time will be used as the default snap time for the new start drag date time
-        let current_time = moment(item.start_time).toDate();
-
-        //? Need to set and adjust the new start time of the item based on it's previous hours and minutes so it always snaps to the same value
-        new_arrival_date = moment(moment(dragTime).set({
-          hour: current_time.getHours(),
-          minute: current_time.getMinutes(),
-          second: 0,
-          millisecond: 0
-        }));
-
-        //? Need to readjust the item end time to compensate the move
-        new_departure_date = new_arrival_date + (item.end_time - item.start_time);
-      });
-      if (Number(itemId) > newItemId) {
-        //make the same change in redux, and also reevaluate the reservations conflicts for all reservations associated to this lot number/res id
-        updateReservationTimelineMove(res_id, original_lot_number, new_lot_number, new_arrival_date, new_departure_date, getTimeDifference(new_arrival_date, new_departure_date));
-      } else {
-        // new reservation item
-        const {
-          newStartTime,
-          newEndTime
-        } = adjustNewResStartEndTime(new_arrival_date, new_departure_date);
-        setState(previousState => {
-          return {
-            ...previousState,
-            items: [...previousState.items.map(it => {
-              if (Number(it.id) === Number(itemId)) {
-                return {
-                  ...it,
-                  group: new_lot_number,
-                  start_time: newStartTime,
-                  end_time: newEndTime,
-                  className: getNewReservationStyling(previousState.items.filter(item => Number(item.id) !== -1), new_lot_number, newStartTime, newEndTime)
-                };
-              } else {
-                return it;
-              }
-            })]
-          };
-        });
-
-        //Pass up the new reservation from to date changes so I can adjust the parent component accordingly
-        updateNewReservationTimeLineItem(newStartTime, newEndTime);
-      }
-    };
-    if (!ARE_WE_MOVING_TO_THE_SAME_LOT_ID) {
-      //This is where we check to see if the lot has a notification.  If it does then prompt the user with the message. Else keep trucking...
-      // showLotNotificationPopup({ ...groups[newGroupOrder] }, moveItem);
-      beforeItemMoveDifferentLot({
-        ...groups[newGroupOrder]
-      }, moveItem);
-    } else {
-      // We are moving on the same lot number no need to check for lot notification.
-      moveItem();
-    }
-  };
-  const getTimeDifference = (start_time, end_time, simulate_time_dragging = false) => {
-    if (simulate_time_dragging) {
-      // Need to set the hours to 24/midnight so it properly simulated with the timeline items are dragged/resized across days.  Or else it feels weird when looking at the days increase
-      start_time = moment(moment(start_time).set({
-        hour: 24,
-        minute: 0,
-        second: 0,
-        millisecond: 0
-      }));
-    }
-    return moment(end_time).diff(start_time, 'days') + 1;
-  };
-  const getNumberOfNights = (from_date, to_date) => {
-    let n_nights = 0;
-    try {
-      let dt1 = new Date(from_date);
-      let dt2 = new Date(to_date);
-      n_nights = Math.floor((Date.UTC(dt2.getFullYear(), dt2.getMonth(), dt2.getDate()) - Date.UTC(dt1.getFullYear(), dt1.getMonth(), dt1.getDate())) / (1000 * 60 * 60 * 24));
-      if (!Number(n_nights) || n_nights < 0) {
-        n_nights = 0;
-      }
-    } catch (e) {
-      return 0;
-      // console.error(e.message);
-    }
-
-    return n_nights;
-  };
-  const isNewItemId = id => {
-    //Returns true if this id is from a new item id being added to the timeline
-    return Number(id) === newItemId;
-  };
-  /**
-  * customItem
-  * 
-  * Used to display the tooltip of the item when resizing it
-  *
-  * @param {*} { item, itemContext, getItemProps, getResizeProps }
-  * @returns
-  */
-  const customItem = props => {
-    // const { left: leftResizeProps } = getResizeProps();
-    const {
-      item,
-      itemContext,
-      getItemProps,
-      getResizeProps
-    } = props;
-    try {
-      const {
-        right: rightResizeProps
-      } = getResizeProps();
-      const itemProps = getItemProps(item.itemProps);
-      const isPhaseSelected = itemContext.selected && item.group !== 4;
-      let followingTooltipsMarkup = null;
-      if (isPhaseSelected) {
-        const timeDifference = getTimeDifference(item.start_time, itemContext.resizeTime, true);
-        const n_nights = i18next.t('reservation_grid.header.number_of_nights');
-        const daysTooltipMarkup = itemContext.resizing ? ` ${n_nights} ${timeDifference} ` : null;
-        const tooltipMarkup = /*#__PURE__*/React.createElement("div", {
-          className: "rct-item-tooltip rct-item-following-indicator ",
-          style: {
-            position: 'absolute',
-            left: itemContext.dimensions.left + itemContext.dimensions.width,
-            top: itemContext.dimensions.top,
-            height: `${itemContext.dimensions.height}px`
-          }
-        }, /*#__PURE__*/React.createElement("div", {
-          className: "rct-item-tooltip-content"
-        }, daysTooltipMarkup));
-        followingTooltipsMarkup = /*#__PURE__*/React.createElement("div", null, tooltipMarkup);
-      }
-      const handleRightSide = itemContext.useResizeHandle && isPhaseSelected ? /*#__PURE__*/React.createElement("div", rightResizeProps, /*#__PURE__*/React.createElement("span", {
-        className: state.canResize ? 'handle-icon' : ''
-      })) : null;
-      const handleLeftSide = itemContext.useResizeHandle && isPhaseSelected ? /*#__PURE__*/React.createElement("div", null, state.canMove && /*#__PURE__*/React.createElement(MDIIcon.Icon, {
-        path: mdiCursorMove,
-        size: 1.5,
-        color: "charcoal",
-        className: 'move-icon'
-      })) : null;
-      return /*#__PURE__*/React.createElement("div", {
-        className: `rct-item-wrapper ${itemContext.resizing ? 'rct-item--is-resizing' : ''} ${itemContext.selected ? 'rct-item--is-selected' : ''}`
-      }, /*#__PURE__*/React.createElement("div", itemProps, /*#__PURE__*/React.createElement(Tooltip, {
-        zIndex: 2000,
-        content: /*#__PURE__*/React.createElement(TimelinePopUpComponent, {
-          res: item,
-          showAddNewReservationButtonInPopup: showAddNewReservationButtonInPopup,
-          getTimeDifference: getTimeDifference,
-          addNewResOnClick: startAddingNewReservation
-        }),
-        mouseOutDelay: 500
-      }, /*#__PURE__*/React.createElement("div", {
-        className: "rct-item-content cursor-pointer h-full w-full",
-        style: {
-          maxHeight: `${itemContext.dimensions.height}`
-        }
-      }, itemContext.title)), handleLeftSide, handleRightSide), followingTooltipsMarkup);
-    } catch (error) {
-      console.error('Error in timeline custom item:', error);
-    }
-  };
-  const getItemById = id => {
-    return state.items.find(item => item.id === id);
-  };
-  const getLotByGroupId = groupId => {
-    //Note groupId is the lot number, it's just how the timeline works.
-    return lotData.find(ld => ld.lot_id === groupId);
-  };
-
-  // const getItemById = (itemId) => {
-  // 	return state.items.find((item) => item.id === itemId);
-  // };
-
-  /**
-   * groupRenderer
-   * 
-   * Changes the styling of the lot number item on the group column
-   *
-   * @param {*} { group }
-   * @returns
-   */
-  const groupRenderer = ({
-    group
-  }) => {
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
-      style: {
-        color: group.title === '106' ? 'red' : 'black'
-      }
-    }, group.title));
-  };
-  const toggleTimelineEdit = () => {
-    setState({
-      ...state,
-      canMove: !state.canMove,
-      canResize: !state.canResize
-    });
-  };
-  const turnOffTimelineEdit = () => {
-    setState(previousState => {
-      return {
-        ...previousState,
-        canMove: false,
-        canResize: false
-      };
-    });
-  };
-  const turnOnTimelineEdit = () => {
-    setState(previousState => {
-      return {
-        ...previousState,
-        canMove: true,
-        canResize: true
-      };
-    });
-  };
-  const handleRelativeZoomOutClick = () => {
-    useRefTimeline.current.changeZoom(1.25);
-  };
-  const handleRelativeZoomInClick = () => {
-    useRefTimeline.current.changeZoom(0.75);
-  };
-
-  // --------------------------------------------
-  // Render used to make the month and year sticky scroll sliding
-  // --------------------------------------------
-  // const isWeekendDay = (intervalContext, data) => {
-  // 	if (data.isMonth) {
-  // 		return false;
-  // 	}
-  // 	const day = intervalContext.interval.startTime.day();
-  // 	return day === 6 || day === 0; // Saturday or Sunday
-  // };
-  // const isCurrentDay = (intervalContext, data) => {
-  // 	return !data.isMonth && intervalContext.interval.startTime.isSame(data.currentDate, 'day');
-  // };
-
-  // const itemRenderer = ({ item, itemContext, getItemProps }) => {
-  // 	return (
-  // 		<div
-  // 			{...getItemProps({
-  // 				style: {
-  // 					display: 'flex',
-  // 					alignItems: 'center',
-  // 					background: item.start_time.isAfter() ? '#aaa' : '#d32f2f',
-  // 					border: `3px solid ${itemContext.selected ? '#fff700' : 'transparent'}`,
-  // 					borderRadius: '12.5px',
-  // 					boxShadow: 'rgba(0, 0, 0, 0.16) 0 0.3rem 0.6rem'
-  // 				}
-  // 			})}
-  // 		>
-  // 			<div
-  // 				style={{
-  // 					position: 'sticky',
-  // 					left: '0',
-  // 					display: 'inline-block',
-  // 					overflow: 'hidden',
-  // 					padding: '0 1rem',
-  // 					textOverflow: 'ellipsis',
-  // 					whiteSpace: 'nowrap'
-  // 				}}
-  // 			>
-  // 				{itemContext.title}
-  // 			</div>
-  // 		</div>
-  // 	);
-  // };
-
-  // const emptySlotClicked = (groupId, time) => {
-  // 	// console.log('group id : ', groupId, ' time: ',time)
-  // };
-
-  // const onTimeChange = (start, end, updateScrollCanvas) => {
-  // 	// this.setState({ zoom_out_level: 1 });
-  // 	// this.zoom_days = moment(start).diff(end, "days");
-
-  // 	// console.log(
-  // 	//   "hours: ",
-  // 	//   moment(start).diff(end, "hours"),
-  // 	//   "days: ",
-  // 	//   this.zoom_days,
-  // 	//   "months:",
-  // 	//   moment(start).diff(end, "months")
-  // 	// );
-  // 	// console.log("start: ", start, " end: ", end);
-
-  // 	updateScrollCanvas(start, end);
-  // };
-
-  //Makes the year month at the top of the timeline stick to the left side when scrolling
-  //And also bold the weekends and makes the current day red
-  const intervalRenderer = ({
-    intervalContext,
-    getIntervalProps,
-    data
-  }) => {
-    return /*#__PURE__*/React.createElement("div", _extends({}, getIntervalProps(), {
-      className: `rct-dateHeader ${data.isMonth ? 'rct-dateHeader-primary' : ''}`,
-      onClick: () => {
-        return false;
-      }
-    }), /*#__PURE__*/React.createElement("span", {
-      style: {
-        position: data.isMonth ? 'sticky' : 'static',
-        marginRight: data.isMonth ? 'auto' : 'inherit',
-        left: '50%',
-        padding: '0 1rem'
-        // fontWeight: isWeekendDay(intervalContext, data) || isCurrentDay(intervalContext, data) ? '400' : '300',
-        // color: isCurrentDay(intervalContext, data) ? '#d32f2f' : '#000'
-      }
-    }, intervalContext.intervalText));
-  };
-  const startAddingNewReservation = () => {
-    //Note the new item id will always be -1 because that's what I set it as and there will only ever be one of them.
-
-    try {
-      clearTimeout(new_res_debounce);
-      new_res_debounce = setTimeout(() => {
-        //Get the group item so I can trace it back to the lot data item
-        const groupItem = getItemById(newItemId);
-        if (groupItem) {
-          //Get the lot object, lot object is needed for the new res panel to know which lot is currently selected.
-          const lot_item = getLotByGroupId(groupItem.group);
-          const activeResParts = {
-            reservation: {
-              end_date: groupItem.end_time.format(DATE_TIME_FORMAT),
-              start_date: groupItem.start_time.format(DATE_TIME_FORMAT)
-            },
-            lot: {
-              ...lot_item
-            }
-          };
-          onNewResItemDoubleClick(activeResParts);
-
-          //Remove the edit mode on the timeline.
-          turnOffTimelineEdit();
-        }
-      }, 300);
-    } catch (error) {
-      console.error('Error in startAddingNewReservation: ', error);
-    }
-  };
-  const handleOnItemDoubleClick = resId => {
-    try {
-      if (String(editResId).length === 0) {
-        if (!isNewItemId(resId)) {
-          //Valid reservation, Edit the reservation
-          onItemDoubleClick(resId);
-        } else {
-          //New reservation item, start adding the new reservation\
-          startAddingNewReservation();
-        }
-      }
-    } catch (error) {
-      console.error('error in handleOnItemDoubleClick', error);
-    }
-  };
-  const {
-    items,
-    groups
-  } = state;
-  const todayInMilliseconds = moment().valueOf();
-  return /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: defaultTheme
-  }, /*#__PURE__*/React.createElement("div", {
-    key: "timeline_main_1",
-    className: classes.timelineWrapper
-  }, /*#__PURE__*/React.createElement(Timeline, {
-    key: getNewKey ? Math.random() : 'time_line_key' //Used to re-render the timeline each time the default dates change so I see the changes applied
-    ,
-    groups: groups,
-    items: items,
-    itemsSorted: true,
-    canResize: state.canResize,
-    canMove: state.canMove,
-    itemTouchSendsClick: false,
-    stackItems: true,
-    defaultTimeStart: defaultTimeStart,
-    defaultTimeEnd: defaultTimeEnd,
-    minZoom: 16 * 60 * 60 * 1000,
-    maxZoom: 1 * 365.24 * 86400 * 1000,
-    lineHeight: lineHeight,
-    itemHeightRatio: itemHeightRatio,
-    onItemResize: handleItemResize,
-    onItemMove: handleItemMove,
-    onItemDeselect: e => {
-      onItemDeselect();
-    },
-    onItemSelect: resId => {
-      if (Number(resId) > newItemId) {
-        onItemSelect(resId);
-      }
-    },
-    onItemDoubleClick: handleOnItemDoubleClick,
-    onCanvasDoubleClick: handleAddNewReservationItem,
-    itemRenderer: customItem
-    // groupRenderer={groupRenderer}
-    ,
-    useResizeHandle: true
-    // fullUpdate
-    // fixedHeader="sticky"
-    // stickyOffset={40}
-
-    // traditionalZoom={false}
-    // dragSnap={1000 * 60 * 60 * 24}
-    // onCanvasClick={emptySlotClicked}
-    // onTimeChange={onTimeChange}
-    // onItemSelect={handleItemSelect}
-    ,
-    ref: useRefTimeline
-  }, /*#__PURE__*/React.createElement(TimelineHeaders, {
-    key: "time_line_headers_1",
-    className: "sticky"
-  }, /*#__PURE__*/React.createElement(SidebarHeader, {
-    key: "today_sidebar_1"
-  }, ({
-    getRootProps
-  }) => {
-    return /*#__PURE__*/React.createElement("div", _extends({
-      id: "timeline_headers_1"
-    }, getRootProps(), {
-      className: "left-header"
-    }), /*#__PURE__*/React.createElement("div", {
-      className: "btn-wrapper"
-    }, String(editResId).length === 0 && /*#__PURE__*/React.createElement(IconButton, {
-      color: "inherit",
-      onClick: toggleTimelineEdit,
-      className: state.canMove ? 'blink' : ''
-    }, /*#__PURE__*/React.createElement(Edit, null)), /*#__PURE__*/React.createElement(IconButton, {
-      color: "inherit",
-      onClick: handleRelativeZoomInClick
-    }, /*#__PURE__*/React.createElement(ZoomIn, null)), /*#__PURE__*/React.createElement(IconButton, {
-      color: "inherit",
-      onClick: handleRelativeZoomOutClick
-    }, /*#__PURE__*/React.createElement(ZoomOut, null)), String(editResId).length === 0 && /*#__PURE__*/React.createElement("div", {
-      className: "flex ml-6 "
-    }, /*#__PURE__*/React.createElement(SearchLotsTextBox, {
-      label: i18next.t('reservation_grid.header.lot_number'),
-      lot_search: lot_search,
-      setLotSearch: setLotSearch,
-      setFocusOnFilter: setFocusOnFilter,
-      should_focus_on_lot_filter: should_focus_on_lot_filter
-    }), lot_search && lot_search.length > 0 && /*#__PURE__*/React.createElement(IconButton, {
-      color: "inherit",
-      style: {
-        marginTop: 8,
-        maxHeight: 46,
-        maxWidth: 46
-      },
-      onClick: () => setLotSearch('')
-    }, /*#__PURE__*/React.createElement(Close, null)))));
-  }), /*#__PURE__*/React.createElement(DateHeader, {
-    key: "primary_date_header",
-    unit: "primaryHeader",
-    labelFormat: "MMMM YYYY",
-    headerData: {
-      isMonth: true
-    },
-    intervalRenderer: intervalRenderer
-  }), /*#__PURE__*/React.createElement(DateHeader, {
-    key: "secondary_date_header",
-    height: 70,
-    headerData: {
-      isMonth: false
-    }
-  })), /*#__PURE__*/React.createElement(TimelineMarkers, {
-    key: "timeline_markers_2"
-  }, /*#__PURE__*/React.createElement(CustomMarker, {
-    key: "custom_marker_1",
-    date: todayInMilliseconds
-  }, ({
-    styles
-  }) => {
-    const customStyles = {
-      ...styles,
-      backgroundColor: 'red',
-      width: '1.5px',
-      zIndex: 1
-    };
-    return /*#__PURE__*/React.createElement("div", {
-      style: customStyles
-    });
-  })))));
-};
-export default ReservationTimelineComponent;
-ReservationTimelineComponent.defaultProps = {
-  language: 'en',
-  editResId: '',
-  getNewKey: false,
-  allowAddNewReservation: true,
-  showAddNewReservationButtonInPopup: true,
-  reservationData: [],
-  lotData: [],
-  lineHeight: 50,
-  itemHeightRatio: 0.70,
-  height: '90vh !important',
-  padding: '0 16px',
-  defaultTimeStart: moment(ZERO_HOUR).subtract(7, 'days'),
-  defaultTimeEnd: moment(ZERO_HOUR).add(14, 'days'),
-  newReservationPlaceholderTimeStart: undefined,
-  newReservationPlaceholderTimeEnd: undefined,
-  onItemSelect: () => {},
-  onItemDeselect: () => {},
-  onItemDoubleClick: () => {},
-  onNewResItemDoubleClick: () => {},
-  updateNewReservationTimeLineItem: () => {},
-  updateReservationTimelineMove: () => {},
-  numberOfReservations: () => {},
-  updateReservationTimelineResize: () => {},
-  beforeItemMoveDifferentLot: ({
-    ...props
-  }, onMove) => {
-    onMove();
-  },
-  //Note if this props is not supplied then we simply move the item without doing any additional work
-  adjustNewResStartEndTime: (arrivalDate, departureDate) => {
-    return {
-      newStartTime: moment(arrivalDate),
-      newEndTime: moment(departureDate)
-    };
-  },
-  //If no functions defined then it will return the same arrival and departure dates with the same time without any changes
-  TimelinePopUpComponent: undefined,
-  i18next: undefined,
-  theme: undefined
-};
-ReservationTimelineComponent.propTypes = {
-  /** This is the component displayed inside of the tooltip when hovering over the timeline items*/
-  TimelinePopUpComponent: PropTypes.elementType,
-  /** Indicates to the timeline to use a new key value.  Useful when I need the timeline to refresh after an action. And bad in some cases where I don't wan the grid to update. Only use when I'm changing the defaultTimeStart and defaultTimeEnd date so the timeline reflect the changes made.  Don't use on a standard timeline or else I will lose my focus each time I select an item that is out of the scope of the initial view port*/
-  getNewKey: PropTypes.bool,
-  /** Allows adding the new reservation item to the timeline*/
-  allowAddNewReservation: PropTypes.bool,
-  /** Controls if we see the Add New Reservation button in the popup when hovering over the new res item*/
-  showAddNewReservationButtonInPopup: PropTypes.bool,
-  /** Language string to use for the timeline */
-  language: PropTypes.string,
-  /** Converts the timeline into a res edit format if a valid reservation id is supplied. Edits are disabled and the reservation is highlighted so we know which item we are focusing on */
-  editResId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /** Reservation objects used to create the item/reservation on the timeline*/
-  reservationData: PropTypes.array,
-  /** Lot objects used to cerate the groups*/
-  lotData: PropTypes.array,
-  /** Height of each group*/
-  lineHeight: PropTypes.number,
-  /** Height ration of each item inside the group based on the group height*/
-  itemHeightRatio: PropTypes.number,
-  /** Height of the component in plain CSS notation*/
-  height: PropTypes.string,
-  /** Padding around the component in plain CSS notation*/
-  padding: PropTypes.string,
-  /** Controls the starting position of the timeline, defaults to today - 7 days */
-  defaultTimeStart: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.instanceOf(Date)]),
-  /** Controls the ending position of the timeline, defaults to today + 14 days */
-  defaultTimeEnd: PropTypes.oneOfType([PropTypes.instanceOf(moment), PropTypes.instanceOf(Date)]),
-  /** Controls the starting position of the new reservation placeholder */
-  newReservationPlaceholderTimeStart: PropTypes.instanceOf(Date),
-  /** Controls the ending position of the new reservation placeholder */
-  newReservationPlaceholderTimeEnd: PropTypes.instanceOf(Date),
-  /** Callback when an item is clicked. (resId) is passed to the function */
-  onItemSelect: PropTypes.func,
-  /** Callback when an item is un-clicked. no props passed to the function*/
-  onItemDeselect: PropTypes.func,
-  /** Callback when an item is double clicked. (resId) is passed to the function*/
-  onItemDoubleClick: PropTypes.func,
-  /** Callback to return the number of reservations being displayed in the timeline (number) one prop is return containing the number of reservations */
-  numberOfReservations: PropTypes.func,
-  /** Callback to pass back upwards the new dates of the new reservation item so we can adjust the parent component's date accordingly (arrivalDate, newDepartureDate)*/
-  updateNewReservationTimeLineItem: PropTypes.func,
-  /** Callback to save the changes made ot the object in our store. props passed to the callback function (reservation_id, lot_number, arrival_date, departure_date, number_of_nights) */
-  updateReservationTimelineResize: PropTypes.func,
-  /** Callback to save the changes made ot the object in our store. props passed to the callback function (reservation_id, original_lot_number, new_lot_number, arrival_date, departure_date, number_of_nights) */
-  updateReservationTimelineMove: PropTypes.func,
-  /** Callback to allow us to hook in some logic before committing to change the lot to the different lot. ({...props from item groups},moveItem()) */
-  beforeItemMoveDifferentLot: PropTypes.func,
-  /** Callback to allow us to update the arrival and departure time of the arrivalDate departureDate. Used when adding a new reservation so we can use the specified times from the seasonal object. props=(arrivalDate, departureDate) must return the following shape {newStartTime,newEndTime}*/
-  adjustNewResStartEndTime: PropTypes.func,
-  /** The i18next needs to be passed in by the component or else they will be blank */
-  i18next: PropTypes.any,
-  /** Theme object to use on this component, if none provided then the MUI5 theme provider theme is used*/
-  theme: PropTypes.object
-};