alm-search-01/dist/fields/GuestsPicker.js

This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).

"use strict";

function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireWildcard(require("react"));

var _styles = require("@material-ui/core/styles");

var _List = _interopRequireDefault(require("@material-ui/core/List"));

var _Grid = _interopRequireDefault(require("@material-ui/core/Grid"));

var _ListItemIcon = _interopRequireDefault(require("@material-ui/core/ListItemIcon"));

var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));

var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));

var _Divider = _interopRequireDefault(require("@material-ui/core/Divider"));

var _SupervisorAccount = _interopRequireDefault(require("@material-ui/icons/SupervisorAccount"));

var _HotelRounded = _interopRequireDefault(require("@material-ui/icons/HotelRounded"));

var _Field = _interopRequireDefault(require("../components/Field/Field"));

var _Counter = _interopRequireDefault(require("../components/Counter"));

var _Dialog = _interopRequireDefault(require("../components/Dialog"));

var _core = require("@material-ui/core");

var _AddCircleRounded = _interopRequireDefault(require("@material-ui/icons/AddCircleRounded"));

var _getHotelsLocale2 = _interopRequireDefault(require("../utils/getHotelsLocale"));

var _brandStyles = _interopRequireDefault(require("../utils/brandStyles"));

var _AgeDropDown = _interopRequireDefault(require("../components/DropDown/AgeDropDown"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _extends() { _extends = Object.assign || 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); }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }

function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    container: {
      display: 'flex',
      width: '100%',
      margin: '4px 0'
    },
    list: {
      boxShadow: '0 1px 8px 0 rgba(0, 0, 0, 0.1)',
      margin: theme.spacing(2, 1, 1),
      padding: theme.spacing(0)
    },
    listItem: {
      background: 'transparent'
    },
    roomsWarningTitle: {
      textAlign: 'center'
    },
    btnColor: {
      color: function color(getBrandStyles) {
        return getBrandStyles.color;
      },
      padding: 0
    },
    infoColor: {
      // color: '#02647A',
      paddingRight: theme.spacing(2),
      paddingLeft: theme.spacing(2),
      fontWeight: 500,
      fontSize: 18,
      color: 'rgba(0, 0, 0, 0.87)'
    },
    infoSecondary: {
      color: '#97a1a6',
      fontWeight: 'normal',
      fontSize: 12
    },
    infoPrimary: {
      fontWeight: 'normal',
      fontSize: 18
    },
    iconColor: {
      color: '#97a1a6'
    },
    btnRemove: {
      marginTop: 0,
      marginBottom: 6
    },
    btnPrimary: {
      textTransform: 'uppercase',
      fontWeight: 'normal',
      fontSize: 14,
      color: function color(getBrandStyles) {
        return getBrandStyles.colorTwo;
      }
    },
    addBtn: {
      color: function color(getBrandStyles) {
        return getBrandStyles.colorTwo;
      },
      paddingRight: theme.spacing(1),
      paddingLeft: theme.spacing(1),
      textTransform: 'uppercase',
      fontWeight: '500',
      fontSize: 14
    },
    ListItemIcon: {
      minWidth: 'inherit'
    },
    AddCircleRoundedIcon: {
      color: function color(getBrandStyles) {
        return getBrandStyles.colorTwo;
      }
    },
    icon: {
      paddingRight: theme.spacing(1),
      paddingLeft: theme.spacing(1)
    },
    listItemContainer: {
      margin: '0 -5px'
    },
    ageContainer: {
      fontSize: 14,
      fontWeight: 500,
      fontFamily: '"Roboto", Helvetica, Arial, sans-serif',
      fontStretch: 'normal',
      fontStyle: 'normal'
    },
    ageSelect: {
      display: 'contents',
      marginBottom: 10
    },
    //Use For only RTL
    infoRtl: {
      textAlign: 'right'
    }
  };
});
var defaultState = {
  room: [{
    guest: [{
      type: 'ADT'
    }, {
      type: 'CHD',
      age: 1
    }]
  }]
};

