@agilemotion/oui-react-js 1.3.8 → 1.4.0

package/dist/components/dashboard/components/blackDashboard/sidebar/Sidebar.js

@@ -7,68 +7,143 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _reactRouterDom = require("react-router-dom");
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _perfectScrollbar = _interopRequireDefault(require("perfect-scrollbar"));
-
 var _Utils = _interopRequireDefault(require("../../../../../Utils"));
 
 var _reactstrap = require("reactstrap");
 
 var _MenuLink = _interopRequireDefault(require("../../../../menu/MenuLink"));
 
-var _reactRedux = require("react-redux");
-
-var _redux = require("redux");
-
-var _DashboardStore = require("../../../../../redux/store/DashboardStore");
-
 var _CardAvatar = _interopRequireDefault(require("../../../../card/CardAvatar"));
 
 var _core = require("@material-ui/core");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _RestUtils = require("../../../../../RestUtils");
 
-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; }
+require("./Sidebar.css");
 
-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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
 
 let ps;
-const TAB = 8;
-
-const propHandler = state => {
-  let activeRouteMenu = state.dashboard.activeRouteMenu;
-  return {
-    activeRouteMenu: activeRouteMenu
-  };
-};
+const TAB = 16;
 
 class Sidebar extends _react.default.Component {
   constructor(props) {
     super(props);
 
+    _defineProperty(this, "getViews", (menus, level) => {
+      let newViews = [];
+
+      for (let i = 0; i < menus.length; i++) {
+        let createView = {};
+        createView.name = menus[i].attributes.label;
+        createView.id = menus[i].id;
+        createView.mini = 'SS';
+        createView.layout = '/admin';
+        createView.level = level;
+
+        if (menus[i].subMenu) {
+          createView.collapse = true;
+          createView.state = menus[i].id + 'Collapse';
+          createView.views = this.getItems(menus[i].subMenu.items, level + 1);
+        } else {
+          createView.item = menus[i];
+        }
+
+        newViews.push(createView);
+      }
+
+      console.log('VIEWS : ', newViews, menus);
+      return newViews;
+    });
+
+    _defineProperty(this, "getItems", (items, level) => {
+      let newItems = [];
+
+      for (let i = 0; i < items.length; i++) {
+        let createItem = {};
+        createItem.name = items[i].attributes.label;
+        createItem.id = items[i].id;
+        createItem.mini = 'SS';
+        createItem.layout = '/admin';
+        createItem.item = items[i];
+        createItem.level = level;
+
+        if (!_Utils.default.isNull(items[i].subMenu)) {
+          createItem.collapse = true;
+          createItem.state = items[i].id + 'SubMenuCollapse';
+          createItem.views = this.getItems(items[i].subMenu.items, level + 1);
+        }
+
+        newItems.push(createItem);
+      }
+
+      return newItems;
+    });
+
     _defineProperty(this, "getCollapseStates", routes => {
       let initialState = {};
-      routes.map((prop, key) => {
-        if (prop.collapse) {
-          initialState = _objectSpread(_objectSpread({
-            [prop.state]: this.getCollapseInitialState(prop.views)
-          }, this.getCollapseStates(prop.views)), initialState);
-        }
 
-        return null;
-      });
+      if (routes) {
+        routes.map((prop, key) => {
+          if (prop.collapse) {
+            initialState = {
+              [prop.state]: this.getCollapseInitialState(prop.views),
+              ...this.getCollapseStates(prop.views),
+              ...initialState
+            };
+          }
+
+          return null;
+        });
+      }
+
       return initialState;
     });
 
+    _defineProperty(this, "getMenu", route => {
+      return new Promise(resolve => {
+        let service = {
+          url: '/ui/api/v1/menu/get',
+          parameters: [{
+            name: 'id',
+            value: route.menu,
+            httpParameterType: 'QUERY_PARAMETER'
+          }, {
+            name: 'version',
+            value: 1.0,
+            httpParameterType: 'QUERY_PARAMETER'
+          }],
+          contentType: 'application/json'
+        };
+        (0, _RestUtils.invokeRest)(service, {
+          api: {
+            get id() {
+              return 'dashboard-sidebar';
+            }
+
+          }
+        }, 'dashboard-sidebar', result => {
+          resolve(this.getViews(result.menus, route.level + 1));
+        }, e => {
+          console.error(e);
+          resolve(null);
+        }, null);
+      });
+    });
+
+    _defineProperty(this, "getLiClassName", prop => {
+      return "li-" + prop.level;
+    });
+
     _defineProperty(this, "createLinks", routes => {
-      const _this$props = this.props,
-            rtlActive = _this$props.rtlActive,
-            secondaryThemeColor = _this$props.secondaryThemeColor;
+      const {
+        rtlActive,
+        secondaryThemeColor
+      } = this.props;
       return routes.map((prop, key) => {
         if (prop.redirect) {
           return null;
@@ -76,84 +151,118 @@ class Sidebar extends _react.default.Component {
 
         if ((prop.collapse || prop.isParent) && prop.name !== 'Dashboard' && prop.name !== 'My Work Items') {
           var st = {};
-          st[prop["state"]] = !this.state[prop.state];
+          st[prop['state']] = !this.state[prop.state];
           return /*#__PURE__*/_react.default.createElement("li", {
-            className: prop.collapse ? this.getCollapseInitialState(prop.views) ? "active" : null : null,
+            className: prop.collapse ? this.getCollapseInitialState(prop.views) + '-' + prop.level ? 'active ' + this.getLiClassName(prop) : this.getLiClassName(prop) : this.getLiClassName(prop),
             key: key
           }, /*#__PURE__*/_react.default.createElement("a", {
             href: "#pablo",
+            className: 'li-link-' + prop.level,
             "data-toggle": "collapse",
             style: {
               marginLeft: (prop.level + 1) * TAB + 'px'
             },
             "aria-expanded": this.state[prop.state],
             onClick: e => {
+              if (!prop.views) {
+                this.getMenu(prop).then(views => {
+                  if (views) {
+                    prop.views = views; //this.getCollapseInitialState(views);
+
+                    this.setState(st);
+                  }
+                });
+              } else {
+                this.setState(st);
+              }
+
               e.preventDefault();
-              this.setState(st);
             }
           }, prop.icon !== undefined ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("i", {
             className: prop.icon,
             style: {
               width: '28px'
             }
-          }), " ", /*#__PURE__*/_react.default.createElement("span", null, " ", prop.name, " ", prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
+          }), ' ', /*#__PURE__*/_react.default.createElement("span", null, ' ', prop.name, ' ', prop.collapse ? /*#__PURE__*/_react.default.createElement("span", {
             className: "caret",
             style: {
               marginTop: '0'
             }
-          }) : null), " ", " ") : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
+          }) : null), ' ', ' ') : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
             className: "sidebar-normal",
             style: {
-              paddingLeft: "4px"
+              paddingLeft: '4px'
             }
-          }, " ", prop.name, " ", /*#__PURE__*/_react.default.createElement("b", {
+          }, ' ', prop.name, ' ', /*#__PURE__*/_react.default.createElement("b", {
             className: "caret"
-          })), " "), " "), " ", prop.collapse ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
+          })), ' '), ' '), ' ', prop.collapse && prop.views ? /*#__PURE__*/_react.default.createElement(_reactstrap.Collapse, {
             isOpen: this.state[prop.state]
           }, /*#__PURE__*/_react.default.createElement("ul", {
             className: "nav"
-          }, " ", this.createLinks(prop.views), " "), " ") : null);
+          }, " ", this.createLinks(prop.views), " "), ' ') : null);
         }
 
         return /*#__PURE__*/_react.default.createElement("li", {
-          className: "",
+          className: "".concat('menu-link-li' + (this.activeRoute(prop.id) ? '-active' : '') + (prop.name === 'Dashboard' ? ' dashboard-link' : '')),
           key: key,
-          style: this.activeRoute(prop.name) ? {
+          style: this.activeRoute(prop.id) ? {
             backgroundColor: (0, _core.lighten)(secondaryThemeColor, .9),
             borderRadius: '16px',
             color: secondaryThemeColor,
-            fontWeight: 500,
-            marginRight: '8px'
+            fontWeight: 500
           } : {}
         }, /*#__PURE__*/_react.default.createElement(_MenuLink.default, {
           config: prop.item,
-          clickCallback: prop.name === 'Dashboard' ? this.props.dashboardLauncher : null,
+          clickCallback: prop.name === 'Dashboard' ? item => {
+            this.props.dashboardLauncher();
+            this.setState({ ...this.state,
+              activeRouteMenu: item
+            });
+          } : item => this.setState({ ...this.state,
+            activeRouteMenu: item
+          }),
           autoClick: prop.name === 'My Work Items' || prop.item && prop.item.defaultItem,
           viewId: "menuBar",
           icon: prop.icon,
-          iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.name) ? secondaryThemeColor : null,
+          iconColor: (prop.name === 'Dashboard' || prop.name === 'My Work Items') && this.activeRoute(prop.id) ? secondaryThemeColor : null,
+          backgroundColor: this.activeRoute(prop.id) ? (0, _core.lighten)(secondaryThemeColor, .9) : null,
           name: prop.name,
+          id: prop.id,
           level: prop.level,
-          color: this.activeRoute(prop.name) ? secondaryThemeColor : null
-        }), " ");
+          tab: TAB,
+          color: this.activeRoute(prop.id) ? secondaryThemeColor : null
+        }), ' ');
       });
     });
 
     _defineProperty(this, "activeRoute", routeName => {
       // return this.props.location.pathname.indexOf(routeName) > -1 ? "active" : "";
-      return this.props.activeRouteMenu === routeName;
+      return this.state.activeRouteMenu.id === routeName;
     });
 
