alm-search-01/dist/fields/LocationDialog.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 _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));

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

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

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

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

var _AppBar = _interopRequireDefault(require("@material-ui/core/AppBar"));

var _Toolbar = _interopRequireDefault(require("@material-ui/core/Toolbar"));

var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));

var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));

var _ArrowBack = _interopRequireDefault(require("@material-ui/icons/ArrowBack"));

var _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));

var _Search = _interopRequireDefault(require("@material-ui/icons/Search"));

var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));

var _AirplanemodeActive = _interopRequireDefault(require("@material-ui/icons/AirplanemodeActive"));

var _Star = _interopRequireDefault(require("@material-ui/icons/Star"));

var _LocationOn = _interopRequireDefault(require("@material-ui/icons/LocationOn"));

var _DirectionsBus = _interopRequireDefault(require("@material-ui/icons/DirectionsBus"));

var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));

var _axios = _interopRequireDefault(require("axios"));

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

var _debounce = require("../utils/debounce");

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

var _modal = _interopRequireDefault(require("../utils/modal"));

var _Loader = _interopRequireDefault(require("../components/Loader"));

var _fare = require("@tajawalae/web-flight-sdk/lib/clients/fare.client");

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 _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; } }

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 _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); }

var useStyles = (0, _styles.makeStyles)(function (theme) {
  return {
    appBar: {
      position: "relative",
      background: function background(getBrandStyles) {
        return getBrandStyles.dialogBgColor;
      },
      color: function color(getBrandStyles) {
        return getBrandStyles.dialogTextColor;
      },
      '&:hover': {
        background: function background(getBrandStyles) {
          return getBrandStyles.dialogBgColor;
        }
      }
    },
    title: {
      fontSize: 16
    },
    container: {
      flexFlow: "column"
    },
    listItem: {
      padding: 0
    },
    listItemSearch: {
      padding: "0 10px",
      background: function background(getBrandStyles) {
        return getBrandStyles.searchBoxColor;
      },
      borderRadius: 4,
      marginBottom: 10
    },
    searchIcon: {
      color: "#97a1a6",
      fontSize: 20
    },
    inputRoot: {
      display: "flex",
      flex: 1,
      padding: "0 10px"
    },
    inputInput: {
      padding: "8px 0 6px"
    },
    titleWrapper: {
      paddingLeft: theme.spacing(2),
      paddingRight: theme.spacing(2),
      flex: 1
    },
    iataWrapper: {
      display: "flex",
      justifyContent: "flex-end",
      flex: "inherit"
    },
    iataTitle: {
      color: "#97a1a6"
    },
    listTitle: {
      fontSize: "14px",
      color: "#333",
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      display: "block"
    },
    subtitle: {
      fontSize: "12px",
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap"
    },
    iconColor: {
      color: "#97a1a6"
    },
    arrowBackIcon: {
      marginLeft: theme.spacing(-2)
    },
    divider: {
      marginLeft: 56
    },
    itemListing: {
      paddingTop: 0,
      paddingBottom: 2
    },
    suggestionList: {
      padding: 0
    },
    largTitle: {
      background: "#f4f4f4",
      padding: "14px 16px 8px 16px",
      margin: 0,
      color: "#333"
    },
    childItem: {
      padding: "0 0 0 40px"
    },
    childDivider: {
      marginLeft: 96,
      marginRight: 0
    },
    closeIcon: {
      padding: 0
    },
    closeIconSvg: {
      width: 20,
      height: 20,
      background: '#97a1a6',
      color: '#fff',
      padding: 2,
      borderRadius: '50%'
    },
    // Use For only RTL
    arrowBackIconRtl: {
      transform: "rotate(-180deg)",
      marginLeft: theme.spacing(0),
      marginRight: theme.spacing(-2)
    },
    infoRtl: {
      textAlign: "right"
    },
    dividerRtl: {
      marginLeft: 0,
      marginRight: 56
    },
    childDividerRtl: {
      marginLeft: 0,
      marginRight: 96
    },
    childItemRtl: {
      padding: "0 40px 0 0"
    }
  };
});

var Transition = _react.default.forwardRef(function Transition(props, ref) {
  return _react.default.createElement(_Slide.default, _extends({
    direction: "up",
    ref: ref
  }, props));
});

var groupDataByCities = function groupDataByCities(array, key) {
  return array.reduce(function (result, currentValue) {
    (result[currentValue[key]] = result[currentValue[key]] || []).push(currentValue);
    return result;
  }, {});
};