var reducer = function reducer(state, action) {
  var room = state.room;

  switch (action.type) {
    case 'addRooms':
      {
        var newRoom = _toConsumableArray(room);

        if (newRoom.length < 4) {
          newRoom = [].concat(_toConsumableArray(room), [{
            guest: [{
              id: 1,
              type: 'ADT'
            }, {
              id: 2,
              type: 'ADT'
            }]
          }]);
        }

        return _objectSpread({}, state, {
          room: newRoom
        });
      }

    case 'removeRooms':
      {
        var roomId = action.payload.roomId;
        var newState = Object.assign({}, state);
        var _newRoom = newState.room;

        var updatedRoom = _toConsumableArray(_newRoom);

        if (_newRoom.length > 1) {
          _newRoom.splice(roomId, 1);

          updatedRoom = _toConsumableArray(_newRoom);
        }

        return _objectSpread({}, state, {
          room: updatedRoom
        });
      }

    case 'addGuests':
      {
        var _action$payload = action.payload,
            guestType = _action$payload.guestType,
            _roomId = _action$payload.roomId,
            _action$payload$age = _action$payload.age,
            age = _action$payload$age === void 0 ? 0 : _action$payload$age;
        var maxGuestsPerRoom = 8;

        if (guestType === 'adult') {
          var roomObj = room[_roomId];
          var totalGuests = roomObj['guest'].length;
          var lastID = roomObj['guest'][roomObj['guest'].length - 1].id;
          var guestObj = {
            id: lastID + 1,
            type: 'ADT'
          };

          if (totalGuests < maxGuestsPerRoom) {
            if (roomObj['guest'] && Array.isArray(roomObj['guest'])) {
              roomObj['guest'].push(guestObj);
            } else {
              roomObj['guest'] = [];
              roomObj['guest'].push(guestObj);
            }
          }

          room[_roomId] = roomObj;
          return _objectSpread({}, state, {
            room: room
          });
        } else {
          var _roomObj = room[_roomId];
          var _totalGuests = _roomObj['guest'].length;
          var _lastID = _roomObj['guest'][_roomObj['guest'].length - 1].id;
          var childObj = {
            id: _lastID + 1,
            type: 'CHD',
            age: age
          };

          if (_totalGuests < maxGuestsPerRoom) {
            if (_roomObj['guest'] && Array.isArray(_roomObj['guest'])) {
              _roomObj['guest'].push(childObj);
            } else {
              _roomObj['guest'] = [];

              _roomObj['guest'].push(childObj);
            }
          }

          room[_roomId] = _roomObj;
          return _objectSpread({}, state, {
            room: room
          });
        }
      }

    case 'removeGuests':
      {
        var _action$payload2 = action.payload,
            _guestType = _action$payload2.guestType,
            _roomId2 = _action$payload2.roomId;

        if (_guestType === 'adult') {
          var _roomObj2 = room[_roomId2];
          var guestArr = _roomObj2['guest'];

          var newGuestArr = _toConsumableArray(guestArr);

          var adultIndex = newGuestArr.findIndex(function (guestItem) {
            return guestItem.type === 'ADT';
          });
          var allAdults = newGuestArr.filter(function (guestItem) {
            return guestItem.type === 'ADT';
          });

          if (allAdults.length > 1) {
            newGuestArr.splice(adultIndex, 1);
          }

          room[_roomId2] = {
            guest: newGuestArr
          };
          return _objectSpread({}, state, {
            room: room
          });
        } else {
          var _roomObj3 = room[_roomId2];
          var _guestArr = _roomObj3['guest'];

          var _newGuestArr = _toConsumableArray(_guestArr);

          var _adultIndex = _newGuestArr.reverse().findIndex(function (guestItem) {
            return guestItem.type === 'CHD';
          });

          var _allAdults = _newGuestArr.filter(function (guestItem) {
            return guestItem.type === 'CHD';
          });

          if (_allAdults.length > 0) {
            _newGuestArr.splice(_adultIndex, 1);

            _newGuestArr.reverse();
          }

          room[_roomId2] = {
            guest: _newGuestArr
          };
          return _objectSpread({}, state, {
            room: room
          });
        }
      }

    case 'totalGuests':
      {
        var rooms = [];
        room.forEach(function (guestObj) {
          rooms.concat(guestObj['guest']);
        });
        var adults = rooms.filter(function (guestItem) {
          return guestItem.type === 'ADT';
        });
        var children = rooms.filter(function (guestItem) {
          return guestItem.type === 'CHD';
        });
        return _objectSpread({}, state, {
          total: adults.length + children.length
        });
      }

    case 'updateAge':
      {
        var _action$payload3 = action.payload,
            _guestType2 = _action$payload3.guestType,
            _roomId3 = _action$payload3.roomId,
            childrenId = _action$payload3.childrenId,
            _age = _action$payload3.age;
        var _roomObj4 = room[_roomId3];
        var _guestArr2 = _roomObj4['guest'];

        var childItem = _guestArr2.find(function (guestItem) {
          return guestItem.id === childrenId;
        });

        var childItemIndex = _guestArr2.find(function (guestItem) {
          return guestItem.id === childrenId;
        });

        childItem.age = _age;

        _guestArr2.splice(childItemIndex, childItem);

        room[_roomId3] = {
          guest: _guestArr2
        };
        return _objectSpread({}, state, {
          room: room
        });
      }

    default:
      return _objectSpread({}, state);
  }
};

