authscape 1.0.143 → 1.0.145

package/index.js

@@ -729,6 +729,7 @@ 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 _reactHookForm = require("react-hook-form");
 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); }
@@ -739,6 +740,7 @@ 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 _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); }
 var AutoCompleteDialog = function AutoCompleteDialog(_ref) {
   var placeholder = _ref.placeholder,
     onSelected = _ref.onSelected,
@@ -974,15 +976,30 @@ var AutoCompleteDialog = function AutoCompleteDialog(_ref) {
       })), /*#__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
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    control: control,
+    rules: {
+      required: true
+    },
+    name: "address",
+    render: function render(_ref3) {
+      var field = _ref3.field;
+      return /*#__PURE__*/_react["default"].createElement(Stack, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+        ref: txtAddressField,
+        name: "address"
+      }, field, {
+        autoComplete: "new-password",
+        label: placeholder,
+        variant: "outlined",
+        fullWidth: true,
+        value: value,
+        onChange: handleInput
+      })), errors.address && errors.address.type === 'required' && /*#__PURE__*/_react["default"].createElement(Typography, {
+        sx: {
+          color: "red"
+        }
+      }, "Address is required."));
+    }
   }), status == "OK" && /*#__PURE__*/_react["default"].createElement(_material.MenuList, {
     ref: ref,
     sx: {
@@ -993,18 +1010,16 @@ var AutoCompleteDialog = function AutoCompleteDialog(_ref) {
     }
   }, renderSuggestions()));
 };