function LocationDialog(_ref) {
  var open = _ref.open,
      handleClose = _ref.handleClose,
      locationHandler = _ref.locationHandler,
      type = _ref.type,
      topDest = _ref.topDest,
      relatedFromDest = _ref.relatedFromDest,
      from = _ref.from,
      lang = _ref.lang,
      isMobile = _ref.isMobile,
      brand = _ref.brand;

  var _getHotelsLocale = (0, _getHotelsLocale2.default)(lang),
      search_origin = _getHotelsLocale.search_origin,
      search_destination = _getHotelsLocale.search_destination,
      placeholder_label_to = _getHotelsLocale.placeholder_label_to,
      placeholder_label_from = _getHotelsLocale.placeholder_label_from,
      top_origins_label = _getHotelsLocale.top_origins_label,
      top_destination_label = _getHotelsLocale.top_destination_label,
      origins_label = _getHotelsLocale.origins_label,
      destination_label = _getHotelsLocale.destination_label,
      all_airports = _getHotelsLocale.all_airports;

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

  var _useState = (0, _react.useState)([]),
      _useState2 = _slicedToArray(_useState, 2),
      searchResult = _useState2[0],
      setSeachedResult = _useState2[1];

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

  var debounceOnChange = _react.default.useCallback((0, _debounce.debounce)(getData, 500), []);

  var _useState3 = (0, _react.useState)([]),
      _useState4 = _slicedToArray(_useState3, 2),
      relatedDestinations = _useState4[0],
      setRelatedDestinations = _useState4[1];

  var _useState5 = (0, _react.useState)(),
      _useState6 = _slicedToArray(_useState5, 2),
      searchText = _useState6[0],
      setSearchText = _useState6[1];

  var searchAPI = "https://www.tajawal.com/api/v3/flights/service/shazam/api/search?query=";

  function getData(value) {
    setLoading(true);

    _fare.FareClient.getAirportList(value).then(function (res) {
      setLoading(false);
      var parent = {},
          child = [],
          middle = [],
          final = [];
      var newData = groupDataByCities(res, "main_city_name");

      for (var _i2 = 0, _Object$entries = Object.entries(newData); _i2 < _Object$entries.length; _i2++) {
        var _Object$entries$_i = _slicedToArray(_Object$entries[_i2], 2),
            name = _Object$entries$_i[0],
            dat = _Object$entries$_i[1];

        for (var _i4 = 0, _Object$entries3 = Object.entries(dat); _i4 < _Object$entries3.length; _i4++) {
          var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i4], 2),
              k = _Object$entries3$_i[0],
              d = _Object$entries3$_i[1];

          d.type === "6" ? parent = d : child.push(d);
        }

        if (Object.keys(parent).length !== 0) {
          parent["children"] = _toConsumableArray(child);
        }

        middle[name] = Object.keys(parent).length !== 0 ? [parent] : _toConsumableArray(child);
        parent = [];
        child = [];
      }

      for (var _i3 = 0, _Object$entries2 = Object.entries(middle); _i3 < _Object$entries2.length; _i3++) {
        var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i3], 2),
            newName = _Object$entries2$_i[0],
            da = _Object$entries2$_i[1];

        for (var _i5 = 0, _Object$entries4 = Object.entries(da); _i5 < _Object$entries4.length; _i5++) {
          var _Object$entries4$_i = _slicedToArray(_Object$entries4[_i5], 2),
              i = _Object$entries4$_i[0],
              j = _Object$entries4$_i[1];

          final.push(j);
        }
      }

      setSeachedResult(final);
    }).catch(function () {
      return setLoading(false);
    });
  }

  var onClickHandler = function onClickHandler(type, cityCode, cityName, iata, countryName, airportName) {
    locationHandler(type, cityCode, cityName, iata, countryName, airportName);
    handleClose();
  };

  if (!!relatedFromDest && !!from && relatedDestinations.length === 0) {
    if (from in relatedFromDest) {
      setRelatedDestinations(relatedFromDest[from]);
    }
  }

  var onClear = function onClear() {
    setSeachedResult([]);
    setSearchText('');
  };

  var handleDialogClose = function handleDialogClose() {
    setSeachedResult([]);
    handleClose();
  }; // Scrolling stop


  (0, _react.useEffect)(function () {
    (0, _modal.default)(isMobile, open);
  }, [open]);
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Dialog.default, {
    disableEnforceFocus: true,
    fullScreen: true,
    open: open,
    onClose: handleDialogClose,
    TransitionComponent: Transition
  }, _react.default.createElement(_AppBar.default, {
    className: classes.appBar
  }, _react.default.createElement(_Toolbar.default, {
    classes: {
      root: classes.container
    }
  }, _react.default.createElement(_ListItem.default, {
    classes: {
      root: classes.listItem
    }
  }, _react.default.createElement(_IconButton.default, {
    classes: {
      root: "".concat(classes.arrowBackIcon, " ").concat(lang === ar && classes.arrowBackIconRtl)
    },
    edge: "start",
    color: "inherit",
    onClick: handleDialogClose,
    "aria-label": "close"
  }, _react.default.createElement(_ArrowBack.default, null)), _react.default.createElement(_Typography.default, {
    variant: "h6",
    className: classes.title
  }, type === "departure" ? search_origin : search_destination)), _react.default.createElement(_ListItem.default, {
    classes: {
      root: classes.listItemSearch
    }
  }, _react.default.createElement(_Search.default, {
    classes: {
      root: classes.searchIcon
    }
  }), _react.default.createElement(_InputBase.default, {
    value: searchText,
    placeholder: type === "departure" ? placeholder_label_from : placeholder_label_to,
    classes: {
      root: classes.inputRoot,
      input: classes.inputInput
    },
    inputProps: {
      "aria-label": "search"
    },
    onChange: function onChange(e) {
      setSearchText(e.target.value);
      debounceOnChange(e.target.value);
    }
  }), searchText && _react.default.createElement(_IconButton.default, {
    onClick: onClear,
    className: classes.closeIcon,
    "aria-label": "clear"
  }, _react.default.createElement(_Close.default, {
    className: classes.closeIconSvg
  }))))), loading && _react.default.createElement(_Loader.default, {
    brancd: brand
  }), _react.default.createElement(_List.default, {
    classes: {
      root: classes.itemListing
    }
  }, !searchText && searchResult.length === 0 && !!relatedDestinations && relatedDestinations.length != 0 && _react.default.createElement(_ListItem.default, {
    classes: {
      root: classes.suggestionList
    }
  }, _react.default.createElement(_ListItemText.default, {
    classes: {
      root: "".concat(classes.largTitle, " ").concat(lang === ar && classes.infoRtl)
    },
    primary: top_destination_label
  })), !searchText && searchResult.length === 0 && !!relatedDestinations && relatedDestinations.map(function (item) {
    return _react.default.createElement(_react.default.Fragment, {
      key: item.iata
    }, _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.suggestionList
      }
    }, _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.itemListing
      },
      button: true,
      onClick: function onClick() {
        return onClickHandler(type, item.iata, item.main_city_name, item.iata, item.country_name, item.name);
      }
    }, _react.default.createElement(_Star.default, {
      classes: {
        root: classes.iconColor
      }
    }), _react.default.createElement(_ListItemText.default, {
      primary: "".concat(item.main_city_name, ",").concat(item.country_name),
      secondary: item.name,
      classes: {
        root: "".concat(classes.titleWrapper, " ").concat(lang === ar && classes.infoRtl),
        primary: classes.listTitle,
        secondary: classes.subtitle
      }
    }), _react.default.createElement(_ListItemText.default, {
      primary: item.iata,
      classes: {
        root: classes.iataWrapper,
        primary: classes.listTitle
      }
    }))), _react.default.createElement(_Divider.default, {
      classes: {
        root: "".concat(classes.divider, " ").concat(lang === ar && classes.dividerRtl)
      }
    }));
  }), !searchText && searchResult.length === 0 && relatedDestinations.length === 0 && topDest && _react.default.createElement(_ListItem.default, {
    classes: {
      root: classes.suggestionList
    }
  }, _react.default.createElement(_ListItemText.default, {
    classes: {
      root: "".concat(classes.largTitle, " ").concat(lang === ar && classes.infoRtl)
    },
    primary: type === "departure" ? top_origins_label : top_destination_label
  })), !searchText && searchResult.length === 0 && relatedDestinations.length === 0 && topDest && topDest.map(function (item) {
    return _react.default.createElement(_react.default.Fragment, {
      key: item.iata
    }, _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.suggestionList
      }
    }, _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.itemListing
      },
      button: true,
      onClick: function onClick() {
        return onClickHandler(type, item.iata, item.main_city_name, item.iata, item.country_name, item.name);
      }
    }, _react.default.createElement(_Star.default, {
      classes: {
        root: classes.iconColor
      }
    }), _react.default.createElement(_ListItemText.default, {
      primary: "".concat(item.main_city_name, ",").concat(item.country_name),
      secondary: item.name,
      classes: {
        root: "".concat(classes.titleWrapper, " ").concat(lang === ar && classes.infoRtl),
        primary: classes.listTitle,
        secondary: classes.subtitle
      }
    }), _react.default.createElement(_ListItemText.default, {
      primary: item.iata,
      classes: {
        root: classes.iataWrapper,
        primary: classes.iataTitle
      }
    }))), _react.default.createElement(_Divider.default, {
      classes: {
        root: "".concat(classes.divider, " ").concat(lang === ar && classes.dividerRtl)
      }
    }));
  }), searchResult.length !== 0 && _react.default.createElement(_ListItem.default, {
    classes: {
      root: classes.suggestionList
    }
  }, _react.default.createElement(_ListItemText.default, {
    classes: {
      root: "".concat(classes.largTitle, " ").concat(lang === ar && classes.infoRtl)
    },
    primary: type === "departure" ? origins_label : destination_label
  })), searchResult.length !== 0 && searchResult.map(function (item) {
    var classType = item.type;
    return _react.default.createElement(_react.default.Fragment, {
      key: item.id_airport
    }, _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.suggestionList
      }
    }, _react.default.createElement(_ListItem.default, {
      classes: {
        root: classes.itemListing
      },
      button: true,
      onClick: function onClick() {
        return onClickHandler(type, item.iata, item.main_city_name, item.iata, item.country_name, item.name);
      }
    }, classType == 6 && _react.default.createElement(_LocationOn.default, {
      classes: {
        root: classes.iconColor
      }
    }), classType == 7 && _react.default.createElement(_DirectionsBus.default, {
      classes: {
        root: classes.iconColor
      }
    }), !(classType == 6 || classType == 7) && _react.default.createElement(_AirplanemodeActive.default, {
      classes: {
        root: classes.iconColor
      }
    }), _react.default.createElement(_ListItemText.default, {
      primary: "".concat(item.main_city_name, ", ").concat(item.country_name),
      secondary: classType == 6 ? all_airports : item.name,
      classes: {
        root: "".concat(classes.titleWrapper, " ").concat(lang === ar && classes.infoRtl),
        primary: classes.listTitle,
        secondary: classes.subtitle
      }
    }), !(classType == 6) && _react.default.createElement(_ListItemText.default, {
      primary: item.iata,
      classes: {
        root: classes.iataWrapper,
        primary: classes.iataTitle
      }
    }))), _react.default.createElement(_Divider.default, {
      classes: {
        root: "".concat(classes.divider, " ").concat(lang === ar && classes.dividerRtl)
      }
    }), item.children && item.children.map(function (child) {
      return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_ListItem.default, {
        classes: {
          root: "".concat(classes.childItem, " ").concat(lang === ar && classes.childItemRtl)
        }
      }, _react.default.createElement(_ListItem.default, {
        classes: {
          root: classes.itemListing
        },
        button: true,
        onClick: function onClick() {
          return onClickHandler(type, child.iata, child.main_city_name, child.iata, child.country_name, child.name);
        }
      }, child.type == 6 && _react.default.createElement(_LocationOn.default, {
        classes: {
          root: classes.iconColor
        }
      }), child.type == 7 && _react.default.createElement(_DirectionsBus.default, {
        classes: {
          root: classes.iconColor
        }
      }), !(child.type == 6 || child.type == 7) && _react.default.createElement(_AirplanemodeActive.default, {
        classes: {
          root: classes.iconColor
        }
      }), _react.default.createElement(_ListItemText.default, {
        primary: "".concat(child.main_city_name, ", ").concat(child.country_name),
        secondary: child.name,
        classes: {
          root: "".concat(classes.titleWrapper, " ").concat(lang === ar && classes.infoRtl),
          primary: classes.listTitle,
          secondary: classes.subtitle
        }
      }), _react.default.createElement(_ListItemText.default, {
        primary: child.iata,
        classes: {
          root: classes.iataWrapper,
          primary: classes.iataTitle
        }
      }))), _react.default.createElement(_Divider.default, {
        classes: {
          root: "".concat(classes.childDivider, " ").concat(lang === ar && classes.childDividerRtl)
        }
      }));
    }));
  }))));
}

var _default = LocationDialog;
exports.default = _default;