var GuestsPicker = function GuestsPicker(_ref) {
  var onChange = _ref.onChange,
      _ref$defaultGuests = _ref.defaultGuests,
      defaultGuests = _ref$defaultGuests === void 0 ? defaultState : _ref$defaultGuests,
      lang = _ref.lang,
      isMobile = _ref.isMobile,
      brand = _ref.brand;

  var _getHotelsLocale = (0, _getHotelsLocale2.default)(lang),
      guest_picker_guests_label = _getHotelsLocale.guest_picker_guests_label,
      guest_picker_rooms_label = _getHotelsLocale.guest_picker_rooms_label,
      guest_picker_adults_label = _getHotelsLocale.guest_picker_adults_label,
      guest_picker_children_label = _getHotelsLocale.guest_picker_children_label,
      guest_picker_room_title_label = _getHotelsLocale.guest_picker_room_title_label,
      guest_picker_max_room_label = _getHotelsLocale.guest_picker_max_room_label,
      guest_picker_adults_sub_label = _getHotelsLocale.guest_picker_adults_sub_label,
      guest_picker_children_sub_label = _getHotelsLocale.guest_picker_children_sub_label,
      guest_picker_add_room_label = _getHotelsLocale.guest_picker_add_room_label,
      guest_picker_remove_label = _getHotelsLocale.guest_picker_remove_label,
      guest_picker_children_age_label = _getHotelsLocale.guest_picker_children_age_label,
      guest_picker_children_age_sub_label = _getHotelsLocale.guest_picker_children_age_sub_label,
      under_label = _getHotelsLocale.under_label;

  var classes = useStyles((0, _brandStyles.default)(brand));

  var _useReducer = (0, _react.useReducer)(reducer, defaultGuests),
      _useReducer2 = _slicedToArray(_useReducer, 2),
      state = _useReducer2[0],
      dispatch = _useReducer2[1];

  var room = state.room;

  var stateManageHandler = function stateManageHandler(_ref2) {
    var actionType = _ref2.actionType,
        payload = _ref2.payload;
    dispatch({
      type: actionType,
      payload: payload
    });
    dispatch({
      type: 'totalGuests'
    });
  };

  var _React$useState = _react.default.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      open = _React$useState2[0],
      setOpen = _React$useState2[1];

  var handleDropdownOpen = function handleDropdownOpen() {
    setOpen(true);
  };

  var handleDropdownClose = function handleDropdownClose() {
    setOpen(false);
  };

  var handleSubmit = function handleSubmit() {
    onChange({
      room: room
    });
    handleDropdownClose();
  };

  var handleAgeChange = function handleAgeChange(roomId, childrenItem, newAge) {
    stateManageHandler({
      actionType: 'updateAge',
      payload: {
        guestType: 'children',
        roomId: roomId,
        childrenId: childrenItem.id,
        age: newAge
      }
    });
  };

  var guestsArr = [];
  room.forEach(function (guestObj) {
    guestsArr = guestsArr.concat(guestObj['guest']);
  });
  var adultsArr = guestsArr.filter(function (guestItem) {
    return guestItem.type === 'ADT';
  });
  var childrenArr = guestsArr.filter(function (guestItem) {
    return guestItem.type === 'CHD';
  });
  var totalRooms = room.length;
  var totalAdults = adultsArr.length;
  var totalChildren = childrenArr.length;
  var guestsLabel = ["".concat(totalRooms, " ").concat(guest_picker_rooms_label), "".concat(totalAdults, " ").concat(guest_picker_adults_label), "".concat(totalChildren, " ").concat(guest_picker_children_label)].join(', ');

  var RoomListItem = function RoomListItem(_ref3) {
    var guest = _ref3.guest,
        roomId = _ref3.roomId,
        rooms = _ref3.rooms;
    var guestItemAdults = guest.filter(function (guestItem) {
      return guestItem.type === 'ADT';
    });
    var guestItemChildren = guest.filter(function (guestItem) {
      return guestItem.type === 'CHD';
    });
    var totalAdultsInRoom = guestItemAdults.length;
    var totalChildrenInRoom = guestItemChildren.length;
    var totalGuestsInRoom = totalAdultsInRoom + totalChildrenInRoom;
    var ar = 'ar';
    return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.listItem
      }
    }, _react.default.createElement(_HotelRounded.default, {
      classes: {
        root: classes.iconColor
      }
    }), _react.default.createElement(_ListItemText.default, {
      classes: {
        root: lang === ar && classes.infoRtl,
        primary: classes.infoColor
      },
      primary: "".concat(guest_picker_room_title_label, " ").concat(roomId + 1)
    }), rooms.length > 1 ? _react.default.createElement(_ListItemIcon.default, null, _react.default.createElement(_core.IconButton, {
      classes: {
        root: classes.btnColor
      },
      onClick: function onClick() {
        return stateManageHandler({
          actionType: 'removeRooms',
          payload: {
            guestType: 'room',
            roomId: roomId
          }
        });
      }
    }, _react.default.createElement(_ListItemText.default, {
      primary: guest_picker_remove_label,
      classes: {
        root: classes.btnRemove,
        primary: classes.btnPrimary
      }
    }))) : null), _react.default.createElement(_Divider.default, null), _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.listItem
      }
    }, _react.default.createElement(_ListItemText.default, {
      primary: guest_picker_adults_label,
      secondary: guest_picker_adults_sub_label,
      classes: {
        root: lang === ar && classes.infoRtl,
        primary: classes.infoPrimary,
        secondary: classes.infoSecondary
      }
    }), _react.default.createElement(_ListItemIcon.default, null, _react.default.createElement(_Counter.default, {
      count: totalAdultsInRoom,
      isMinDisabled: totalAdultsInRoom <= 1,
      isMaxDisabled: totalGuestsInRoom >= 8,
      brand: brand,
      onAdd: function onAdd() {
        return stateManageHandler({
          actionType: 'addGuests',
          payload: {
            guestType: 'adult',
            roomId: roomId
          }
        });
      },
      onRemove: function onRemove() {
        return stateManageHandler({
          actionType: 'removeGuests',
          payload: {
            guestType: 'adult',
            roomId: roomId
          }
        });
      }
    }))), _react.default.createElement(_Divider.default, null), _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.listItem
      }
    }, _react.default.createElement(_ListItemText.default, {
      primary: guest_picker_children_label,
      secondary: guest_picker_children_sub_label,
      classes: {
        root: lang === ar && classes.infoRtl,
        primary: classes.infoPrimary,
        secondary: classes.infoSecondary
      }
    }), _react.default.createElement(_ListItemIcon.default, null, _react.default.createElement(_Counter.default, {
      count: totalChildrenInRoom,
      isMinDisabled: totalChildrenInRoom <= 0,
      isMaxDisabled: totalGuestsInRoom >= 8,
      brand: brand,
      onAdd: function onAdd() {
        return stateManageHandler({
          actionType: 'addGuests',
          payload: {
            guestType: 'children',
            roomId: roomId
          }
        });
      },
      onRemove: function onRemove() {
        return stateManageHandler({
          actionType: 'removeGuests',
          payload: {
            guestType: 'children',
            roomId: roomId
          }
        });
      }
    }))), guestItemChildren && guestItemChildren.length > 0 && _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.listItem
      }
    }, _react.default.createElement("div", {
      className: classes.ageContainer
    }, guest_picker_children_age_label)), _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.listItem
      }
    }, _react.default.createElement(_Grid.default, {
      container: true,
      classes: {
        root: "".concat(classes.listItemContainer, " ").concat(lang === ar && classes.infoRtl)
      }
    }, guestItemChildren.map(function (childrenItem, idx) {
      return _react.default.createElement(_react.default.Fragment, {
        key: idx
      }, _react.default.createElement(_Grid.default, {
        classes: {
          root: classes.ageSelect
        }
      }, _react.default.createElement(_AgeDropDown.default, {
        lang: lang,
        handleAgeChange: handleAgeChange,
        childrenItem: childrenItem,
        roomId: roomId,
        value: childrenItem.age
      })));
    }))), _react.default.createElement(_Divider.default, null), roomId === rooms.length - 1 && rooms.length < 4 ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.primaryColor
      },
      button: true,
      onClick: function onClick() {
        return stateManageHandler({
          actionType: 'addRooms',
          payload: {
            guestType: 'room'
          }
        });
      }
    }, _react.default.createElement(_ListItemIcon.default, {
      classes: {
        root: classes.ListItemIcon
      }
    }, _react.default.createElement(_AddCircleRounded.default, {
      classes: {
        root: classes.AddCircleRoundedIcon
      }
    })), _react.default.createElement(_ListItemText.default, {
      classes: {
        root: lang === ar && classes.infoRtl,
        primary: classes.addBtn
      },
      primary: guest_picker_add_room_label
    }))) : null);
  };

  return _react.default.createElement("div", {
    className: classes.container
  }, _react.default.createElement(_Field.default, {
    label: guest_picker_guests_label,
    value: guestsLabel,
    iconComponent: function iconComponent(props) {
      return _react.default.createElement(_SupervisorAccount.default, props);
    },
    onClick: handleDropdownOpen,
    brand: brand,
    lang: lang
  }), _react.default.createElement(_Dialog.default, {
    disableEnforceFocus: true,
    title: guest_picker_guests_label,
    isOpen: open,
    onOkClick: handleSubmit,
    onClose: handleDropdownClose,
    brand: brand,
    isMobile: isMobile,
    lang: lang
  }, _react.default.createElement(_List.default, {
    classes: {
      root: classes.list
    }
  }, _react.default.createElement(_ListItem.default, {
    classes: {
      root: classes.roomsWarningTitle
    }
  }, _react.default.createElement(_ListItemText.default, {
    classes: {
      primary: classes.addBtn
    },
    secondary: guest_picker_max_room_label
  })), _react.default.createElement(_Divider.default, null), room.map(function (roomItem, idx, rooms) {
    return _react.default.createElement(RoomListItem, _extends({}, roomItem, {
      rooms: rooms,
      key: idx,
      roomId: idx
    }));
  }))));
};

var _default = GuestsPicker;
exports.default = _default;