-var GooglePlacesModal = function GooglePlacesModal(_ref3) {
-  var onSave = _ref3.onSave,
-    _ref3$createButtonTex = _ref3.createButtonText,
-    createButtonText = _ref3$createButtonTex === void 0 ? "Save" : _ref3$createButtonTex,
-    _ref3$_address = _ref3._address,
-    _address = _ref3$_address === void 0 ? "" : _ref3$_address,
-    _ref3$_city = _ref3._city,
-    _city = _ref3$_city === void 0 ? "" : _ref3$_city,
-    _ref3$_state = _ref3._state,
-    _state = _ref3$_state === void 0 ? "" : _ref3$_state,
-    _ref3$_postalCode = _ref3._postalCode,
-    _postalCode = _ref3$_postalCode === void 0 ? "" : _ref3$_postalCode;
+var GooglePlacesModal = function GooglePlacesModal(_ref4) {
+  var onAddressSelected = _ref4.onAddressSelected,
+    _ref4$_address = _ref4._address,
+    _address = _ref4$_address === void 0 ? "" : _ref4$_address,
+    _ref4$_city = _ref4._city,
+    _city = _ref4$_city === void 0 ? "" : _ref4$_city,
+    _ref4$_state = _ref4._state,
+    _state = _ref4$_state === void 0 ? "" : _ref4$_state,
+    _ref4$_postalCode = _ref4._postalCode,
+    _postalCode = _ref4$_postalCode === void 0 ? "" : _ref4$_postalCode;
   var _useState = (0, _react.useState)(_address),
     _useState2 = _slicedToArray(_useState, 2),
     address = _useState2[0],
@@ -1039,6 +1054,7 @@ var GooglePlacesModal = function GooglePlacesModal(_ref3) {
       setPostalcode(data.postalCode);
       setLat(data.lat);
       setLng(data["long"]);
+      onAddressSelected(data.address, data.city, data.state, data.postalCode, data.lat, data["long"]);
     },
     onChange: function onChange(address) {
       setAddress(address);
@@ -1052,63 +1068,89 @@ var GooglePlacesModal = function GooglePlacesModal(_ref3) {
   }, /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
     item: true,
     xs: 6
-  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-    id: "outlined-basic",
-    label: "City",
-    variant: "outlined",
-    fullWidth: true,
-    value: city,
-    onChange: function onChange(val) {
-      setCity(val.currentTarget.value);
+  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    control: control,
+    rules: {
+      required: true
+    },
+    name: "city",
+    render: function render(_ref5) {
+      var field = _ref5.field;
+      return /*#__PURE__*/_react["default"].createElement(Stack, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+        id: "outlined-basic",
+        label: "City",
+        name: "city",
+        variant: "outlined"
+      }, field, {
+        fullWidth: true,
+        value: city,
+        onChange: function onChange(val) {
+          setCity(val.currentTarget.value);
+        }
+      })), errors.city && errors.city.type === 'required' && /*#__PURE__*/_react["default"].createElement(Typography, {
+        sx: {
+          color: "red"
+        }
+      }, "City is required."));
     }
   }))), /*#__PURE__*/_react["default"].createElement(_Grid["default"], {
     item: true,
     xs: 6
-  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-    id: "outlined-basic",
-    label: "State",
-    variant: "outlined",
-    fullWidth: true,
-    value: state,
-    onChange: function onChange(val) {
-      setState(val.currentTarget.value);
+  }, /*#__PURE__*/_react["default"].createElement(_system.Box, null, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    control: control,
+    rules: {
+      required: true
+    },
+    name: "state",
+    render: function render(_ref6) {
+      var field = _ref6.field;
+      return /*#__PURE__*/_react["default"].createElement(Stack, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+        id: "outlined-basic",
+        label: "State"
+      }, field, {
+        name: "state",
+        variant: "outlined",
+        fullWidth: true,
+        value: state,
+        onChange: function onChange(val) {
+          setState(val.currentTarget.value);
+        }
+      })), errors.state && errors.state.type === 'required' && /*#__PURE__*/_react["default"].createElement(Typography, {
+        sx: {
+          color: "red"
+        }
+      }, "State is required."));
     }
   })))), /*#__PURE__*/_react["default"].createElement(_system.Box, {
     sx: {
       marginTop: 2
     }
-  }, /*#__PURE__*/_react["default"].createElement(_TextField["default"], {
-    id: "outlined-basic",
-    label: "Postal code",
-    variant: "outlined",
-    fullWidth: true,
-    value: zip,
-    onChange: function onChange(val) {
-      setPostalcode(val.currentTarget.value);
-    }
-  })), /*#__PURE__*/_react["default"].createElement(_system.Box, {
-    sx: {
-      marginTop: 1,
-      textAlign: "right"
-    }
-  }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
-    variant: "contained",
-    onClick: function onClick() {
-      if (lat == null || lng == null) {
-        var addressInfo = address + " " + city + " " + state + " " + zip;
-        (0, _usePlacesAutocomplete.getGeocode)({
-          address: addressInfo
-        }).then(function (results) {
-          var _getLatLng = (0, _usePlacesAutocomplete.getLatLng)(results[0]),
-            lat = _getLatLng.lat,
-            lng = _getLatLng.lng;
-          setLat(lat);
-          setLng(lng);
-        });
-      }
-      onSave(address, city, state, zip, lat, lng);
+  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
+    control: control,
+    rules: {
+      required: true
+    },
+    name: "postalCode",
+    render: function render(_ref7) {
+      var field = _ref7.field;
+      return /*#__PURE__*/_react["default"].createElement(Stack, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], _extends({
+        id: "outlined-basic",
+        label: "Postal code"
+      }, field, {
+        name: "postalCode",
+        variant: "outlined",
+        fullWidth: true,
+        value: zip,
+        onChange: function onChange(val) {
+          setPostalcode(val.currentTarget.value);
+        }
+      })), errors.postalCode && errors.postalCode.type === 'required' && /*#__PURE__*/_react["default"].createElement(Typography, {
+        sx: {
+          color: "red"
+        }
+      }, "Postal Code is required."));
     }
-  }, createButtonText))));
+  }))));
 };
 exports.GooglePlacesModal = GooglePlacesModal;
 "use strict";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "authscape",
-  "version": "1.0.143",
+  "version": "1.0.145",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/components/GoogleMapsAutoComplete.js

