authscape 1.0.138 → 1.0.140

package/index.js

@@ -721,10 +721,14 @@ exports["default"] = GooglePlacesModal;
 var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireDefault(require("@mui/material/Button"));
 var _system = require("@mui/system");
-var _PlacesAutocomplete = _interopRequireDefault(require("../modals/PlacesAutocomplete"));
 var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
 var _Grid = _interopRequireDefault(require("@mui/material/Grid"));
 var _script = _interopRequireDefault(require("next/script"));
+var _material = require("@mui/material");
+var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
+var _LocationOnRounded = _interopRequireDefault(require("@mui/icons-material/LocationOnRounded"));
+var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
+var _reactCoolOnclickoutside = _interopRequireDefault(require("react-cool-onclickoutside"));
 var _usePlacesAutocomplete = _interopRequireWildcard(require("use-places-autocomplete"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -735,10 +739,265 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function GooglePlacesModal(_ref) {
-  var onSave = _ref.onSave,
-    _ref$createButtonText = _ref.createButtonText,
-    createButtonText = _ref$createButtonText === void 0 ? "Save" : _ref$createButtonText;
+var AutoCompleteDialog = function AutoCompleteDialog(_ref) {
+  var placeholder = _ref.placeholder,
+    onSelected = _ref.onSelected,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange;
+  var txtAddressField = (0, _react.useRef)(null);
+  var dismissSuggestions = function dismissSuggestions() {
+    clearSuggestions();
+  };
+  var ref = (0, _reactCoolOnclickoutside["default"])(dismissSuggestions);
+  var _usePlacesAutocomplet = (0, _usePlacesAutocomplete["default"])({
+      requestOptions: {
+        /* Define search scope here */
+      },
+      debounce: 1000
+    }),
+    ready = _usePlacesAutocomplet.ready,
+    value = _usePlacesAutocomplet.value,
+    _usePlacesAutocomplet2 = _usePlacesAutocomplet.suggestions,
+    status = _usePlacesAutocomplet2.status,
+    data = _usePlacesAutocomplet2.data,
+    setValue = _usePlacesAutocomplet.setValue,
+    clearSuggestions = _usePlacesAutocomplet.clearSuggestions;
+  var handleInput = function handleInput(e) {
+    e.stopPropagation();
+
+    // Update the keyword of the input element
+    setValue(e.target.value);
+    onChange(e.target.value);
+  };
+  (0, _react.useEffect)(function () {
+    setValue(defaultValue); // test this!!!!
+  }, [defaultValue]);
+  var determineComponentType = function determineComponentType(component) {
+    var returnVal = {};
+    for (var index = 0; index < component.types.length; index++) {
+      var componentType = component.types[index];
+      switch (componentType) {
+        case "street_number":
+          returnVal = {
+            componentType: "Street_number",
+            long_name: component.long_name,
+            short_name: component.short_name
+          };
+          break;
+        case "route":
+          returnVal = {
+            componentType: "Route",
+            long_name: component.long_name,
+            short_name: component.short_name
+          };
+          break;
+        case "locality":
+          returnVal = {
+            componentType: "City",
+            long_name: component.long_name,
+            short_name: component.short_name
+          };
+          break;
+        case "administrative_area_level_2":
+          returnVal = {
+            componentType: "County",
+            long_name: component.long_name,
+            short_name: component.short_name
+          };
+          break;
+        case "administrative_area_level_1":
+          returnVal = {
+            componentType: "State",
+            long_name: component.long_name,
+            short_name: component.short_name
+          };
+          break;
+        case "country":
+          returnVal = {
+            componentType: "country",
+            long_name: component.long_name,
+            short_name: component.short_name
+          };
+          break;
+        case "postal_code":
+          returnVal = {
+            componentType: "postal_code",
+            long_name: component.long_name,
+            short_name: component.short_name
+          };
+          break;
+        case "postal_code_suffix":
+          returnVal = {
+            componentType: "postal_code_suffix",
+            long_name: component.long_name,
+            short_name: component.short_name
+          };
+          break;
+      }
+    }
+    return returnVal;
+  };
+  var getSimplifyResult = function getSimplifyResult(result) {
+    var street_number = "";
+    var route = "";
+    var city = "";
+    var county = "";
+    var state = "";
+    var country = "";
+    var postal_code = "";
+    var postal_code_suffix = "";
+    var lat = null;
+    var _long = null;
+    var mapUrl = "";
+    var placeId = null;
+    for (var index = 0; index < result.address_components.length; index++) {
+      var component = result.address_components[index];
+      var response = determineComponentType(component);
+      if (response.componentType == "Street_number") {
+        street_number = response.long_name;
+      } else if (response.componentType == "Route") {
+        route = response.long_name;
+      } else if (response.componentType == "City") {
+        city = response.long_name;
+      } else if (response.componentType == "County") {
+        county = response.long_name;
+      } else if (response.componentType == "State") {
+        state = response.short_name;
+      } else if (response.componentType == "country") {
+        country = response.long_name;
+      } else if (response.componentType == "postal_code") {
+        postal_code = response.long_name;
+      } else if (response.componentType == "postal_code_suffix") {
+        postal_code_suffix = response.long_name;
+      }
+    }
+    if (result.geometry != null && result.geometry.location != null) {
+      lat = result.geometry.location.lat;
+      _long = result.geometry.location.lng;
+    }
+    mapUrl = result.url;
+    placeId = result.place_id;
+    return {
+      address: street_number + " " + route,
+      city: city,
+      state: state,
+      county: county,
+      postalCode: postal_code,
+      country: country,
+      lat: lat,
+      "long": _long,
+      mapUrl: mapUrl,
+      placeId: placeId
+    };
+  };
+  var handleSelect = function handleSelect(_ref2) {
+    var description = _ref2.description,
+      place_id = _ref2.place_id;
+    return function () {
+      var parameter = {
+        // Use the "place_id" of suggestion from the dropdown (object), here just taking first suggestion for brevity
+        placeId: place_id
+        // Specify the return data that you want (optional)
+        //fields: ["name", "rating"],
+      };
+
+      clearSuggestions();
+      (0, _usePlacesAutocomplete.getDetails)(parameter).then(function (result) {
+        var response = getSimplifyResult(result);
+        if (response != null) {
+          onSelected(response);
+          setValue(response.address, false);
+        }
+      })["catch"](function (error) {
+        alert(error);
+      });
+
+      // When user selects a place, we can replace the keyword without request data from API
+      // by setting the second parameter to "false"
+      //setValue(description, false);
+      // clearSuggestions();
+
+      // var parseUSAddress = parser.parseLocation(description);
+
+      // // Get latitude and longitude via utility functions
+      // getGeocode({ address: description }).then((results) => {
+      //   const { lat, lng } = getLatLng(results[0]);
+      //   //console.log("📍 Coordinates: ", { lat, lng });
+
+      //   const zipCode = getZipCode(results[0], false);
+
+      //   let address = "";
+      //   if (parseUSAddress.number != null)
+      //   {
+      //     address += parseUSAddress.number + " ";
+      //   }
+
+      //   if (parseUSAddress.street != null)
+      //   {
+      //     address += parseUSAddress.street + " ";
+      //   }
+
+      //   if (parseUSAddress.type != null)
+      //   {
+      //     address += parseUSAddress.type;
+      //   }
+
+      //   onSelected({
+      //     address: address,
+      //     city: parseUSAddress.city,
+      //     state: parseUSAddress.state,
+      //     zip: zipCode,
+      //     lat: lat,
+      //     lng: lng
+      //   });
+
+      //   setValue(address, false);
+
+      // });
+    };
+  };
+
+  var renderSuggestions = function renderSuggestions() {
+    return data.map(function (suggestion) {
+      var place_id = suggestion.place_id,
+        _suggestion$structure = suggestion.structured_formatting,
+        main_text = _suggestion$structure.main_text,
+        secondary_text = _suggestion$structure.secondary_text;
+      return /*#__PURE__*/_react["default"].createElement(_material.MenuItem, {
+        key: place_id,
+        onClick: handleSelect(suggestion, place_id),
+        sx: {
+          paddingRight: 2
+        }
+      }, /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], null, /*#__PURE__*/_react["default"].createElement(_LocationOnRounded["default"], {
+        fontSize: "small"
+      })), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], null, /*#__PURE__*/_react["default"].createElement("strong", null, main_text), " ", /*#__PURE__*/_react["default"].createElement("small", null, secondary_text)));
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
+    ref: txtAddressField,
+    autoFocus: true,
+    autoComplete: "new-password",
+    label: placeholder,
+    variant: "outlined",
+    fullWidth: true,
+    value: value,
+    onChange: handleInput
+  }), status == "OK" && /*#__PURE__*/_react["default"].createElement(_material.MenuList, {
+    ref: ref,
+    sx: {
+      position: "absolute",
+      zIndex: 9999,
+      top: 125,
+      backgroundColor: "white",
+      border: "1px solid black"
+    }
+  }, renderSuggestions()));
+};
+function GooglePlacesModal(_ref3) {
+  var onSave = _ref3.onSave,
+    _ref3$createButtonTex = _ref3.createButtonText,
+    createButtonText = _ref3$createButtonTex === void 0 ? "Save" : _ref3$createButtonTex;
   var _useState = (0, _react.useState)(""),
     _useState2 = _slicedToArray(_useState, 2),
     address = _useState2[0],
@@ -763,7 +1022,7 @@ function GooglePlacesModal(_ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     lng = _useState12[0],
     setLng = _useState12[1];
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_PlacesAutocomplete["default"], {
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(AutoCompleteDialog, {
     placeholder: "Address",
     defaultValue: address,
     onSelected: function onSelected(data) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.138",
+  "version": "1.0.140",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -38,6 +38,8 @@
     "next": "^13.3.2",
     "nookies": "^2.5.2",
     "query-string": "^7.1.1",
-    "react-data-table-component": "^7.5.2"
+    "react-cool-onclickoutside": "^1.7.0",
+    "react-data-table-component": "^7.5.2",
+    "use-places-autocomplete": "^4.0.0"
   }
 }

package/src/components/GoogleMapsAutoComplete.js

@@ -1,10 +1,14 @@
 import React, { useState, useRef, useEffect } from "react";
 import Button from "@mui/material/Button";
 import { Box } from "@mui/system";
-import AutoCompleteDialog from "../modals/PlacesAutocomplete";
 import TextField from "@mui/material/TextField";
 import Grid from "@mui/material/Grid";
 import Script from 'next/script';
+import { MenuItem, MenuList } from "@mui/material";
+import ListItemIcon from '@mui/material/ListItemIcon';
+import LocationOnRoundedIcon from '@mui/icons-material/LocationOnRounded';
+import ListItemText from '@mui/material/ListItemText';
+import useOnclickOutside from "react-cool-onclickoutside";
 
 import usePlacesAutocomplete, {
   getGeocode,
@@ -13,6 +17,322 @@ import usePlacesAutocomplete, {
   getLatLng,
 } from "use-places-autocomplete";
 
+const AutoCompleteDialog = ({placeholder, onSelected, defaultValue, onChange}) => {
+
+    const txtAddressField = useRef(null);
+  
+    const dismissSuggestions = () => {
+      clearSuggestions();
+    };
+  
+    const ref = useOnclickOutside(dismissSuggestions);
+  
+    const {
+      ready,
+      value,
+      suggestions: { status, data },
+      setValue,
+      clearSuggestions,
+    } = usePlacesAutocomplete({
+      requestOptions: {
+        /* Define search scope here */
+      },
+      debounce: 1000,
+    });
+  
+    const handleInput = (e) => {
+      e.stopPropagation()
+  
+      // Update the keyword of the input element
+      setValue(e.target.value);
+  
+      onChange(e.target.value);
+    };
+  
+    useEffect(() => {
+  
+      setValue(defaultValue) // test this!!!!
+  
+    }, [defaultValue])
+  
+  
+    const determineComponentType = (component) => {
+  
+      let returnVal = {};
+  
+      for (let index = 0; index < component.types.length; index++) {
+        const componentType = component.types[index];
+  
+  
+        switch(componentType)
+        {
+          case "street_number":
+  
+            returnVal = {
+              componentType: "Street_number",
+              long_name: component.long_name,
+              short_name: component.short_name
+            }
+  
+            break;
+          case "route":
+  
+            returnVal = {
+              componentType: "Route",
+              long_name: component.long_name,
+              short_name: component.short_name
+            }
+  
+            break;
+  
+          case "locality":
+  
+            returnVal = {
+              componentType: "City",
+              long_name: component.long_name,
+              short_name: component.short_name
+            }
+  
+            break;
+  
+          case "administrative_area_level_2":
+  
+            returnVal = {
+              componentType: "County",
+              long_name: component.long_name,
+              short_name: component.short_name
+            }
+  
+            break;
+  
+          case "administrative_area_level_1":
+  
+            returnVal = {
+              componentType: "State",
+              long_name: component.long_name,
+              short_name: component.short_name
+            }
+  
+            break;
+  
+          case "country":
+  
+            returnVal = {
+              componentType: "country",
+              long_name: component.long_name,
+              short_name: component.short_name
+            }
+  
+            break;
+  
+          case "postal_code":
+  
+            returnVal = {
+              componentType: "postal_code",
+              long_name: component.long_name,
+              short_name: component.short_name
+            }
+  
+            break;
+  
+          case "postal_code_suffix":
+  
+            returnVal = {
+              componentType: "postal_code_suffix",
+              long_name: component.long_name,
+              short_name: component.short_name
+            }
+  
+            break;
+        }
+      }
+  
+      return returnVal;
+    }
+  
+    const getSimplifyResult = (result) => {
+  
+      let street_number = "";
+      let route = "";
+      let city = "";
+      let county = "";
+      let state = "";
+      let country = "";
+      let postal_code = "";
+      let postal_code_suffix = "";
+      let lat = null;
+      let long = null;
+      let mapUrl = "";
+      let placeId = null;
+  
+      for (let index = 0; index < result.address_components.length; index++) {
+        const component = result.address_components[index];
+  
+        let response = determineComponentType(component);
+  
+        if (response.componentType == "Street_number")
+        {
+          street_number = response.long_name;
+        }
+        else if (response.componentType == "Route")
+        {
+          route = response.long_name;
+        }
+        else if (response.componentType == "City")
+        {
+          city = response.long_name;
+        }
+        else if (response.componentType == "County")
+        {
+          county = response.long_name;
+        }
+        else if (response.componentType == "State")
+        {
+          state = response.short_name;
+        }
+        else if (response.componentType == "country")
+        {
+          country = response.long_name;
+        }
+        else if (response.componentType == "postal_code")
+        {
+          postal_code = response.long_name;
+        }
+        else if (response.componentType == "postal_code_suffix")
+        {
+          postal_code_suffix = response.long_name;
+        }
+      }
+  
+      if (result.geometry != null && result.geometry.location != null)
+      {
+        lat = result.geometry.location.lat;
+        long = result.geometry.location.lng;
+      }
+  
+      mapUrl = result.url;
+      placeId = result.place_id;
+      
+      return {
+        address: (street_number + " " + route),
+        city: city,
+        state: state,
+        county: county,
+        postalCode: postal_code,
+        country: country,
+        lat: lat,
+        long: long,
+        mapUrl: mapUrl,
+        placeId: placeId
+      };
+  
+    }
+  
+    const handleSelect =
+      ({ description, place_id }) =>
+      () => {
+  
+        const parameter = {
+          // Use the "place_id" of suggestion from the dropdown (object), here just taking first suggestion for brevity
+          placeId: place_id,
+          // Specify the return data that you want (optional)
+          //fields: ["name", "rating"],
+        };
+  
+        clearSuggestions();
+  
+        getDetails(parameter)
+          .then((result) => {
+  
+            let response = getSimplifyResult(result);
+            if (response != null)
+            {
+              onSelected(response);
+  
+              setValue(response.address, false);
+            }
+  
+          })
+          .catch((error) => {
+            alert(error);
+          });
+  
+  
+        // When user selects a place, we can replace the keyword without request data from API
+        // by setting the second parameter to "false"
+        //setValue(description, false);
+        // clearSuggestions();
+  
+        // var parseUSAddress = parser.parseLocation(description);
+  
+        // // Get latitude and longitude via utility functions
+        // getGeocode({ address: description }).then((results) => {
+        //   const { lat, lng } = getLatLng(results[0]);
+        //   //console.log("📍 Coordinates: ", { lat, lng });
+  
+        //   const zipCode = getZipCode(results[0], false);
+  
+  
+        //   let address = "";
+        //   if (parseUSAddress.number != null)
+        //   {
+        //     address += parseUSAddress.number + " ";
+        //   }
+  
+        //   if (parseUSAddress.street != null)
+        //   {
+        //     address += parseUSAddress.street + " ";
+        //   }
+  
+        //   if (parseUSAddress.type != null)
+        //   {
+        //     address += parseUSAddress.type;
+        //   }
+          
+        //   onSelected({
+        //     address: address,
+        //     city: parseUSAddress.city,
+        //     state: parseUSAddress.state,
+        //     zip: zipCode,
+        //     lat: lat,
+        //     lng: lng
+        //   });
+  
+        //   setValue(address, false);
+  
+        // });
+      };
+  
+    const renderSuggestions = () =>
+      data.map((suggestion) => {
+        const {
+          place_id,
+          structured_formatting: { main_text, secondary_text },
+        } = suggestion;
+  
+        return (
+          <MenuItem key={place_id} onClick={handleSelect(suggestion, place_id)} sx={{paddingRight:2}}>
+            <ListItemIcon>
+              <LocationOnRoundedIcon fontSize="small" />
+            </ListItemIcon>
+            <ListItemText><strong>{main_text}</strong> <small>{secondary_text}</small></ListItemText>
+          </MenuItem>
+        );
+      });
+  
+    return (
+      <>
+        <TextField ref={txtAddressField} autoFocus={true} autoComplete="new-password" label={placeholder} variant="outlined" fullWidth={true} value={value} onChange={handleInput} />
+  
+        {status == "OK" &&
+          <MenuList ref={ref} sx={{position:"absolute", zIndex:9999, top:125, backgroundColor:"white", border:"1px solid black"}}>
+            {renderSuggestions()}
+          </MenuList>
+        }
+      </>
+    );
+  };
+
 export default function GooglePlacesModal({
   onSave,
   createButtonText = "Save"