-    this.state = this.getCollapseStates(props.routes); //actionCreators.setActiveRoute(Utils.isNull(props.activeRouteMenu) ? 'Dashboard' : props.activeRouteMenu);
-  } // this creates the intial state of this component based on the collapse routes
-  // that it gets through this.props.routes
-
+    this.state = { ...this.getCollapseStates(props.routes),
+      isLoading: false,
+      error: false,
+      activeRouteMenu: {
+        id: 'dashboard',
+        name: 'Dashboard'
+      }
+    };
+  }
 
   // this verifies if any of the collapses should be default opened on a rerender of this component
   // for example, on the refresh of the page,
   // while on the src/views/forms/RegularForms.js - route /admin/regular-forms
   getCollapseInitialState(routes) {
+    if (!routes) {
+      return false;
+    }
+
     for (let i = 0; i < routes.length; i++) {
+      if (!routes[i].views) {
+        return true;
+      }
+
       if (routes[i].collapse && this.getCollapseInitialState(routes[i].views)) {
         return true;
       } else if (window.location.href.indexOf(routes[i].path) !== -1) {
@@ -162,12 +271,11 @@ class Sidebar extends _react.default.Component {
     }
 
     return false;
-  } // this function creates the links and collapses that appear in the sidebar (left menu)
-
+  }
 
   componentDidMount() {
     // if you are using a Windows Machine, the scrollbars will have a Mac look
-    if (navigator.platform.indexOf("Win") > -1) {
+    if (navigator.platform.indexOf('Win') > -1) {
       /*ps = new PerfectScrollbar(this.refs.sidebar, {
           suppressScrollX: true,
           suppressScrollY: false,
@@ -178,14 +286,15 @@ class Sidebar extends _react.default.Component {
   componentWillUnmount() {
     // we need to destroy the false scrollbar when we navigate
     // to a page that doesn't have this component rendered
-    if (navigator.platform.indexOf("Win") > -1) {//ps.destroy();
+    if (navigator.platform.indexOf('Win') > -1) {//ps.destroy();
     }
   }
 
   render() {
-    const _this$props2 = this.props,
-          activeColor = _this$props2.activeColor,
-          logo = _this$props2.logo;
+    const {
+      activeColor,
+      logo
+    } = this.props;
     let logoImg = null;
     let logoText = null;
 
@@ -203,12 +312,12 @@ class Sidebar extends _react.default.Component {
       }, /*#__PURE__*/_react.default.createElement("img", {
         src: logo.imgSrc,
         alt: "react-logo"
-      })), " ");
+      })), ' ');
       logoText = /*#__PURE__*/_react.default.createElement("a", {
         href: logo.outterLink,
         className: "simple-text ",
         onClick: this.props.closeSidebar
-      }, logo.text, " ");
+      }, logo.text, ' ');
     }
 
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -220,15 +329,15 @@ class Sidebar extends _react.default.Component {
       }
     }, /*#__PURE__*/_react.default.createElement("table", {
       style: {
-        height: "96%",
-        maxHeight: "100%",
-        width: "100%"
+        height: '96%',
+        maxHeight: '100%',
+        width: '100%'
       }
     }, /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
       style: {
         height: '10%'
       }
-    }, " ", logoImg !== null ? /*#__PURE__*/_react.default.createElement("div", {
+    }, ' ', logoImg !== null ? /*#__PURE__*/_react.default.createElement("div", {
       className: "logo",
       style: {
         display: 'flex',
@@ -236,7 +345,7 @@ class Sidebar extends _react.default.Component {
         alignItems: 'center',
         height: '100%'
       }
-    }, " ", logoImg, " ") : null, " ", !_Utils.default.isNull(this.props.heading) ? /*#__PURE__*/_react.default.createElement("div", {
+    }, ' ', logoImg, ' ') : null, ' ', !_Utils.default.isNull(this.props.heading) ? /*#__PURE__*/_react.default.createElement("div", {
       className: "logo",
       style: {
         display: 'flex',
@@ -250,24 +359,27 @@ class Sidebar extends _react.default.Component {
       style: {
         height: '70%'
       },
-      valign: "top"
+      valign: 'top'
     }, /*#__PURE__*/_react.default.createElement(_reactstrap.Nav, {
       style: {
-        margin: "8px",
-        padding: "16px"
-      }
+        margin: '8px',
+        padding: '16px'
+      },
+      className: 'nav-wrapper'
     }, this.createLinks(this.props.routes)))), /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement("td", {
+      className: 'sidebar-app-logo-wrapper',
       style: {
         height: '10%'
       },
-      valign: "top"
+      valign: 'top'
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "sidebar-app-logo",
+      className: 'sidebar-app-logo',
       style: {
         justifyContent: 'center',
         height: '92px'
       }
     }, !_Utils.default.isNull(this.props.appLogoPath) ? /*#__PURE__*/_react.default.createElement("div", {
+      className: 'product-logo',
       style: {
         display: 'flex',
         justifyContent: 'center',
@@ -285,13 +397,13 @@ class Sidebar extends _react.default.Component {
         alignItems: 'center',
         marginTop: '8px'
       }
-    }, "Copyrights \xA9 ", 1900 + new Date().getYear(), " ", " ")))))));
+    }, "Copyrights \xA9 ", 1900 + new Date().getYear(), " ", ' ')))))));
   }
 
 }
 
 Sidebar.propTypes = {
-  activeColor: _propTypes.default.oneOf(["primary", "blue", "green", "orange", "red", "agility"]),
+  activeColor: _propTypes.default.oneOf(['primary', 'blue', 'green', 'orange', 'red', 'agility']),
   secondaryThemeColor: _propTypes.default.string.isRequired,
   rtlActive: _propTypes.default.bool,
   routes: _propTypes.default.array.isRequired,
@@ -307,7 +419,5 @@ Sidebar.propTypes = {
   // this is used on responsive to close the sidebar on route navigation
   closeSidebar: _propTypes.default.func
 };
-
-var _default = (0, _reactRouterDom.withRouter)((0, _reactRedux.connect)(propHandler, dispatch => (0, _redux.bindActionCreators)(_DashboardStore.actionCreators, dispatch))(Sidebar));
-
+var _default = Sidebar;
 exports.default = _default;

package/dist/components/footer/Footer.js

@@ -23,30 +23,18 @@ var _CardAvatar = _interopRequireDefault(require("../card/CardAvatar"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) 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; }
-
 const useStyles = (0, _styles.makeStyles)(_footerStyle.default);
 
 const Footer = props => {
   const classes = useStyles();
 
-  const _React$useState = _react.default.useState(props.width ? props.width : null),
-        _React$useState2 = _slicedToArray(_React$useState, 1),
-        width = _React$useState2[0];
+  const [width] = _react.default.useState(props.width ? props.width : null);
 
-  const fluid = props.fluid,
-        white = props.white,
-        rtlActive = props.rtlActive;
+  const {
+    fluid,
+    white,
+    rtlActive
+  } = props;
   let container = (0, _classnames.default)({
     [classes.container]: !fluid,
     [classes.containerFluid]: fluid,

package/dist/components/form/AddressSearch.js

@@ -23,48 +23,16 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof Symbol === "undefined" || o[Symbol.iterator] == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = o[Symbol.iterator](); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-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; }
-
 const AddressSearchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const base = props.base;
 
   const getAddressProp = (components, id) => {
-    var _iterator = _createForOfIteratorHelper(components),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        const component = _step.value;
-
-        var _iterator2 = _createForOfIteratorHelper(component.types),
-            _step2;
-
-        try {
-          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-            const type = _step2.value;
-
-            if (type === id) {
-              return component.long_name;
-            }
-          }
-        } catch (err) {
-          _iterator2.e(err);
-        } finally {
-          _iterator2.f();
+    for (const component of components) {
+      for (const type of component.types) {
+        if (type === id) {
+          return component.long_name;
         }
       }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
     }
 
     return ' ';
@@ -85,36 +53,34 @@ const AddressSearchWrapper = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_rea
         document.getElementById("__address_search__").value = null;
       }
     }, /*#__PURE__*/_react.default.createElement(_Close.default, null)) : null,
-    inputComponent: (_ref) => {
-      let inputRef = _ref.inputRef,
-          onFocus = _ref.onFocus,
-          onBlur = _ref.onBlur,
-          props = _objectWithoutProperties(_ref, ["inputRef", "onFocus", "onBlur"]);
-
-      return /*#__PURE__*/_react.default.createElement(_reactGoogleAutocomplete.default, _extends({
-        apiKey: 'AIzaSyAqXhYU8TvunZtkJ5eAD6SfZyHqFOLLM8w'
-      }, props, {
-        onPlaceSelected: place => {
-          let data = {};
-          data.formattedAddress = place.formatted_address;
-          data.street = getAddressProp(place.address_components, 'street_number') + " " + getAddressProp(place.address_components, 'route');
-          data.suburb = getAddressProp(place.address_components, 'sublocality_level_1');
-          data.city = getAddressProp(place.address_components, 'locality');
-          data.municipality = getAddressProp(place.address_components, 'administrative_area_level_2');
-          data.province = getAddressProp(place.address_components, 'administrative_area_level_1');
-          data.country = getAddressProp(place.address_components, 'country');
-          data.postalCode = getAddressProp(place.address_components, 'postal_code');
-          base.handleValueChange(data);
-          document.getElementById("__address_search__").value = data.formattedAddress;
-        },
-        options: {
-          types: ["geocode", "establishment"],
-          componentRestrictions: {
-            "country": "za"
-          }
+    inputComponent: ({
+      inputRef,
+      onFocus,
+      onBlur,
+      ...props
+    }) => /*#__PURE__*/_react.default.createElement(_reactGoogleAutocomplete.default, _extends({
+      apiKey: 'AIzaSyCocunxfGatXwjt1uASpPxQ0PKcONSi7wY'
+    }, props, {
+      onPlaceSelected: place => {
+        let data = {};
+        data.googleAddress = place.formatted_address;
+        data.street = getAddressProp(place.address_components, 'street_number') + " " + getAddressProp(place.address_components, 'route');
+        data.suburb = getAddressProp(place.address_components, 'sublocality_level_1');
+        data.city = getAddressProp(place.address_components, 'locality');
+        data.municipality = getAddressProp(place.address_components, 'administrative_area_level_2');
+        data.province = getAddressProp(place.address_components, 'administrative_area_level_1');
+        data.country = getAddressProp(place.address_components, 'country');
+        data.postalCode = getAddressProp(place.address_components, 'postal_code');
+        base.handleValueChange(data);
+        document.getElementById("__address_search__").value = data.googleAddress;
+      },
+      options: {
+        types: ["geocode", "establishment"],
+        componentRestrictions: {
+          "country": "za"
         }
-      }));
-    }
+      }
+    }))
   });
 }));
 
@@ -124,7 +90,7 @@ const AddressSearch = /*#__PURE__*/_react.default.memo( /*#__PURE__*/_react.defa
     valueParser: (value, inbound) => {
       if (!_Utils.default.isNull(value)) {
         if (!inbound) {
-          return value.formattedAddress;
+          return value.googleAddress;
         }
       }