@@ -9,6 +9,7 @@ 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 { useForm, Controller, useFieldArray } from "react-hook-form";
 
 import usePlacesAutocomplete, {
   getGeocode,
@@ -322,8 +323,27 @@ const AutoCompleteDialog = ({placeholder, onSelected, defaultValue, onChange}) =
   
     return (
       <>
-        <TextField ref={txtAddressField} autoFocus={true} autoComplete="new-password" label={placeholder} variant="outlined" fullWidth={true} value={value} onChange={handleInput} />
-  
+
+        <Controller
+            control={control}
+            rules={{ required: true }}
+            name="address"
+            render={({ field }) => (
+            <Stack>
+                <TextField ref={txtAddressField} name="address" {...field} autoComplete="new-password" label={placeholder} variant="outlined" fullWidth={true} value={value} onChange={handleInput} />
+                {errors.address && 
+            errors.address.type === 'required' 
+            && <Typography sx={{color: "red"}}>Address is required.</Typography>}
+            </Stack>
+            )}
+        />
+
+
+
+
+
+
+
         {status == "OK" &&
           <MenuList ref={ref} sx={{position:"absolute", zIndex:9999, backgroundColor:"white", border:"1px solid black"}}>
             {renderSuggestions()}
@@ -334,9 +354,7 @@ const AutoCompleteDialog = ({placeholder, onSelected, defaultValue, onChange}) =
   };
 
 export const GooglePlacesModal = ({
-  onSave,
-  createButtonText = "Save",
-
+  onAddressSelected,
   _address = "",
   _city = "",
   _state = "",
@@ -363,6 +381,8 @@ export const GooglePlacesModal = ({
             setPostalcode(data.postalCode);
             setLat(data.lat);
             setLng(data.long);
+
+            onAddressSelected(data.address, data.city, data.state, data.postalCode, data.lat, data.long);
         }}
         onChange={(address) => {
             setAddress(address);
@@ -372,49 +392,123 @@ export const GooglePlacesModal = ({
         <Grid container spacing={1} sx={{ marginTop: 1 }}>
         <Grid item xs={6}>
             <Box>
-            <TextField
-                id="outlined-basic"
-                label="City"
-                variant="outlined"
-                fullWidth={true}
-                value={city}
-                onChange={(val) => {
-                setCity(val.currentTarget.value);
-                }}
+
+
+            <Controller
+                control={control}
+                rules={{ required: true }}
+                name="city"
+                render={({ field }) => (
+                <Stack>
+                    <TextField
+                        id="outlined-basic"
+                        label="City"
+                        name="city"
+                        variant="outlined"
+                        {...field}
+                        fullWidth={true}
+                        value={city}
+                        onChange={(val) => {
+                        setCity(val.currentTarget.value);
+                        }}
+                    />
+
+                    {errors.city && 
+                errors.city.type === 'required' 
+                && <Typography sx={{color: "red"}}>City is required.</Typography>}
+                </Stack>
+                )}
             />
+                
+            
             </Box>
         </Grid>
 
         <Grid item xs={6}>
             <Box>
-            <TextField
-                id="outlined-basic"
-                label="State"
-                variant="outlined"
-                fullWidth={true}
-                value={state}
-                onChange={(val) => {
-                setState(val.currentTarget.value);
-                }}
+
+
+            <Controller
+                control={control}
+                rules={{ required: true }}
+                name="state"
+                render={({ field }) => (
+                <Stack>
+
+                    <TextField
+                        id="outlined-basic"
+                        label="State"
+                        {...field}
+                        name="state"
+                        variant="outlined"
+                        fullWidth={true}
+                        value={state}
+                        onChange={(val) => {
+                        setState(val.currentTarget.value);
+                        }}
+                    />
+                    
+                    
+                    {errors.state && 
+                errors.state.type === 'required' 
+                && <Typography sx={{color: "red"}}>State is required.</Typography>}
+                </Stack>
+                )}
             />
+
+
+
+            
             </Box>
         </Grid>
         </Grid>
 
         <Box sx={{ marginTop: 2 }}>
-        <TextField
-            id="outlined-basic"
-            label="Postal code"
-            variant="outlined"
-            fullWidth={true}
-            value={zip}
-            onChange={(val) => {
-            setPostalcode(val.currentTarget.value);
-            }}
+
+
+
+        <Controller
+            control={control}
+            rules={{ required: true }}
+            name="postalCode"
+            render={({ field }) => (
+            <Stack>
+
+                <TextField
+                    id="outlined-basic"
+                    label="Postal code"
+                    {...field}
+                    name="postalCode"
+                    variant="outlined"
+                    fullWidth={true}
+                    value={zip}
+                    onChange={(val) => {
+                    setPostalcode(val.currentTarget.value);
+                    }}
+                />
+
+                {errors.postalCode && 
+            errors.postalCode.type === 'required' 
+            && <Typography sx={{color: "red"}}>Postal Code is required.</Typography>}
+            </Stack>
+            )}
         />
+
+
+
+
+
+
+
+
+
+
+
+
+        
         </Box>
 
-        <Box sx={{ marginTop: 1, textAlign: "right" }}>
+        {/* <Box sx={{ marginTop: 1, textAlign: "right" }}>
         <Button
             variant="contained"
             onClick={() => {
@@ -432,7 +526,7 @@ export const GooglePlacesModal = ({
             }}>
             {createButtonText}
         </Button>
-        </Box>
+        </Box> */}
     </Box>
     </>
   );