makerspace-react-rails 0.6.4 → 0.6.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f04a07e9cae65c9607d484b6ad4626aefce9cd84f3855277cbcbdd33db628eab
-  data.tar.gz: 0ae58b73988db684e8e469dc3208de3eb60fd832f54d06223af1f4a57a5df8e9
+  metadata.gz: cda93434b99ca2f11cc55c4826803465e0fba2517aff2fdab2302a60855f91ef
+  data.tar.gz: 7d1a023c1bf6571c13d6a7e2b378ddb9622a3d8b9457c3312c97db45b2410dc0
 SHA512:
-  metadata.gz: 751cdfb4a2a45f1f442999261224571f4f799a627cd438d53ea030b2884029dcbdfecf4cd06f1cdd0e7ef3eedb1f9bd223db44a680ff547720dd0ff9d8b0df8c
-  data.tar.gz: 25dcb45052d1ad046d64f967aea31d7481c4e4cd20b18523b122c66328f6383547e2a1470018884fc385847a88153e28a2e7a26e8eeea8ca9981a7232e5c517e
+  metadata.gz: 0d1a06280a16b841f8e9a1b74b5830749fe8da15f4286cf9f5e1c8a5f62589dbac3d26a11660efc04c892c4c2f4f2504845ab88e8ea3e3f06ffe52ea93c8266b
+  data.tar.gz: 017bd6aada76a89abf23d4152f5ede786b9912aa0eee09968a5d7ed5f38083da742d41dc89622bf37e3f4e235d99997bccc7f5da35287c698e96d3638ee1fd10

data/lib/makerspace/react/rails/version.rb

@@ -1,7 +1,7 @@
 module Makerspace
   module React
     module Rails
-      VERSION = "0.6.4"
+      VERSION = "0.6.5"
     end
   end
 end

data/vendor/assets/javascripts/makerspace-react.js

@@ -166780,7 +166780,7 @@ if (false) {} else {
 /*!***************************************************************!*\
   !*** ./node_modules/react-router-dom/esm/react-router-dom.js ***!
   \***************************************************************/
-/*! exports provided: MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, generatePath, matchPath, withRouter, __RouterContext, BrowserRouter, HashRouter, Link, NavLink */
+/*! exports provided: BrowserRouter, HashRouter, Link, NavLink, MemoryRouter, Prompt, Redirect, Route, Router, StaticRouter, Switch, generatePath, matchPath, withRouter, __RouterContext */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
@@ -186950,14 +186950,17 @@ module.exports = function(module) {
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
-/* harmony import */ var ui_auth_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/auth/actions */ "./src/ui/auth/actions.ts");
-/* harmony import */ var ui_common_Header__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/common/Header */ "./src/ui/common/Header.tsx");
-/* harmony import */ var ui_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
-/* harmony import */ var app_PrivateRouting__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! app/PrivateRouting */ "./src/app/PrivateRouting.tsx");
-/* harmony import */ var app_PublicRouting__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! app/PublicRouting */ "./src/app/PublicRouting.tsx");
-/* harmony import */ var react_router__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! react-router */ "./node_modules/react-router/esm/react-router.js");
-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; }
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(use_react_router__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
+/* harmony import */ var ui_auth_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/auth/actions */ "./src/ui/auth/actions.ts");
+/* harmony import */ var ui_common_Header__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/common/Header */ "./src/ui/common/Header.tsx");
+/* harmony import */ var ui_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
+/* harmony import */ var ui_reducer_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var app_PrivateRouting__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! app/PrivateRouting */ "./src/app/PrivateRouting.tsx");
+/* harmony import */ var app_PublicRouting__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! app/PublicRouting */ "./src/app/PublicRouting.tsx");
+/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
+/* harmony import */ var ui_member_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
 
 
 
@@ -186968,96 +186971,64 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-class App extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(props) {
-    super(props);
 
-    _defineProperty(this, "renderBody", () => {
-      const {
-        attemptingLogin
-      } = this.state;
-      const {
-        currentUserId,
-        permissions,
-        isAdmin
-      } = this.props;
+const publicPaths = [app_constants__WEBPACK_IMPORTED_MODULE_9__["Routing"].Login, app_constants__WEBPACK_IMPORTED_MODULE_9__["Routing"].SignUp, app_constants__WEBPACK_IMPORTED_MODULE_9__["Routing"].PasswordReset];
 
-      if (attemptingLogin) {
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_4__["default"], {
-          id: "body"
-        });
-      } else {
-        return currentUserId ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](app_PrivateRouting__WEBPACK_IMPORTED_MODULE_5__["default"], {
-          permissions: permissions,
-          currentUserId: currentUserId,
-          isAdmin: isAdmin
-        }) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](app_PublicRouting__WEBPACK_IMPORTED_MODULE_6__["default"], null);
-      }
-    });
-
-    this.state = {
-      attemptingLogin: true
-    };
-  }
-
-  componentDidMount() {
-    this.setState({
-      attemptingLogin: true
-    });
-    this.props.attemptLogin();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      isSigningIn: wasSigningIn
-    } = prevProps;
-    const {
-      isSigningIn
-    } = this.props;
-    const {
-      attemptingLogin
-    } = this.state;
+const App = () => {
+  const {
+    location: {
+      pathname
+    },
+    history
+  } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
+  const dispatch = Object(react_redux__WEBPACK_IMPORTED_MODULE_2__["useDispatch"])();
+  const {
+    currentUser: {
+      id: currentUserId,
+      isAdmin
+    },
+    permissions,
+    isRequesting,
+    error
+  } = Object(ui_reducer_hooks__WEBPACK_IMPORTED_MODULE_6__["useAuthState"])();
+  const [attemptingLogin, setAttemptingLogin] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](true);
+  const [loginAttempted, setLoginAttempted] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const [initialPath] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](pathname); // Attempt login on mount except when going to password reset
 
-    if (wasSigningIn && !isSigningIn) {
-      if (attemptingLogin) {
-        this.setState({
-          attemptingLogin: false
-        });
-      }
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
+    if (initialPath !== app_constants__WEBPACK_IMPORTED_MODULE_9__["Routing"].PasswordReset) {
+      dispatch(Object(ui_auth_actions__WEBPACK_IMPORTED_MODULE_3__["sessionLoginUserAction"])());
     }
-  }
-
-  render() {
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-      className: "root"
-    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_Header__WEBPACK_IMPORTED_MODULE_3__["default"], null), this.renderBody());
-  }
+  }, []);
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
+    setLoginAttempted(true);
+  }, []); // Redirect after login if they were navigation elsewhere
 
-}
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
+    if (!error && !isRequesting) {
+      loginAttempted && setAttemptingLogin(false);
 
-const mapStateToProps = (state, _ownProps) => {
-  const {
-    auth: {
-      currentUser,
-      permissions,
-      isRequesting: isSigningIn
+      if (currentUserId) {
+        if (initialPath && initialPath !== app_constants__WEBPACK_IMPORTED_MODULE_9__["Routing"].Root && !publicPaths.some(path => initialPath.startsWith(path))) {
+          history.push(initialPath);
+        } else {
+          history.push(Object(ui_member_utils__WEBPACK_IMPORTED_MODULE_10__["buildProfileRouting"])(currentUserId));
+        }
+      }
     }
-  } = state;
-  return {
-    currentUserId: currentUser.id,
-    isAdmin: currentUser.isAdmin,
-    permissions,
-    isSigningIn
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    attemptLogin: () => dispatch(Object(ui_auth_actions__WEBPACK_IMPORTED_MODULE_2__["sessionLoginUserAction"])())
-  };
+  }, [isRequesting]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
+    className: "root"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_Header__WEBPACK_IMPORTED_MODULE_4__["default"], null), attemptingLogin ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    id: "body"
+  }) : currentUserId ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](app_PrivateRouting__WEBPACK_IMPORTED_MODULE_7__["default"], {
+    permissions: permissions,
+    currentUserId: currentUserId,
+    isAdmin: isAdmin
+  }) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](app_PublicRouting__WEBPACK_IMPORTED_MODULE_8__["default"], null));
 };
 
-/* harmony default export */ __webpack_exports__["default"] = (Object(react_router__WEBPACK_IMPORTED_MODULE_7__["withRouter"])(Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(mapStateToProps, mapDispatchToProps)(App)));
+/* harmony default export */ __webpack_exports__["default"] = (App);
 
 /***/ }),
 
@@ -187075,7 +187046,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/esm/react-router-dom.js");
 /* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
 /* harmony import */ var ui_common_NotFound__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/common/NotFound */ "./src/ui/common/NotFound.tsx");
-/* harmony import */ var ui_members_MembersList__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/members/MembersList */ "./src/ui/members/MembersList.tsx");
+/* harmony import */ var ui_member_MembersList__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/member/MembersList */ "./src/ui/member/MembersList.tsx");
 /* harmony import */ var ui_rentals_RentalsList__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/rentals/RentalsList */ "./src/ui/rentals/RentalsList.tsx");
 /* harmony import */ var ui_earnedMemberships_EarnedMembershipsList__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/earnedMemberships/EarnedMembershipsList */ "./src/ui/earnedMemberships/EarnedMembershipsList.tsx");
 /* harmony import */ var ui_member_MemberDetail__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/member/MemberDetail */ "./src/ui/member/MemberDetail.tsx");
@@ -187110,7 +187081,7 @@ const PrivateRouting = ({
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Switch"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Route"], {
     exact: true,
     path: app_constants__WEBPACK_IMPORTED_MODULE_2__["Routing"].Members,
-    component: ui_members_MembersList__WEBPACK_IMPORTED_MODULE_4__["default"]
+    component: ui_member_MembersList__WEBPACK_IMPORTED_MODULE_4__["default"]
   }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router_dom__WEBPACK_IMPORTED_MODULE_1__["Route"], {
     exact: true,
     path: `${app_constants__WEBPACK_IMPORTED_MODULE_2__["Routing"].Documents}`,
@@ -188356,6 +188327,7 @@ class PasswordReset extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       id: passwordId,
       title: "Reset Password",
       onSubmit: this.submit,
+      loading: passwordRequesting,
       submitText: "Save"
     }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default.a, {
       container: true,
@@ -188376,13 +188348,13 @@ class PasswordReset extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       name: passwordFields.password.name,
       id: passwordFields.password.name,
       placeholder: passwordFields.password.placeholder,
-      type: passwordMask ? 'password' : 'text',
+      type: passwordMask ? "password" : "text",
       InputProps: {
         endAdornment: react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_InputAdornment__WEBPACK_IMPORTED_MODULE_5___default.a, {
           position: "end"
         }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_icons_RemoveRedEye__WEBPACK_IMPORTED_MODULE_8___default.a, {
           style: {
-            cursor: 'pointer'
+            cursor: "pointer"
           },
           onClick: this.togglePasswordMask
         }))
@@ -191752,10 +191724,8 @@ class PaypalButton extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
           client: braintreeInstance
         }, (paypalCheckoutErr, paypalCheckoutInstance) => {
           if (paypalCheckoutErr) throw paypalCheckoutErr;
-          const env =  false ? undefined : "sandbox";
-          console.log("Loading PayPal env", env);
           paypal_checkout__WEBPACK_IMPORTED_MODULE_4__["Button"].render({
-            env,
+            env: "production",
             payment: () => {
               return paypalCheckoutInstance.createPayment({
                 flow: 'vault'
@@ -193484,11 +193454,12 @@ const OptionsList = ({
 /*!***************************************!*\
   !*** ./src/ui/common/RenewalForm.tsx ***!
   \***************************************/
-/*! exports provided: default */
+/*! exports provided: renewalOptions, default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "renewalOptions", function() { return renewalOptions; });
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
 /* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
@@ -193510,6 +193481,22 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+const renewalOptions = [{
+  label: "None",
+  value: undefined
+}, {
+  label: "1 month",
+  value: 1
+}, {
+  label: "3 months",
+  value: 3
+}, {
+  label: "6 months",
+  value: 6
+}, {
+  label: "12 months",
+  value: 12
+}];
 const formId = "renewal-form";
 const renewalSelectName = `${formId}-renewal-length`;
 
@@ -193550,8 +193537,7 @@ class RenewalForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
     _defineProperty(this, "renderForm", () => {
       const {
-        entity,
-        renewalOptions
+        entity
       } = this.props;
       return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_1___default.a, {
         id: `${formId}-entity-name`,
@@ -196991,7 +196977,7 @@ const InvoicesTable = ({
     refunded: undefined,
     pastDue: undefined,
     refundRequested: undefined,
-    memberId: memberId
+    memberId: [memberId]
   });
   const [selectedInvoice, setSelectedInvoice] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
   const {
@@ -197402,6 +197388,87 @@ const renderInvoiceStatus = invoice => {
 
 /***/ }),
 
+/***/ "./src/ui/member/CreateMember.tsx":
+/*!****************************************!*\
+  !*** ./src/ui/member/CreateMember.tsx ***!
+  \****************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
+/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _MemberForm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./MemberForm */ "./src/ui/member/MemberForm.tsx");
+
+
+
+
+
+
+
+
+const CreateMember = ({
+  onCreate
+}) => {
+  const {
+    isOpen,
+    openModal,
+    closeModal
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_4__["default"])();
+  const {
+    currentUser: {
+      isAdmin
+    }
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_5__["useAuthState"])();
+  const formRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
+  const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](({
+    response
+  }) => {
+    onCreate(response.data.id);
+    closeModal();
+  }, [onCreate, closeModal]);
+  const {
+    isRequesting,
+    error,
+    call: create
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_2__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["adminCreateMember"], onSuccess);
+  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
+    const validUpdate = await formRef.current.validate(form);
+    if (!form.isValid()) return;
+    create({
+      createMemberDetails: validUpdate
+    });
+  }, [formRef, create]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_3__["ActionButton"], {
+    id: "members-list-create",
+    color: "primary",
+    variant: "contained",
+    disabled: isRequesting,
+    label: "Create New Member",
+    onClick: openModal
+  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_MemberForm__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    ref: formRef,
+    isAdmin: isAdmin,
+    isOpen: true,
+    isRequesting: isRequesting,
+    error: error,
+    onClose: closeModal,
+    onSubmit: onSubmit,
+    title: "Create New Member"
+  }));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (CreateMember);
+
+/***/ }),
+
 /***/ "./src/ui/member/EditMember.tsx":
 /*!**************************************!*\
   !*** ./src/ui/member/EditMember.tsx ***!
@@ -197413,15 +197480,13 @@ const renderInvoiceStatus = invoice => {
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
-/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
-/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
-/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-/* harmony import */ var _MemberForm__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./MemberForm */ "./src/ui/member/MemberForm.tsx");
-
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
+/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _MemberForm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./MemberForm */ "./src/ui/member/MemberForm.tsx");
 
 
 
@@ -197431,59 +197496,57 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const EditMember = ({
-  memberId
+  member = {},
+  formOnly,
+  onEdit
 }) => {
   const {
     isOpen,
     openModal,
     closeModal
-  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_5__["default"])();
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_4__["default"])();
   const {
     currentUser: {
+      id,
       isAdmin
     }
-  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_6__["useAuthState"])();
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_5__["useAuthState"])();
+  const asAdmin = isAdmin && member.id !== id;
   const formRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
-  const {
-    isRequesting: memberLoading,
-    refresh: refreshMember,
-    data: member = {}
-  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_1__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["getMember"], {
-    id: memberId
-  });
   const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
-    refreshMember();
     closeModal();
-  }, [refreshMember, closeModal]);
+    onEdit && onEdit();
+  }, [onEdit, closeModal]);
   const {
     isRequesting: memberUpdating,
     error: updateError,
     call: update
-  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_3__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["adminUpdateMember"], onSuccess);
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_2__["default"])(asAdmin ? makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["adminUpdateMember"] : makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["updateMember"], onSuccess);
   const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
     const validUpdate = await formRef.current.validate(form);
     if (!form.isValid()) return;
     update({
-      id: memberId,
+      id: member.id,
       updateMemberDetails: validUpdate
     });
   }, [formRef, update]);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_4__["ActionButton"], {
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, !formOnly && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_3__["ActionButton"], {
     id: "member-detail-open-edit-modal",
     color: "primary",
     variant: "outlined",
-    disabled: memberLoading || memberUpdating,
+    disabled: !member.id,
     label: "Edit",
     onClick: openModal
-  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_MemberForm__WEBPACK_IMPORTED_MODULE_7__["default"], {
+  }), (isOpen || formOnly) && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_MemberForm__WEBPACK_IMPORTED_MODULE_6__["default"], {
     ref: formRef,
     member: member,
-    isAdmin: isAdmin,
+    isAdmin: asAdmin,
     isOpen: true,
     isRequesting: memberUpdating,
     error: updateError,
     onClose: closeModal,
-    onSubmit: onSubmit
+    onSubmit: onSubmit,
+    noDialog: formOnly
   }));
 };
 
@@ -197642,11 +197705,13 @@ const MemberProfile = () => {
       label: "Account Settings",
       onClick: goToSettings
     })] : []), ...(isAdmin ? [react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_EditMember__WEBPACK_IMPORTED_MODULE_18__["default"], {
-      memberId: memberId,
-      key: "edit-member"
+      member: member,
+      key: "edit-member",
+      onEdit: refreshMember
     }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_RenewMember__WEBPACK_IMPORTED_MODULE_19__["default"], {
-      memberId: memberId,
-      key: "renew-member"
+      member: member,
+      key: "renew-member",
+      onRenew: refreshMember
     }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_accessCards_AccessCardForm__WEBPACK_IMPORTED_MODULE_13__["default"], {
       memberId: memberId,
       key: "card-form"
@@ -197730,6 +197795,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var ui_member_constants__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/member/constants */ "./src/ui/member/constants.ts");
 /* harmony import */ var ui_common_Form__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/common/Form */ "./src/ui/common/Form.tsx");
 /* harmony import */ var ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/utils/timeToDate */ "./src/ui/utils/timeToDate.ts");
+/* harmony import */ var _MemberStatusLabel__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./MemberStatusLabel */ "./src/ui/member/MemberStatusLabel.tsx");
 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 _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; }
@@ -197747,6 +197813,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
 class MemberForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   constructor(props) {
     super(props);
@@ -197775,7 +197842,7 @@ class MemberForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
 
     _defineProperty(this, "renderFormContents", () => {
       const {
-        member,
+        member = {},
         isAdmin
       } = this.props;
       const fields = Object(ui_member_constants__WEBPACK_IMPORTED_MODULE_9__["fields"])(isAdmin, member);
@@ -197837,12 +197904,12 @@ class MemberForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         component: "legend"
       }, fields.status.label), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Select__WEBPACK_IMPORTED_MODULE_4___default.a, {
         name: fields.status.name,
-        value: member.status,
+        value: member.status || Object.keys(_MemberStatusLabel__WEBPACK_IMPORTED_MODULE_12__["memberStatusLabelMap"])[0],
         fullWidth: true,
         native: true,
         required: true,
         placeholder: fields.status.placeholder
-      }, Object.entries(ui_member_constants__WEBPACK_IMPORTED_MODULE_9__["MemberStatusOptions"]).map(([key, value]) => react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("option", {
+      }, Object.entries(_MemberStatusLabel__WEBPACK_IMPORTED_MODULE_12__["memberStatusLabelMap"]).map(([key, value]) => react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("option", {
         id: `${fields.status.name}-option-${Object(lodash_es_kebabCase__WEBPACK_IMPORTED_MODULE_1__["default"])(key)}`,
         key: Object(lodash_es_kebabCase__WEBPACK_IMPORTED_MODULE_1__["default"])(key),
         value: key
@@ -197853,7 +197920,7 @@ class MemberForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         component: "legend"
       }, fields.role.label), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Select__WEBPACK_IMPORTED_MODULE_4___default.a, {
         name: fields.role.name,
-        value: member.role,
+        value: member.role || Object.keys(ui_member_constants__WEBPACK_IMPORTED_MODULE_9__["MemberRoleOptions"])[0],
         fullWidth: true,
         native: true,
         required: true,
@@ -198014,6 +198081,152 @@ const MemberStatusLabel = ({
 
 /***/ }),
 
+/***/ "./src/ui/member/MembersList.tsx":
+/*!***************************************!*\
+  !*** ./src/ui/member/MembersList.tsx ***!
+  \***************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(use_react_router__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/esm/react-router-dom.js");
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/FormControlLabel */ "./node_modules/@material-ui/core/FormControlLabel/index.js");
+/* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/Checkbox */ "./node_modules/@material-ui/core/Checkbox/index.js");
+/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var ui_member_utils__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
+/* harmony import */ var ui_common_table_constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/common/table/constants */ "./src/ui/common/table/constants.ts");
+/* harmony import */ var ui_member_MemberStatusLabel__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/member/MemberStatusLabel */ "./src/ui/member/MemberStatusLabel.tsx");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_9___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_9__);
+/* harmony import */ var ui_member_CreateMember__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/member/CreateMember */ "./src/ui/member/CreateMember.tsx");
+/* harmony import */ var ui_member_RenewMember__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/member/RenewMember */ "./src/ui/member/RenewMember.tsx");
+/* harmony import */ var _utils_extractTotalItems__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../utils/extractTotalItems */ "./src/ui/utils/extractTotalItems.ts");
+/* harmony import */ var ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
+/* harmony import */ var _common_table_StatefulTable__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../common/table/StatefulTable */ "./src/ui/common/table/StatefulTable.tsx");
+/* harmony import */ var _common_Filters_QueryContext__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../common/Filters/QueryContext */ "./src/ui/common/Filters/QueryContext.tsx");
+/* harmony import */ var ui_reducer_hooks__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ui/reducer/hooks */ "./src/ui/reducer/hooks.ts");
+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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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; }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+const fields = [{
+  id: "lastname",
+  label: "Name",
+  cell: row => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"], {
+    to: `/members/${row.id}`
+  }, row.firstname, " ", row.lastname),
+  defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_7__["SortDirection"].Desc
+}, {
+  id: "expirationTime",
+  label: "Expiration",
+  cell: ui_member_utils__WEBPACK_IMPORTED_MODULE_6__["displayMemberExpiration"],
+  defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_7__["SortDirection"].Desc
+}, {
+  id: "status",
+  label: "Status",
+  cell: row => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_MemberStatusLabel__WEBPACK_IMPORTED_MODULE_8__["default"], {
+    member: row
+  })
+}];
+
+const rowId = member => member.id;
+
+const MembersList = () => {
+  const [selectedId, setSelectedId] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const {
+    history
+  } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
+  const {
+    params
+  } = Object(_common_Filters_QueryContext__WEBPACK_IMPORTED_MODULE_15__["useQueryContext"])();
+  const {
+    currentUser: {
+      isAdmin
+    }
+  } = Object(ui_reducer_hooks__WEBPACK_IMPORTED_MODULE_16__["useAuthState"])();
+  const [currentMembers, setCurrentMembers] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](true);
+  const updateFilter = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => setCurrentMembers(curr => !curr), [setCurrentMembers]);
+  const {
+    isRequesting,
+    data: members = [],
+    response,
+    refresh,
+    error
+  } = Object(ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_13__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_9__["listMembers"], _objectSpread({}, params));
+  const onRenew = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    refresh();
+  }, [refresh]);
+  const onCreate = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](id => {
+    history.push(Object(ui_member_utils__WEBPACK_IMPORTED_MODULE_6__["buildProfileRouting"])(id));
+  }, [history]);
+  const selectedMember = members.find(member => member.id === selectedId);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    container: true,
+    spacing: 24,
+    justify: "center"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    item: true,
+    md: 10,
+    xs: 12
+  }, isAdmin && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_CreateMember__WEBPACK_IMPORTED_MODULE_10__["default"], {
+    onCreate: onCreate
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_RenewMember__WEBPACK_IMPORTED_MODULE_11__["default"], {
+    member: selectedMember,
+    onRenew: onRenew
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_4___default.a, {
+    control: react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_5___default.a, {
+      color: "primary",
+      value: "true",
+      checked: !!currentMembers,
+      onChange: updateFilter
+    }),
+    label: "View only current members"
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_table_StatefulTable__WEBPACK_IMPORTED_MODULE_14__["default"], {
+    id: "members-table",
+    title: "Members",
+    loading: isRequesting,
+    data: Object.values(members),
+    error: error,
+    totalItems: Object(_utils_extractTotalItems__WEBPACK_IMPORTED_MODULE_12__["default"])(response),
+    selectedIds: selectedId,
+    setSelectedIds: setSelectedId,
+    columns: fields,
+    rowId: rowId,
+    renderSearch: true
+  })));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (MembersList);
+
+/***/ }),
+
 /***/ "./src/ui/member/NotificationModal.tsx":
 /*!*********************************************!*\
   !*** ./src/ui/member/NotificationModal.tsx ***!
@@ -198105,17 +198318,13 @@ const NotificationModal = ({
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var ui_members_constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/members/constants */ "./src/ui/members/constants.ts");
-/* harmony import */ var ui_member_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
-/* harmony import */ var ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/common/RenewalForm */ "./src/ui/common/RenewalForm.tsx");
-/* harmony import */ var _hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
-/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
-/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
-
-
+/* harmony import */ var ui_member_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
+/* harmony import */ var ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/common/RenewalForm */ "./src/ui/common/RenewalForm.tsx");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
+/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
 
 
 
@@ -198125,53 +198334,46 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const RenewMember = ({
-  memberId
+  member = {},
+  onRenew
 }) => {
   const {
     isOpen,
     openModal,
     closeModal
-  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_8__["default"])();
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_6__["default"])();
   const formRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
-  const {
-    isRequesting: memberLoading,
-    refresh: refreshMember,
-    data: member
-  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_4__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_5__["getMember"], {
-    id: memberId
-  });
   const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](({
     reset
   }) => {
-    refreshMember();
     closeModal();
+    onRenew();
     reset();
-  }, [refreshMember, closeModal]);
+  }, [closeModal]);
   const {
     isRequesting: memberRenewing,
     error: renewError,
     call: renew
-  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_6__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_5__["adminUpdateMember"], onSuccess);
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_4__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__["adminUpdateMember"], onSuccess);
   const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
     const validUpdate = await formRef.current.validate(form);
     if (!form.isValid()) return;
     renew({
-      id: memberId,
+      id: member.id,
       updateMemberDetails: validUpdate
     });
-  }, [formRef, renew]);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_7__["ActionButton"], {
-    id: "member-detail-open-renew-modal",
+  }, [formRef, renew, member]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_5__["ActionButton"], {
+    id: "members-list-renew",
     color: "primary",
-    variant: "contained",
-    disabled: memberLoading || memberRenewing,
+    variant: "outlined",
+    disabled: !member.id,
     label: "Renew",
     onClick: openModal
-  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_3__["default"], {
+  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_2__["default"], {
     ref: formRef,
-    renewalOptions: ui_members_constants__WEBPACK_IMPORTED_MODULE_1__["membershipRenewalOptions"],
     title: "Renew Membership",
-    entity: Object(ui_member_utils__WEBPACK_IMPORTED_MODULE_2__["memberToRenewal"])(member),
+    entity: Object(ui_member_utils__WEBPACK_IMPORTED_MODULE_1__["memberToRenewal"])(member),
     isOpen: true,
     isRequesting: memberRenewing,
     error: renewError,
@@ -198184,295 +198386,16 @@ const RenewMember = ({
 
 /***/ }),
 
-/***/ "./src/ui/member/UpdateMemberContainer.tsx":
-/*!*************************************************!*\
-  !*** ./src/ui/member/UpdateMemberContainer.tsx ***!
-  \*************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
-/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-/* harmony import */ var ui_member_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/member/actions */ "./src/ui/member/actions.ts");
-/* harmony import */ var ui_members_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/members/actions */ "./src/ui/members/actions.ts");
-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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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; }
-
-
-
-
-
-
-
-class EditMember extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "formRef", void 0);
-
-    _defineProperty(this, "setFormRef", ref => this.formRef = ref);
-
-    _defineProperty(this, "submitMemberForm", async form => {
-      const validUpdate = await this.formRef.validate(form);
-      if (!form.isValid()) return;
-      return await this.props.dispatchMember(validUpdate, this.props.isAdmin);
-    });
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      isRequesting: wasRequesting
-    } = prevProps;
-    const {
-      isOpen,
-      isRequesting,
-      closeHandler,
-      error
-    } = this.props;
-
-    if (isOpen && wasRequesting && !isRequesting && !error) {
-      closeHandler();
-    }
-  }
-
-  render() {
-    const {
-      render
-    } = this.props;
-
-    const renderPayload = _objectSpread({}, this.props, {
-      submit: this.submitMemberForm,
-      setRef: this.setFormRef
-    });
-
-    return render(renderPayload);
-  }
-
-}
-
-const mapStateToProps = (state, ownProps) => {
-  const {
-    isRequesting: isUpdating,
-    error: updateError
-  } = state.member.update;
-  const {
-    isRequesting: isCreating,
-    error: createError
-  } = state.members.create;
-  const {
-    currentUser: {
-      isAdmin
-    }
-  } = state.auth;
-  return {
-    isAdmin,
-    isRequesting: ownProps.member && ownProps.member.id ? isUpdating : isCreating,
-    error: ownProps.member && ownProps.member.id ? updateError : createError
-  };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-  const {
-    member,
-    operation
-  } = ownProps;
-  return {
-    dispatchMember: (memberDetails, isAdmin) => {
-      let action;
-
-      switch (operation) {
-        case app_constants__WEBPACK_IMPORTED_MODULE_2__["CrudOperation"].Update:
-          action = Object(ui_member_actions__WEBPACK_IMPORTED_MODULE_3__["updateMemberAction"])(member.id, memberDetails, isAdmin);
-          break;
-
-        case app_constants__WEBPACK_IMPORTED_MODULE_2__["CrudOperation"].Create:
-          action = Object(ui_members_actions__WEBPACK_IMPORTED_MODULE_4__["createMembersAction"])(memberDetails);
-          break;
-      }
-
-      return dispatch(action);
-    }
-  };
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(mapStateToProps, mapDispatchToProps)(EditMember));
-
-/***/ }),
-
-/***/ "./src/ui/member/actions.ts":
-/*!**********************************!*\
-  !*** ./src/ui/member/actions.ts ***!
-  \**********************************/
-/*! exports provided: readMemberAction, updateMemberAction, memberReducer */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "readMemberAction", function() { return readMemberAction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "updateMemberAction", function() { return updateMemberAction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "memberReducer", function() { return memberReducer; });
-/* harmony import */ var ui_member_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/member/constants */ "./src/ui/member/constants.ts");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__);
-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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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; }
-
-
-
-const readMemberAction = memberId => async dispatch => {
-  dispatch({
-    type: ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].StartReadRequest
-  });
-  const result = await Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["getMember"])({
-    id: memberId
-  });
-
-  if (Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["isApiErrorResponse"])(result)) {
-    dispatch({
-      type: ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].GetMemberFailure,
-      error: result.error.message
-    });
-  } else {
-    dispatch({
-      type: ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].GetMemberSuccess,
-      data: result.data
-    });
-  }
-};
-const updateMemberAction = (memberId, updateDetails, isAdmin = false) => async dispatch => {
-  dispatch({
-    type: ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].StartUpdateRequest
-  });
-  let updatedMember;
-  let result;
-
-  if (isAdmin) {
-    result = await Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["adminUpdateMember"])({
-      id: memberId,
-      updateMemberDetails: updateDetails
-    });
-  } else {
-    result = await Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["updateMember"])({
-      id: memberId,
-      updateMemberDetails: updateDetails
-    });
-  }
-
-  if (Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["isApiErrorResponse"])(result)) {
-    dispatch({
-      type: ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].UpdateMemberFailure,
-      error: result.error.message
-    });
-  } else {
-    updatedMember = result.data;
-    dispatch({
-      type: ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].UpdateMemberSuccess,
-      data: updatedMember
-    });
-  }
-
-  return updatedMember;
-};
-const defaultState = {
-  entity: undefined,
-  read: {
-    isRequesting: false,
-    error: ""
-  },
-  update: {
-    isRequesting: false,
-    error: ""
-  }
-};
-const memberReducer = (state = defaultState, action) => {
-  let error;
-
-  switch (action.type) {
-    case ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].StartReadRequest:
-      return _objectSpread({}, state, {
-        read: _objectSpread({}, state.read, {
-          isRequesting: true
-        })
-      });
-
-    case ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].GetMemberSuccess:
-      const {
-        data: member
-      } = action;
-      return _objectSpread({}, state, {
-        entity: member,
-        read: _objectSpread({}, state.read, {
-          isRequesting: false,
-          error: ""
-        })
-      });
-
-    case ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].GetMemberFailure:
-      error = action.error;
-      return _objectSpread({}, state, {
-        read: _objectSpread({}, state.read, {
-          isRequesting: false,
-          error
-        })
-      });
-
-    case ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].StartUpdateRequest:
-      return _objectSpread({}, state, {
-        update: _objectSpread({}, state.update, {
-          isRequesting: true
-        })
-      });
-
-    case ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].UpdateMemberSuccess:
-      const {
-        data: updatedMemebr
-      } = action;
-      return _objectSpread({}, state, {
-        entity: updatedMemebr,
-        update: _objectSpread({}, state.update, {
-          isRequesting: false,
-          error: ""
-        })
-      });
-
-    case ui_member_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].UpdateMemberFailure:
-      error = action.error;
-      return _objectSpread({}, state, {
-        update: _objectSpread({}, state.update, {
-          isRequesting: false,
-          error
-        })
-      });
-
-    default:
-      return state;
-  }
-};
-
-/***/ }),
-
 /***/ "./src/ui/member/constants.ts":
 /*!************************************!*\
   !*** ./src/ui/member/constants.ts ***!
   \************************************/
-/*! exports provided: Action, fields, MemberStatusOptions, MemberRoleOptions, getDetailsForMember */
+/*! exports provided: fields, MemberRoleOptions, getDetailsForMember */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Action", function() { return Action; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fields", function() { return fields; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MemberStatusOptions", function() { return MemberStatusOptions; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "MemberRoleOptions", function() { return MemberRoleOptions; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "getDetailsForMember", function() { return getDetailsForMember; });
 /* harmony import */ var app_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! app/utils */ "./src/app/utils.ts");
@@ -198487,17 +198410,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-let Action;
-
-(function (Action) {
-  Action["StartReadRequest"] = "MEMBER/START_READ_REQUEST";
-  Action["GetMemberSuccess"] = "MEMBER/GET_MEMBER_SUCCESS";
-  Action["GetMemberFailure"] = "MEMBER/GET_MEMBER_FAILURE";
-  Action["StartUpdateRequest"] = "MEMBER/START_UPDATE_REQUEST";
-  Action["UpdateMemberSuccess"] = "MEMBER/UPDATE_MEMBER_SUCCESS";
-  Action["UpdateMemberFailure"] = "MEMBER/UPDATE_MEMBER_FAILURE";
-})(Action || (Action = {}));
-
 const formPrefix = "member-form";
 const fields = (admin, member) => _objectSpread({
   firstname: {
@@ -198559,12 +198471,6 @@ const fields = (admin, member) => _objectSpread({
     error: "Member must sign contract"
   }
 }));
-const MemberStatusOptions = {
-  [app_entities_member__WEBPACK_IMPORTED_MODULE_1__["MemberStatus"].Active]: "Active",
-  [app_entities_member__WEBPACK_IMPORTED_MODULE_1__["MemberStatus"].Revoked]: "Revoked",
-  [app_entities_member__WEBPACK_IMPORTED_MODULE_1__["MemberStatus"].NonMember]: "Non-Member",
-  [app_entities_member__WEBPACK_IMPORTED_MODULE_1__["MemberStatus"].Inactive]: "Inactive"
-};
 const MemberRoleOptions = {
   [app_entities_member__WEBPACK_IMPORTED_MODULE_1__["MemberRole"].Member]: "Member",
   [app_entities_member__WEBPACK_IMPORTED_MODULE_1__["MemberRole"].Admin]: "Admin"
@@ -198661,10 +198567,10 @@ const buildProfileRouting = memberId => {
 
 /***/ }),
 
-/***/ "./src/ui/members/MembersList.tsx":
-/*!****************************************!*\
-  !*** ./src/ui/members/MembersList.tsx ***!
-  \****************************************/
+/***/ "./src/ui/membership/ChangePaymentMethodModal.tsx":
+/*!********************************************************!*\
+  !*** ./src/ui/membership/ChangePaymentMethodModal.tsx ***!
+  \********************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -198672,30 +198578,13 @@ const buildProfileRouting = memberId => {
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/esm/react-router-dom.js");
-/* harmony import */ var connected_react_router__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! connected-react-router */ "./node_modules/connected-react-router/esm/index.js");
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/FormControlLabel */ "./node_modules/@material-ui/core/FormControlLabel/index.js");
-/* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_5__);
-/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core/Checkbox */ "./node_modules/@material-ui/core/Checkbox/index.js");
-/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var lodash_es_isUndefined__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! lodash-es/isUndefined */ "./node_modules/lodash-es/isUndefined.js");
-/* harmony import */ var app_entities_member__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! app/entities/member */ "./src/app/entities/member.ts");
-/* harmony import */ var ui_member_utils__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
-/* harmony import */ var ui_common_ButtonRow__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
-/* harmony import */ var ui_common_table_constants__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/common/table/constants */ "./src/ui/common/table/constants.ts");
-/* harmony import */ var ui_common_table_TableContainer__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/common/table/TableContainer */ "./src/ui/common/table/TableContainer.tsx");
-/* harmony import */ var ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/common/RenewalForm */ "./src/ui/common/RenewalForm.tsx");
-/* harmony import */ var ui_members_actions__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ui/members/actions */ "./src/ui/members/actions.ts");
-/* harmony import */ var ui_members_constants__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ui/members/constants */ "./src/ui/members/constants.ts");
-/* harmony import */ var ui_member_MemberStatusLabel__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ui/member/MemberStatusLabel */ "./src/ui/member/MemberStatusLabel.tsx");
-/* harmony import */ var ui_member_actions__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ui/member/actions */ "./src/ui/member/actions.ts");
-/* harmony import */ var ui_member_MemberForm__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ui/member/MemberForm */ "./src/ui/member/MemberForm.tsx");
-/* harmony import */ var ui_member_UpdateMemberContainer__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ui/member/UpdateMemberContainer */ "./src/ui/member/UpdateMemberContainer.tsx");
-/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_20__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-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; }
+/* harmony import */ var ui_common_FormModal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
+/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+/* harmony import */ var _checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../checkout/PaymentMethodsContainer */ "./src/ui/checkout/PaymentMethodsContainer.tsx");
 
 
 
@@ -198704,12 +198593,86 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+const ChangePaymentMethodModal = ({
+  subscription: {
+    id: subscriptionId,
+    paymentMethodToken
+  } = {}
+}) => {
+  const {
+    isOpen,
+    openModal,
+    closeModal
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_5__["default"])();
+  const [paymentMethodId, setPaymentMethodId] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const {
+    isRequesting,
+    error,
+    call
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_3__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["updateSubscription"], () => {
+    closeModal();
+  });
+  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async () => {
+    paymentMethodId && call({
+      id: subscriptionId,
+      updateSubscriptionDetails: {
+        paymentMethodToken: paymentMethodId
+      }
+    });
+  }, [call, subscriptionId, paymentMethodId]);
 
+  if (!subscriptionId) {
+    return null;
+  }
 
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_4__["ActionButton"], {
+    id: "subscription-option-payment-method",
+    color: "primary",
+    variant: "contained",
+    disabled: isRequesting || !!error,
+    label: "Change Payment Method",
+    onClick: openModal
+  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_FormModal__WEBPACK_IMPORTED_MODULE_1__["default"], {
+    id: "change-payment-method",
+    isOpen: true,
+    closeHandler: closeModal,
+    onSubmit: onSubmit,
+    loading: isRequesting,
+    error: error
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    onPaymentMethodChange: setPaymentMethodId,
+    title: "Select or add a new payment method",
+    paymentMethodToken: paymentMethodToken
+  })));
+};
 
+/* harmony default export */ __webpack_exports__["default"] = (ChangePaymentMethodModal);
 
+/***/ }),
 
+/***/ "./src/ui/membership/DuplicateInvoiceModal.tsx":
+/*!*****************************************************!*\
+  !*** ./src/ui/membership/DuplicateInvoiceModal.tsx ***!
+  \*****************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(use_react_router__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
+/* harmony import */ var _invoice_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../invoice/utils */ "./src/ui/invoice/utils.ts");
+/* harmony import */ var _common_FormModal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../common/FormModal */ "./src/ui/common/FormModal.tsx");
+/* harmony import */ var _member_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _hooks_useUUID__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../hooks/useUUID */ "./src/ui/hooks/useUUID.ts");
 
 
 
@@ -198719,760 +198682,98 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-const fields = [{
-  id: "lastname",
-  label: "Name",
-  cell: row => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"], {
-    to: `/members/${row.id}`
-  }, row.firstname, " ", row.lastname),
-  defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_11__["SortDirection"].Desc
-}, {
-  id: "expirationTime",
-  label: "Expiration",
-  cell: ui_member_utils__WEBPACK_IMPORTED_MODULE_9__["displayMemberExpiration"],
-  defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_11__["SortDirection"].Desc
-}, {
-  id: "status",
-  label: "Status",
-  cell: row => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_MemberStatusLabel__WEBPACK_IMPORTED_MODULE_16__["default"], {
-    member: row
-  })
-}];
 
-class MembersList extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(props) {
-    super(props);
 
-    _defineProperty(this, "openCreateForm", () => {
-      this.setState({
-        openCreateForm: true
-      });
-    });
+const DuplicateInvoiceModal = ({
+  type
+}) => {
+  const uuid = Object(_hooks_useUUID__WEBPACK_IMPORTED_MODULE_9__["useUUID"])();
+  const {
+    data: invoices = []
+  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_4__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__["listInvoices"], {}, undefined, uuid);
+  const {
+    currentUser: {
+      id: currentUserId
+    }
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_8__["useAuthState"])();
+  const [outstandingInvoice, setOutstandingInvoice] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const {
+    history
+  } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
+  const goToProfile = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => history.push(Object(_member_utils__WEBPACK_IMPORTED_MODULE_7__["buildProfileRouting"])(currentUserId)), [history, currentUserId]);
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
+    const outstandingInvoiceOfType = invoices.find(invoice => Object(_invoice_utils__WEBPACK_IMPORTED_MODULE_5__["isInvoicePayable"])(invoice) && invoice.resourceClass === type);
+    setOutstandingInvoice(outstandingInvoiceOfType);
+  }, [invoices, setOutstandingInvoice, type]);
 
-    _defineProperty(this, "closeCreateForm", () => {
-      this.setState({
-        openCreateForm: false
-      });
-    });
+  if (!outstandingInvoice) {
+    return null;
+  }
 
-    _defineProperty(this, "openRenewalForm", () => {
-      this.setState({
-        openRenewalForm: true
-      });
-    });
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_FormModal__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    id: "outstanding-invoice",
+    onSubmit: goToProfile,
+    closeHandler: () => setOutstandingInvoice(undefined),
+    cancelText: "Ignore",
+    submitText: "View Dues",
+    title: "Existing Dues Found",
+    isOpen: true
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    container: true,
+    spacing: 16
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    item: true,
+    xs: 12
+  }, "We found existing outstanding dues matching your selection category. \
+          This may cause issues trying to purchase additional items of this type. \
+          Would you like to view your outstanding dues?"), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    item: true,
+    xs: 12
+  }, "If you're having trouble with your dues, please don't hesitate to ", react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("a", {
+    href: "mailto:contact@manchestermakerspace.org"
+  }, "contact us"), ".")));
+};
 
-    _defineProperty(this, "closeRenewalForm", () => {
-      this.setState({
-        openRenewalForm: false
-      });
-    });
+/* harmony default export */ __webpack_exports__["default"] = (DuplicateInvoiceModal);
 
-    _defineProperty(this, "renderMemberForms", () => {
-      const {
-        admin,
-        members
-      } = this.props;
-      const {
-        selectedId,
-        openRenewalForm,
-        openCreateForm
-      } = this.state;
+/***/ }),
 
-      const createForm = renderProps => {
-        const submitCreate = async form => {
-          const newMember = await renderProps.submit(form);
+/***/ "./src/ui/membership/InvoicingGate.tsx":
+/*!*********************************************!*\
+  !*** ./src/ui/membership/InvoicingGate.tsx ***!
+  \*********************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
 
-          if (newMember) {
-            this.props.goToMemberProfile(newMember.id);
-          }
-        };
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
+/* harmony import */ var app_entities_invoice__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! app/entities/invoice */ "./src/app/entities/invoice.ts");
 
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_MemberForm__WEBPACK_IMPORTED_MODULE_18__["default"], {
-          ref: renderProps.setRef,
-          member: renderProps.member,
-          isAdmin: admin,
-          isOpen: renderProps.isOpen,
-          isRequesting: renderProps.isRequesting,
-          error: renderProps.error,
-          onClose: renderProps.closeHandler,
-          onSubmit: submitCreate,
-          title: "Create New Member"
-        });
-      };
 
-      const renewForm = renderProps => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_13__["default"], {
-        ref: renderProps.setRef,
-        renewalOptions: ui_members_constants__WEBPACK_IMPORTED_MODULE_15__["membershipRenewalOptions"],
-        title: "Renew Membership",
-        entity: Object(ui_member_utils__WEBPACK_IMPORTED_MODULE_9__["memberToRenewal"])(renderProps.member),
-        isOpen: renderProps.isOpen,
-        isRequesting: renderProps.isRequesting,
-        error: renderProps.error,
-        onClose: renderProps.closeHandler,
-        onSubmit: renderProps.submit
-      });
 
-      return admin && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_UpdateMemberContainer__WEBPACK_IMPORTED_MODULE_19__["default"], {
-        isOpen: openRenewalForm,
-        member: !Object(lodash_es_isUndefined__WEBPACK_IMPORTED_MODULE_7__["default"])(selectedId) && members[selectedId],
-        closeHandler: this.closeRenewalForm,
-        render: renewForm,
-        operation: app_constants__WEBPACK_IMPORTED_MODULE_20__["CrudOperation"].Update
-      }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_UpdateMemberContainer__WEBPACK_IMPORTED_MODULE_19__["default"], {
-        isOpen: openCreateForm,
-        member: {
-          status: app_entities_member__WEBPACK_IMPORTED_MODULE_8__["MemberStatus"].Active,
-          role: app_entities_member__WEBPACK_IMPORTED_MODULE_8__["MemberRole"].Member
-        },
-        closeHandler: this.closeCreateForm,
-        render: createForm,
-        operation: app_constants__WEBPACK_IMPORTED_MODULE_20__["CrudOperation"].Create
-      }));
-    });
+/**
+ * Since we cant gate all Invoicing features by a user permission, this allows disabling of all invoicing by disabling or removing
+ * invoice options. If all billing permissions are set to false and no results  return from this options request, effectively
+ * all invoicing components will be disabled. Useful for an emergency response.
+ */
 
-    _defineProperty(this, "updateFilter", () => this.setState(state => ({
-      currentMembers: state.currentMembers ? "" : "true"
-    }), () => this.getMembers(true)));
+const InvoicingGate = ({
+  children
+}) => {
+  const {
+    data: options = []
+  } = Object(ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_1__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_0__["listInvoiceOptions"], {
+    types: [app_entities_invoice__WEBPACK_IMPORTED_MODULE_2__["InvoiceableResource"].Membership]
+  });
+  return children(!!options.length);
+};
 
-    _defineProperty(this, "getActionButtons", () => {
-      const {
-        selectedId
-      } = this.state;
-      return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_ButtonRow__WEBPACK_IMPORTED_MODULE_10__["default"], {
-        actionButtons: [{
-          id: "members-list-create",
-          variant: "contained",
-          color: "primary",
-          onClick: this.openCreateForm,
-          label: "Create New Member"
-        }, {
-          id: "members-list-renew",
-          variant: "outlined",
-          color: "primary",
-          disabled: !selectedId,
-          onClick: this.openRenewalForm,
-          label: "Renew Member"
-        }]
-      });
-    });
+/* harmony default export */ __webpack_exports__["default"] = (InvoicingGate);
 
-    _defineProperty(this, "getQueryParams", () => {
-      const {
-        pageNum,
-        orderBy,
-        order,
-        search,
-        currentMembers
-      } = this.state;
-      return {
-        pageNum,
-        orderBy,
-        order,
-        search,
-        currentMembers
-      };
-    });
-
-    _defineProperty(this, "getMembers", (resetPage = false) => {
-      if (resetPage) {
-        this.setState({
-          pageNum: 0
-        });
-      }
-
-      this.setState({
-        selectedId: undefined
-      });
-      this.props.getMembers(this.getQueryParams());
-    });
-
-    _defineProperty(this, "rowId", row => row.id);
-
-    _defineProperty(this, "onSort", prop => {
-      const orderBy = prop;
-      let order = ui_common_table_constants__WEBPACK_IMPORTED_MODULE_11__["SortDirection"].Desc;
-
-      if (this.state.orderBy === orderBy && this.state.order === order) {
-        order = ui_common_table_constants__WEBPACK_IMPORTED_MODULE_11__["SortDirection"].Asc;
-      }
-
-      this.setState({
-        order,
-        orderBy,
-        pageNum: 0
-      }, () => this.getMembers(true));
-    });
-
-    _defineProperty(this, "onPageChange", newPage => {
-      this.setState({
-        pageNum: newPage
-      }, this.getMembers);
-    });
-
-    _defineProperty(this, "onSearchEnter", searchTerm => {
-      this.setState({
-        search: searchTerm,
-        pageNum: 0
-      }, () => this.getMembers(true));
-    });
-
-    _defineProperty(this, "onSelect", (id, selected) => {
-      if (selected) {
-        this.setState({
-          selectedId: id
-        });
-      } else {
-        this.setState({
-          selectedId: undefined
-        });
-      }
-    });
-
-    this.state = {
-      selectedId: undefined,
-      pageNum: 0,
-      orderBy: "",
-      search: "",
-      currentMembers: "true",
-      order: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_11__["SortDirection"].Asc,
-      openRenewalForm: false,
-      openCreateForm: false
-    };
-  }
-
-  componentDidMount() {
-    this.getMembers();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      isCreating: wasCreating,
-      isUpdating: wasUpdating
-    } = prevProps;
-    const {
-      isCreating,
-      createError,
-      isUpdating,
-      updateError
-    } = this.props;
-
-    if (wasCreating && !isCreating && !createError || // refresh list on create or update
-    wasUpdating && !isUpdating && !updateError) {
-      this.getMembers(true);
-    }
-  }
-
-  render() {
-    const {
-      members,
-      totalItems,
-      loading,
-      error,
-      admin
-    } = this.props;
-    const {
-      selectedId,
-      pageNum,
-      order,
-      orderBy,
-      currentMembers
-    } = this.state;
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default.a, {
-      container: true,
-      spacing: 24,
-      justify: "center"
-    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default.a, {
-      item: true,
-      md: 10,
-      xs: 12
-    }, admin && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default.a, {
-      style: {
-        paddingTop: 20
-      }
-    }, this.getActionButtons()), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_5___default.a, {
-      control: react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_6___default.a, {
-        color: "primary",
-        value: "true",
-        checked: !!currentMembers,
-        onChange: this.updateFilter
-      }),
-      label: "View only current members"
-    }))), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_table_TableContainer__WEBPACK_IMPORTED_MODULE_12__["default"], {
-      id: "members-table",
-      title: "Members",
-      loading: loading,
-      data: Object.values(members),
-      error: error,
-      totalItems: totalItems,
-      selectedIds: [selectedId],
-      pageNum: pageNum,
-      onSearchEnter: this.onSearchEnter,
-      columns: fields,
-      order: order,
-      orderBy: orderBy,
-      onSort: this.onSort,
-      rowId: this.rowId,
-      onPageChange: this.onPageChange,
-      onSelect: admin && this.onSelect
-    }), this.renderMemberForms()));
-  }
-
-}
-
-const mapStateToProps = (state, _ownProps) => {
-  const {
-    entities: members,
-    read: {
-      totalItems,
-      isRequesting: loading,
-      error
-    },
-    create: {
-      isRequesting: isCreating,
-      error: createError
-    }
-  } = state.members;
-  const {
-    update: {
-      isRequesting: isUpdating,
-      error: updateError
-    }
-  } = state.member;
-  const {
-    currentUser: {
-      isAdmin: admin
-    }
-  } = state.auth;
-  return {
-    members,
-    totalItems,
-    loading,
-    error,
-    isUpdating,
-    updateError,
-    isCreating,
-    createError,
-    admin
-  };
-};
-
-const mapDispatchToProps = dispatch => {
-  return {
-    getMembers: queryParams => dispatch(Object(ui_members_actions__WEBPACK_IMPORTED_MODULE_14__["readMembersAction"])(queryParams)),
-    updateMember: (id, Member, admin) => dispatch(Object(ui_member_actions__WEBPACK_IMPORTED_MODULE_17__["updateMemberAction"])(id, Member, admin)),
-    goToMemberProfile: id => dispatch(Object(connected_react_router__WEBPACK_IMPORTED_MODULE_3__["push"])(Object(ui_member_utils__WEBPACK_IMPORTED_MODULE_9__["buildProfileRouting"])(id)))
-  };
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (Object(react_router_dom__WEBPACK_IMPORTED_MODULE_2__["withRouter"])(Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(mapStateToProps, mapDispatchToProps)(MembersList)));
-
-/***/ }),
-
-/***/ "./src/ui/members/actions.ts":
-/*!***********************************!*\
-  !*** ./src/ui/members/actions.ts ***!
-  \***********************************/
-/*! exports provided: readMembersAction, createMembersAction, membersReducer */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "readMembersAction", function() { return readMembersAction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createMembersAction", function() { return createMembersAction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "membersReducer", function() { return membersReducer; });
-/* harmony import */ var ui_members_constants__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/members/constants */ "./src/ui/members/constants.ts");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__);
-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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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; }
-
-
-
-const readMembersAction = queryParams => async dispatch => {
-  dispatch({
-    type: ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].StartReadRequest
-  });
-  const result = await Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["listMembers"])(queryParams);
-
-  if (Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["isApiErrorResponse"])(result)) {
-    dispatch({
-      type: ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].GetMembersFailure,
-      error: result.error.message
-    });
-  } else {
-    const {
-      data,
-      response
-    } = result;
-    const totalItems = response.headers.get("total-items");
-    dispatch({
-      type: ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].GetMembersSuccess,
-      data: {
-        members: data,
-        totalItems: Number(totalItems)
-      }
-    });
-  }
-};
-const createMembersAction = memberForm => async dispatch => {
-  dispatch({
-    type: ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].StartCreateRequest
-  });
-  let newMember;
-  const result = await Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["adminCreateMember"])({
-    createMemberDetails: memberForm
-  });
-
-  if (Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["isApiErrorResponse"])(result)) {
-    dispatch({
-      type: ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].CreateMembersFailure,
-      error: result.error.message
-    });
-  } else {
-    dispatch({
-      type: ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].CreateMembersSuccess
-    });
-    newMember = result.data;
-  }
-
-  return newMember;
-};
-const defaultState = {
-  entities: {},
-  read: {
-    isRequesting: false,
-    error: "",
-    totalItems: 0
-  },
-  create: {
-    isRequesting: false,
-    error: ""
-  }
-};
-const membersReducer = (state = defaultState, action) => {
-  switch (action.type) {
-    case ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].StartReadRequest:
-      return _objectSpread({}, state, {
-        read: _objectSpread({}, state.read, {
-          isRequesting: true
-        })
-      });
-
-    case ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].GetMembersSuccess:
-      const {
-        data: {
-          members,
-          totalItems
-        }
-      } = action;
-      const newMembers = {};
-      members.forEach(member => {
-        newMembers[member.id] = member;
-      });
-      return _objectSpread({}, state, {
-        entities: newMembers,
-        read: _objectSpread({}, state.read, {
-          totalItems,
-          isRequesting: false,
-          error: ""
-        })
-      });
-
-    case ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].GetMembersFailure:
-      const {
-        error
-      } = action;
-      return _objectSpread({}, state, {
-        read: _objectSpread({}, state.read, {
-          isRequesting: false,
-          error
-        })
-      });
-
-    case ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].StartCreateRequest:
-      return _objectSpread({}, state, {
-        create: _objectSpread({}, state.create, {
-          isRequesting: true
-        })
-      });
-
-    case ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].CreateMembersSuccess:
-      return _objectSpread({}, state, {
-        create: _objectSpread({}, state.create, {
-          isRequesting: false,
-          error: ""
-        })
-      });
-
-    case ui_members_constants__WEBPACK_IMPORTED_MODULE_0__["Action"].CreateMembersFailure:
-      const {
-        error: createError
-      } = action;
-      return _objectSpread({}, state, {
-        create: _objectSpread({}, state.create, {
-          isRequesting: false,
-          error: createError
-        })
-      });
-
-    default:
-      return state;
-  }
-};
-
-/***/ }),
-
-/***/ "./src/ui/members/constants.ts":
-/*!*************************************!*\
-  !*** ./src/ui/members/constants.ts ***!
-  \*************************************/
-/*! exports provided: Action, membershipRenewalOptions */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Action", function() { return Action; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "membershipRenewalOptions", function() { return membershipRenewalOptions; });
-let Action;
-
-(function (Action) {
-  Action["StartReadRequest"] = "MEMBERS/START_READ_REQUEST";
-  Action["GetMembersSuccess"] = "MEMBERS/GET_MEMBERS_SUCCESS";
-  Action["GetMembersFailure"] = "MEMBERS/GET_MEMBERS_FAILURE";
-  Action["StartCreateRequest"] = "MEMBERS/START_CREATE_REQUEST";
-  Action["CreateMembersSuccess"] = "MEMBERS/CREATE_MEMBERS_SUCCESS";
-  Action["CreateMembersFailure"] = "MEMBERS/CREATE_MEMBERS_FAILURE";
-})(Action || (Action = {}));
-
-const membershipRenewalOptions = [{
-  label: "None",
-  value: undefined
-}, {
-  label: "1 month",
-  value: 1
-}, {
-  label: "3 months",
-  value: 3
-}, {
-  label: "6 months",
-  value: 6
-}, {
-  label: "12 months",
-  value: 12
-}];
-
-/***/ }),
-
-/***/ "./src/ui/membership/ChangePaymentMethodModal.tsx":
-/*!********************************************************!*\
-  !*** ./src/ui/membership/ChangePaymentMethodModal.tsx ***!
-  \********************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var ui_common_FormModal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
-/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
-/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
-/* harmony import */ var _checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../checkout/PaymentMethodsContainer */ "./src/ui/checkout/PaymentMethodsContainer.tsx");
-
-
-
-
-
-
-
-
-const ChangePaymentMethodModal = ({
-  subscription: {
-    id: subscriptionId,
-    paymentMethodToken
-  } = {}
-}) => {
-  const {
-    isOpen,
-    openModal,
-    closeModal
-  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_5__["default"])();
-  const [paymentMethodId, setPaymentMethodId] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
-  const {
-    isRequesting,
-    error,
-    call
-  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_3__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["updateSubscription"], () => {
-    closeModal();
-  });
-  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async () => {
-    paymentMethodId && call({
-      id: subscriptionId,
-      updateSubscriptionDetails: {
-        paymentMethodToken: paymentMethodId
-      }
-    });
-  }, [call, subscriptionId, paymentMethodId]);
-
-  if (!subscriptionId) {
-    return null;
-  }
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_4__["ActionButton"], {
-    id: "subscription-option-payment-method",
-    color: "primary",
-    variant: "contained",
-    disabled: isRequesting || !!error,
-    label: "Change Payment Method",
-    onClick: openModal
-  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_FormModal__WEBPACK_IMPORTED_MODULE_1__["default"], {
-    id: "change-payment-method",
-    isOpen: true,
-    closeHandler: closeModal,
-    onSubmit: onSubmit,
-    loading: isRequesting,
-    error: error
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    onPaymentMethodChange: setPaymentMethodId,
-    title: "Select or add a new payment method",
-    paymentMethodToken: paymentMethodToken
-  })));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (ChangePaymentMethodModal);
-
-/***/ }),
-
-/***/ "./src/ui/membership/DuplicateInvoiceModal.tsx":
-/*!*****************************************************!*\
-  !*** ./src/ui/membership/DuplicateInvoiceModal.tsx ***!
-  \*****************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
-/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(use_react_router__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
-/* harmony import */ var _invoice_utils__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../invoice/utils */ "./src/ui/invoice/utils.ts");
-/* harmony import */ var _common_FormModal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../common/FormModal */ "./src/ui/common/FormModal.tsx");
-/* harmony import */ var _member_utils__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
-/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-/* harmony import */ var _hooks_useUUID__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../hooks/useUUID */ "./src/ui/hooks/useUUID.ts");
-
-
-
-
-
-
-
-
-
-
-
-const DuplicateInvoiceModal = ({
-  type
-}) => {
-  const uuid = Object(_hooks_useUUID__WEBPACK_IMPORTED_MODULE_9__["useUUID"])();
-  const {
-    data: invoices = []
-  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_4__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__["listInvoices"], {}, undefined, uuid);
-  const {
-    currentUser: {
-      id: currentUserId
-    }
-  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_8__["useAuthState"])();
-  const [outstandingInvoice, setOutstandingInvoice] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
-  const {
-    history
-  } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
-  const goToProfile = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => history.push(Object(_member_utils__WEBPACK_IMPORTED_MODULE_7__["buildProfileRouting"])(currentUserId)), [history, currentUserId]);
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
-    const outstandingInvoiceOfType = invoices.find(invoice => Object(_invoice_utils__WEBPACK_IMPORTED_MODULE_5__["isInvoicePayable"])(invoice) && invoice.resourceClass === type);
-    setOutstandingInvoice(outstandingInvoiceOfType);
-  }, [invoices, setOutstandingInvoice, type]);
-
-  if (!outstandingInvoice) {
-    return null;
-  }
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_FormModal__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    id: "outstanding-invoice",
-    onSubmit: goToProfile,
-    closeHandler: () => setOutstandingInvoice(undefined),
-    cancelText: "Ignore",
-    submitText: "View Dues",
-    title: "Existing Dues Found",
-    isOpen: true
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
-    container: true,
-    spacing: 16
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
-    item: true,
-    xs: 12
-  }, "We found existing outstanding dues matching your selection category. \
-          This may cause issues trying to purchase additional items of this type. \
-          Would you like to view your outstanding dues?"), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
-    item: true,
-    xs: 12
-  }, "If you're having trouble with your dues, please don't hesitate to ", react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("a", {
-    href: "mailto:contact@manchestermakerspace.org"
-  }, "contact us"), ".")));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (DuplicateInvoiceModal);
-
-/***/ }),
-
-/***/ "./src/ui/membership/InvoicingGate.tsx":
-/*!*********************************************!*\
-  !*** ./src/ui/membership/InvoicingGate.tsx ***!
-  \*********************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
-/* harmony import */ var app_entities_invoice__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! app/entities/invoice */ "./src/app/entities/invoice.ts");
-
-
-
-/**
- * Since we cant gate all Invoicing features by a user permission, this allows disabling of all invoicing by disabling or removing
- * invoice options. If all billing permissions are set to false and no results  return from this options request, effectively
- * all invoicing components will be disabled. Useful for an emergency response.
- */
-
-const InvoicingGate = ({
-  children
-}) => {
-  const {
-    data: options = []
-  } = Object(ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_1__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_0__["listInvoiceOptions"], {
-    types: [app_entities_invoice__WEBPACK_IMPORTED_MODULE_2__["InvoiceableResource"].Membership]
-  });
-  return children(!!options.length);
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (InvoicingGate);
-
-/***/ }),
+/***/ }),
 
 /***/ "./src/ui/membership/MembershipSelectForm.tsx":
 /*!****************************************************!*\
@@ -199660,12 +198961,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var redux__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! redux */ "./node_modules/redux/es/redux.js");
 /* harmony import */ var connected_react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! connected-react-router */ "./node_modules/connected-react-router/esm/index.js");
 /* harmony import */ var ui_auth_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/auth/actions */ "./src/ui/auth/actions.ts");
-/* harmony import */ var ui_members_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/members/actions */ "./src/ui/members/actions.ts");
-/* harmony import */ var ui_rentals_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/rentals/actions */ "./src/ui/rentals/actions.ts");
-/* harmony import */ var ui_billing_actions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/billing/actions */ "./src/ui/billing/actions.ts");
-/* harmony import */ var ui_member_actions__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/member/actions */ "./src/ui/member/actions.ts");
-/* harmony import */ var ui_earnedMemberships_actions__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/earnedMemberships/actions */ "./src/ui/earnedMemberships/actions.ts");
-/* harmony import */ var _checkout_cart__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./checkout/cart */ "./src/ui/checkout/cart.ts");
+/* harmony import */ var ui_billing_actions__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/billing/actions */ "./src/ui/billing/actions.ts");
+/* harmony import */ var ui_earnedMemberships_actions__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/earnedMemberships/actions */ "./src/ui/earnedMemberships/actions.ts");
+/* harmony import */ var _checkout_cart__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./checkout/cart */ "./src/ui/checkout/cart.ts");
 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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -199678,19 +198976,13 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-
-
-
 const getRootReducer = history => Object(redux__WEBPACK_IMPORTED_MODULE_0__["combineReducers"])({
   router: Object(connected_react_router__WEBPACK_IMPORTED_MODULE_1__["connectRouter"])(history),
   base: baseReducer,
   auth: ui_auth_actions__WEBPACK_IMPORTED_MODULE_2__["authReducer"],
-  cart: _checkout_cart__WEBPACK_IMPORTED_MODULE_8__["cartReducer"],
-  members: ui_members_actions__WEBPACK_IMPORTED_MODULE_3__["membersReducer"],
-  member: ui_member_actions__WEBPACK_IMPORTED_MODULE_6__["memberReducer"],
-  rentals: ui_rentals_actions__WEBPACK_IMPORTED_MODULE_4__["rentalsReducer"],
-  billing: ui_billing_actions__WEBPACK_IMPORTED_MODULE_5__["billingReducer"],
-  earnedMemberships: ui_earnedMemberships_actions__WEBPACK_IMPORTED_MODULE_7__["earnedMembershipsReducer"]
+  cart: _checkout_cart__WEBPACK_IMPORTED_MODULE_5__["cartReducer"],
+  billing: ui_billing_actions__WEBPACK_IMPORTED_MODULE_3__["billingReducer"],
+  earnedMemberships: ui_earnedMemberships_actions__WEBPACK_IMPORTED_MODULE_4__["earnedMembershipsReducer"]
 });
 let TransactionAction;
 
@@ -199785,32 +199077,110 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
 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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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; }
+
+
+
+const useAuthState = () => {
+  const getState = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](state => state.auth, []);
+  return Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useSelector"])(getState, react_redux__WEBPACK_IMPORTED_MODULE_1__["shallowEqual"]);
+};
+const useApiState = reducerKey => {
+  const dispatch = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useDispatch"])();
+  const dispatchApi = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](action => {
+    dispatch(_objectSpread({
+      key: reducerKey
+    }, action));
+  }, [reducerKey]);
+  const getState = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](state => getApiState(reducerKey, state), [reducerKey]);
+  return [Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useSelector"])(getState, react_redux__WEBPACK_IMPORTED_MODULE_1__["shallowEqual"]), dispatchApi];
+};
+const getApiState = (reducerKey, state) => {
+  return state.base[reducerKey] || {
+    isRequesting: false
+  };
+};
+
+/***/ }),
+
+/***/ "./src/ui/rentals/CreateRental.tsx":
+/*!*****************************************!*\
+  !*** ./src/ui/rentals/CreateRental.tsx ***!
+  \*****************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
+/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+/* harmony import */ var _RentalForm__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./RentalForm */ "./src/ui/rentals/RentalForm.tsx");
+
 
-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; }
 
 
 
-const useAuthState = () => {
-  const getState = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](state => state.auth, []);
-  return Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useSelector"])(getState, react_redux__WEBPACK_IMPORTED_MODULE_1__["shallowEqual"]);
-};
-const useApiState = reducerKey => {
-  const dispatch = Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useDispatch"])();
-  const dispatchApi = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](action => {
-    dispatch(_objectSpread({
-      key: reducerKey
-    }, action));
-  }, [reducerKey]);
-  const getState = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](state => getApiState(reducerKey, state), [reducerKey]);
-  return [Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["useSelector"])(getState, react_redux__WEBPACK_IMPORTED_MODULE_1__["shallowEqual"]), dispatchApi];
-};
-const getApiState = (reducerKey, state) => {
-  return state.base[reducerKey] || {
-    isRequesting: false
-  };
+
+
+const CreateRental = ({
+  member,
+  onCreate
+}) => {
+  const {
+    isOpen,
+    openModal,
+    closeModal
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_4__["default"])();
+  const formRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
+  const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](({
+    response
+  }) => {
+    onCreate(response.data.id);
+    closeModal();
+  }, [onCreate, closeModal]);
+  const {
+    isRequesting,
+    error,
+    call: create
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_2__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["adminCreateRental"], onSuccess);
+  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
+    const validUpdate = await formRef.current.validate(form);
+    if (!form.isValid()) return;
+    create({
+      createRentalDetails: validUpdate
+    });
+  }, [formRef, create]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_3__["ActionButton"], {
+    id: "rentals-list-create",
+    color: "primary",
+    variant: "contained",
+    disabled: isRequesting,
+    label: "Create New Rental",
+    onClick: openModal
+  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_RentalForm__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    ref: formRef,
+    isOpen: true,
+    rental: member ? {
+      memberId: member.id,
+      memberName: `${member.firstname} ${member.lastname}`
+    } : {},
+    isRequesting: isRequesting,
+    error: error,
+    onClose: closeModal,
+    onSubmit: onSubmit,
+    title: "Create New Rental"
+  }));
 };
 
+/* harmony default export */ __webpack_exports__["default"] = (CreateRental);
+
 /***/ }),
 
 /***/ "./src/ui/rentals/DeleteRentalModal.tsx":
@@ -199905,6 +199275,162 @@ const DeleteRentalModal = ({
 
 /***/ }),
 
+/***/ "./src/ui/rentals/EditRental.tsx":
+/*!***************************************!*\
+  !*** ./src/ui/rentals/EditRental.tsx ***!
+  \***************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var ui_common_ButtonRow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
+/* harmony import */ var _RentalForm__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./RentalForm */ "./src/ui/rentals/RentalForm.tsx");
+
+
+
+
+
+
+
+const EditRental = ({
+  rental,
+  onUpdate
+}) => {
+  const {
+    isOpen,
+    openModal,
+    closeModal
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_2__["default"])();
+  const formRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
+  const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](({
+    reset
+  }) => {
+    onUpdate();
+    closeModal();
+    reset();
+  }, [onUpdate, closeModal]);
+  const {
+    call,
+    isRequesting,
+    error
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_3__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_1__["adminUpdateRental"], onSuccess);
+  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
+    const validUpdate = await formRef.current.validate(form);
+    if (!form.isValid()) return;
+    call({
+      id: rental.id,
+      updateRentalDetails: validUpdate
+    });
+  }, [rental, formRef]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_ButtonRow__WEBPACK_IMPORTED_MODULE_4__["ActionButton"], {
+    id: "rentals-list-edit",
+    variant: "outlined",
+    color: "primary",
+    disabled: !rental,
+    onClick: openModal,
+    label: "Edit Rental"
+  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_RentalForm__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    ref: formRef,
+    rental: rental,
+    isOpen: true,
+    isRequesting: isRequesting,
+    error: error,
+    onClose: closeModal,
+    onSubmit: onSubmit
+  }));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (EditRental);
+
+/***/ }),
+
+/***/ "./src/ui/rentals/RenewRental.tsx":
+/*!****************************************!*\
+  !*** ./src/ui/rentals/RenewRental.tsx ***!
+  \****************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var ui_rentals_utils__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/rentals/utils */ "./src/ui/rentals/utils.ts");
+/* harmony import */ var ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/common/RenewalForm */ "./src/ui/common/RenewalForm.tsx");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
+/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+
+
+
+
+
+
+
+
+const RenewRental = ({
+  rental = {},
+  onRenew
+}) => {
+  const {
+    isOpen,
+    openModal,
+    closeModal
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_6__["default"])();
+  const formRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
+  const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](({
+    reset
+  }) => {
+    closeModal();
+    onRenew();
+    reset();
+  }, [closeModal]);
+  const {
+    isRequesting: rentalRenewing,
+    error: renewError,
+    call: renew
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_4__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__["adminUpdateRental"], onSuccess);
+  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
+    const validUpdate = await formRef.current.validate(form);
+    if (!form.isValid()) return; // TODO: renew rental type isn't supported
+
+    renew({
+      id: rental.id,
+      updateRentalDetails: validUpdate
+    });
+  }, [formRef, renew, rental]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ButtonRow__WEBPACK_IMPORTED_MODULE_5__["ActionButton"], {
+    id: "rentals-list-renew",
+    color: "primary",
+    variant: "outlined",
+    disabled: !rental.id,
+    label: "Renew",
+    onClick: openModal
+  }), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_2__["default"], {
+    ref: formRef,
+    title: "Renew Rental",
+    entity: Object(ui_rentals_utils__WEBPACK_IMPORTED_MODULE_1__["rentalToRenewal"])(rental),
+    isOpen: true,
+    isRequesting: rentalRenewing,
+    error: renewError,
+    onClose: closeModal,
+    onSubmit: onSubmit
+  }));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (RenewRental);
+
+/***/ }),
+
 /***/ "./src/ui/rentals/RentalForm.tsx":
 /*!***************************************!*\
   !*** ./src/ui/rentals/RentalForm.tsx ***!
@@ -199976,7 +199502,7 @@ class RentalForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       isRequesting,
       error,
       onSubmit,
-      rental
+      rental = {}
     } = this.props;
     const rentalFields = Object(ui_rentals_constants__WEBPACK_IMPORTED_MODULE_7__["fields"])(rental);
     return isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_FormModal__WEBPACK_IMPORTED_MODULE_6__["default"], {
@@ -200053,603 +199579,47 @@ class RentalForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
         onChange: this.toggleContract,
         color: "default"
       }),
-      label: rentalFields.contractOnFile.label
-    }))));
-  }
-
-}
-
-/* harmony default export */ __webpack_exports__["default"] = (RentalForm);
-
-/***/ }),
-
-/***/ "./src/ui/rentals/RentalsList.tsx":
-/*!****************************************!*\
-  !*** ./src/ui/rentals/RentalsList.tsx ***!
-  \****************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");
-/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
-/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/esm/react-router-dom.js");
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var app_entities_rental__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! app/entities/rental */ "./src/app/entities/rental.ts");
-/* harmony import */ var ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/common/table/constants */ "./src/ui/common/table/constants.ts");
-/* harmony import */ var ui_common_table_TableContainer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/common/table/TableContainer */ "./src/ui/common/table/TableContainer.tsx");
-/* harmony import */ var ui_rentals_actions__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/rentals/actions */ "./src/ui/rentals/actions.ts");
-/* harmony import */ var ui_constants__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/constants */ "./src/ui/constants.ts");
-/* harmony import */ var ui_common_StatusLabel__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/common/StatusLabel */ "./src/ui/common/StatusLabel.tsx");
-/* harmony import */ var ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/utils/timeToDate */ "./src/ui/utils/timeToDate.ts");
-/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-/* harmony import */ var ui_rentals_RentalForm__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/rentals/RentalForm */ "./src/ui/rentals/RentalForm.tsx");
-/* harmony import */ var ui_rentals_UpdateRentalContainer__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ui/rentals/UpdateRentalContainer */ "./src/ui/rentals/UpdateRentalContainer.tsx");
-/* harmony import */ var ui_rentals_DeleteRentalModal__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ui/rentals/DeleteRentalModal */ "./src/ui/rentals/DeleteRentalModal.tsx");
-/* harmony import */ var ui_common_ButtonRow__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ui/common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
-/* harmony import */ var ui_rentals_utils__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ui/rentals/utils */ "./src/ui/rentals/utils.ts");
-/* harmony import */ var ui_rentals_constants__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ui/rentals/constants */ "./src/ui/rentals/constants.ts");
-/* harmony import */ var ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ui/common/RenewalForm */ "./src/ui/common/RenewalForm.tsx");
-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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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; }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-class RentalsList extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(props) {
-    super(props);
-
-    _defineProperty(this, "fields", [{
-      id: "number",
-      label: "Number",
-      cell: row => row.number,
-      defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Desc
-    }, {
-      id: "description",
-      label: "Description",
-      cell: row => row.description
-    }, {
-      id: "expiration",
-      label: "Expiration Date",
-      cell: row => row.expiration ? Object(ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_11__["timeToDate"])(row.expiration) : "N/A",
-      defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Desc
-    }, ...(this.props.admin ? [{
-      id: "member",
-      label: "Member",
-      cell: row => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router_dom__WEBPACK_IMPORTED_MODULE_3__["Link"], {
-        to: `/members/${row.memberId}`
-      }, row.memberName),
-      defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Desc,
-      width: 200
-    }] : []), {
-      id: "status",
-      label: "Status",
-      cell: row => {
-        const current = moment__WEBPACK_IMPORTED_MODULE_1__(row.expiration).valueOf() > Date.now();
-        const statusColor = current ? ui_constants__WEBPACK_IMPORTED_MODULE_9__["Status"].Success : ui_constants__WEBPACK_IMPORTED_MODULE_9__["Status"].Danger;
-        const label = current ? "Active" : "Expired";
-        return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_StatusLabel__WEBPACK_IMPORTED_MODULE_10__["default"], {
-          label: label,
-          color: statusColor
-        });
-      }
-    }]);
-
-    _defineProperty(this, "openCreateModal", () => this.openRentalModal(app_constants__WEBPACK_IMPORTED_MODULE_12__["CrudOperation"].Create));
-
-    _defineProperty(this, "openUpdateModal", () => this.openRentalModal(app_constants__WEBPACK_IMPORTED_MODULE_12__["CrudOperation"].Update));
-
-    _defineProperty(this, "openDeleteModal", () => this.openRentalModal(app_constants__WEBPACK_IMPORTED_MODULE_12__["CrudOperation"].Delete));
-
-    _defineProperty(this, "openRentalModal", operation => this.setState({
-      openRentalForm: true,
-      modalOperation: operation
-    }));
-
-    _defineProperty(this, "closeRentalModal", () => {
-      this.setState({
-        openRentalForm: false
-      });
-    });
-
-    _defineProperty(this, "openRenewalModal", () => this.setState({
-      openRenewalForm: true
-    }));
-
-    _defineProperty(this, "closeRenewalModal", () => {
-      this.setState({
-        openRenewalForm: false
-      });
-    });
-
-    _defineProperty(this, "getActionButtons", () => {
-      const {
-        selectedId
-      } = this.state;
-      const {
-        admin,
-        rentals
-      } = this.props;
-      const selectedRental = selectedId && rentals[selectedId];
-
-      const onDelete = () => {
-        this.setState({
-          selectedId: undefined,
-          pageNum: 0
-        }, this.getRentals);
-      };
-
-      const actionButtons = [...(admin ? [{
-        id: "rentals-list-create",
-        variant: "contained",
-        color: "primary",
-        onClick: this.openCreateModal,
-        label: "Create New Rental"
-      }, {
-        id: "rentals-list-edit",
-        variant: "outlined",
-        color: "primary",
-        disabled: !selectedId,
-        onClick: this.openUpdateModal,
-        label: "Edit Rental"
-      }, {
-        id: "rentals-list-renew",
-        variant: "outlined",
-        color: "primary",
-        disabled: !selectedId,
-        onClick: this.openRenewalModal,
-        label: "Renew Rental"
-      }] : [])];
-      return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_ButtonRow__WEBPACK_IMPORTED_MODULE_16__["default"], {
-        actionButtons: actionButtons
-      }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_DeleteRentalModal__WEBPACK_IMPORTED_MODULE_15__["default"], {
-        rental: selectedRental,
-        onDelete: onDelete
-      }));
-    });
-
-    _defineProperty(this, "getQueryParams", () => {
-      const {
-        pageNum,
-        orderBy,
-        order
-      } = this.state;
-      return {
-        pageNum,
-        orderBy,
-        order
-      };
-    });
-
-    _defineProperty(this, "getRentals", (resetPage = false) => {
-      if (resetPage) {
-        this.setState({
-          pageNum: 0
-        });
-      }
-
-      this.props.getRentals(this.props.admin, this.getQueryParams());
-    });
-
-    _defineProperty(this, "rowId", row => row.id);
-
-    _defineProperty(this, "onSort", prop => {
-      const orderBy = prop;
-      let order = ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Desc;
-
-      if (this.state.orderBy === orderBy && this.state.order === order) {
-        order = ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Asc;
-      }
-
-      this.setState({
-        order,
-        orderBy,
-        pageNum: 0
-      }, () => this.getRentals(true));
-    });
-
-    _defineProperty(this, "onPageChange", newPage => {
-      this.setState({
-        pageNum: newPage
-      }, this.getRentals);
-    });
-
-    _defineProperty(this, "onSelect", (id, selected) => {
-      if (selected) {
-        this.setState({
-          selectedId: id
-        });
-      } else {
-        this.setState({
-          selectedId: undefined
-        });
-      }
-    });
-
-    _defineProperty(this, "renderInvoiceForms", () => {
-      const {
-        selectedId,
-        openRentalForm,
-        modalOperation,
-        openRenewalForm
-      } = this.state;
-      const {
-        rentals,
-        member,
-        admin
-      } = this.props;
-
-      const editForm = renderProps => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_RentalForm__WEBPACK_IMPORTED_MODULE_13__["default"], {
-        ref: renderProps.setRef,
-        rental: renderProps.rental,
-        isOpen: renderProps.isOpen,
-        isRequesting: renderProps.isRequesting,
-        error: renderProps.error,
-        onClose: renderProps.closeHandler,
-        onSubmit: renderProps.submit
-      });
-
-      const createForm = renderProps => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_RentalForm__WEBPACK_IMPORTED_MODULE_13__["default"], {
-        ref: renderProps.setRef,
-        rental: renderProps.rental,
-        isOpen: renderProps.isOpen,
-        isRequesting: renderProps.isRequesting,
-        error: renderProps.error,
-        onClose: renderProps.closeHandler,
-        onSubmit: renderProps.submit,
-        title: "Create Rental"
-      });
-
-      const renewForm = renderProps => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_RenewalForm__WEBPACK_IMPORTED_MODULE_19__["default"], {
-        ref: renderProps.setRef,
-        renewalOptions: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_18__["rentalRenewalOptions"],
-        title: "Renew Rental",
-        entity: Object(ui_rentals_utils__WEBPACK_IMPORTED_MODULE_17__["rentalToRenewal"])(renderProps.rental),
-        isOpen: renderProps.isOpen,
-        isRequesting: renderProps.isRequesting,
-        error: renderProps.error,
-        onClose: renderProps.closeHandler,
-        onSubmit: renderProps.submit
-      });
-
-      const selectedRental = rentals[selectedId];
-      return admin && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, !!selectedRental && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_UpdateRentalContainer__WEBPACK_IMPORTED_MODULE_14__["default"], {
-        operation: app_constants__WEBPACK_IMPORTED_MODULE_12__["CrudOperation"].Update,
-        isOpen: openRentalForm && modalOperation === app_constants__WEBPACK_IMPORTED_MODULE_12__["CrudOperation"].Update,
-        rental: rentals[selectedId],
-        closeHandler: this.closeRentalModal,
-        render: editForm
-      }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_UpdateRentalContainer__WEBPACK_IMPORTED_MODULE_14__["default"], {
-        operation: app_constants__WEBPACK_IMPORTED_MODULE_12__["CrudOperation"].Update,
-        isOpen: openRenewalForm,
-        rental: rentals[selectedId],
-        closeHandler: this.closeRenewalModal,
-        render: renewForm
-      })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_UpdateRentalContainer__WEBPACK_IMPORTED_MODULE_14__["default"], {
-        operation: app_constants__WEBPACK_IMPORTED_MODULE_12__["CrudOperation"].Create,
-        isOpen: openRentalForm && modalOperation === app_constants__WEBPACK_IMPORTED_MODULE_12__["CrudOperation"].Create,
-        rental: member ? {
-          memberId: member.id,
-          memberName: `${member.firstname} ${member.lastname}`
-        } : {},
-        closeHandler: this.closeRentalModal,
-        render: createForm
-      }));
-    });
-
-    this.state = {
-      selectedId: undefined,
-      pageNum: 0,
-      orderBy: "",
-      order: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Asc,
-      modalOperation: undefined,
-      openRentalForm: false,
-      openRenewalForm: false
-    };
-  }
-
-  componentDidMount() {
-    this.getRentals();
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      isCreating: wasCreating,
-      isUpdating: wasUpdating,
-      member: oldMember
-    } = prevProps;
-    const {
-      isCreating,
-      createError,
-      isUpdating,
-      updateError,
-      member
-    } = this.props;
-
-    if (wasCreating && !isCreating && !createError || // refresh list on create
-    wasUpdating && !isUpdating && !updateError || // or update
-    (oldMember && oldMember.id) !== (member && member.id) // or member change
-    ) {
-        this.getRentals(true);
-      }
-  }
-
-  render() {
-    const {
-      rentals,
-      totalItems,
-      isReading,
-      readError,
-      admin,
-      member
-    } = this.props;
-    const {
-      selectedId,
-      pageNum,
-      order,
-      orderBy
-    } = this.state;
-    return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default.a, {
-      container: true,
-      spacing: 24,
-      justify: "center"
-    }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_4___default.a, {
-      item: true,
-      md: member ? 12 : 10,
-      xs: 12
-    }, admin && this.getActionButtons(), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_table_TableContainer__WEBPACK_IMPORTED_MODULE_7__["default"], {
-      id: "rentals-table",
-      title: "Rentals",
-      loading: isReading,
-      data: Object.values(rentals),
-      error: readError,
-      totalItems: totalItems,
-      selectedIds: [selectedId],
-      pageNum: pageNum,
-      columns: this.fields,
-      order: order,
-      orderBy: orderBy,
-      onSort: this.onSort,
-      rowId: this.rowId,
-      onPageChange: this.onPageChange,
-      onSelect: this.onSelect
-    }), this.renderInvoiceForms()));
-  }
-
-}
-
-const mapStateToProps = (state, _ownProps) => {
-  const {
-    entities: rentals,
-    read: {
-      totalItems,
-      isRequesting: isReading,
-      error: readError
-    },
-    create: {
-      isRequesting: isCreating,
-      error: createError
-    },
-    update: {
-      isRequesting: isUpdating,
-      error: updateError
-    }
-  } = state.rentals;
-  const {
-    currentUser: {
-      isAdmin: admin
-    }
-  } = state.auth;
-  return {
-    rentals,
-    totalItems,
-    isReading,
-    readError,
-    isCreating,
-    createError,
-    isUpdating,
-    updateError,
-    admin
-  };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-  const {
-    member
-  } = ownProps;
-  return {
-    getRentals: (admin, queryParams) => dispatch(Object(ui_rentals_actions__WEBPACK_IMPORTED_MODULE_8__["readRentalsAction"])(admin, _objectSpread({}, queryParams, {}, member && {
-      [app_entities_rental__WEBPACK_IMPORTED_MODULE_5__["Properties"].MemberId]: member.id
-    })))
-  };
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (Object(react_router_dom__WEBPACK_IMPORTED_MODULE_3__["withRouter"])(Object(react_redux__WEBPACK_IMPORTED_MODULE_2__["connect"])(mapStateToProps, mapDispatchToProps)(RentalsList)));
-
-/***/ }),
-
-/***/ "./src/ui/rentals/UpdateRentalContainer.tsx":
-/*!**************************************************!*\
-  !*** ./src/ui/rentals/UpdateRentalContainer.tsx ***!
-  \**************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var react_redux__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
-/* harmony import */ var ui_rentals_actions__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ui/rentals/actions */ "./src/ui/rentals/actions.ts");
-/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(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; }
-
-
-
-
-
-
-class UpdateRental extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "formRef", void 0);
-
-    _defineProperty(this, "setFormRef", ref => this.formRef = ref);
-
-    _defineProperty(this, "submitRentalForm", async form => {
-      const validUpdate = this.formRef.validate && (await this.formRef.validate(form));
-      if (!form.isValid()) return;
-      await this.props.dispatchRental(validUpdate);
-
-      if (!this.props.error) {
-        return true;
-      }
-    });
-  }
-
-  componentDidUpdate(prevProps) {
-    const {
-      isRequesting: wasRequesting
-    } = prevProps;
-    const {
-      isOpen,
-      isRequesting,
-      closeHandler,
-      error
-    } = this.props;
-
-    if (isOpen && wasRequesting && !isRequesting && !error) {
-      closeHandler();
-    }
-  }
-
-  render() {
-    const {
-      render
-    } = this.props;
-
-    const renderPayload = _objectSpread({}, this.props, {
-      submit: this.submitRentalForm,
-      setRef: this.setFormRef
-    });
-
-    return render(renderPayload);
+      label: rentalFields.contractOnFile.label
+    }))));
   }
 
 }
 
-const mapStateToProps = (state, ownProps) => {
-  let stateProps = {};
-  const {
-    operation
-  } = ownProps;
-
-  switch (operation) {
-    case app_constants__WEBPACK_IMPORTED_MODULE_3__["CrudOperation"].Update:
-      stateProps = state.rentals.update;
-      break;
-
-    case app_constants__WEBPACK_IMPORTED_MODULE_3__["CrudOperation"].Create:
-      stateProps = state.rentals.create;
-      break;
-
-    case app_constants__WEBPACK_IMPORTED_MODULE_3__["CrudOperation"].Delete:
-      stateProps = state.rentals.delete;
-      break;
-  }
-
-  const {
-    isRequesting,
-    error
-  } = stateProps;
-  return {
-    error,
-    isRequesting
-  };
-};
-
-const mapDispatchToProps = (dispatch, ownProps) => {
-  const {
-    rental,
-    operation
-  } = ownProps;
-  return {
-    dispatchRental: rentalDetails => {
-      let action;
-
-      switch (operation) {
-        case app_constants__WEBPACK_IMPORTED_MODULE_3__["CrudOperation"].Update:
-          action = Object(ui_rentals_actions__WEBPACK_IMPORTED_MODULE_2__["updateRentalAction"])(rental.id, rentalDetails);
-          break;
-
-        case app_constants__WEBPACK_IMPORTED_MODULE_3__["CrudOperation"].Create:
-          action = Object(ui_rentals_actions__WEBPACK_IMPORTED_MODULE_2__["createRentalAction"])(rentalDetails);
-          break;
-
-        case app_constants__WEBPACK_IMPORTED_MODULE_3__["CrudOperation"].Delete:
-          action = Object(ui_rentals_actions__WEBPACK_IMPORTED_MODULE_2__["deleteRentalAction"])(rental.id);
-          break;
-      }
-
-      return dispatch(action);
-    }
-  };
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (Object(react_redux__WEBPACK_IMPORTED_MODULE_1__["connect"])(mapStateToProps, mapDispatchToProps)(UpdateRental));
+/* harmony default export */ __webpack_exports__["default"] = (RentalForm);
 
 /***/ }),
 
-/***/ "./src/ui/rentals/actions.ts":
-/*!***********************************!*\
-  !*** ./src/ui/rentals/actions.ts ***!
-  \***********************************/
-/*! exports provided: readRentalsAction, createRentalAction, updateRentalAction, deleteRentalAction, rentalsReducer */
+/***/ "./src/ui/rentals/RentalsList.tsx":
+/*!****************************************!*\
+  !*** ./src/ui/rentals/RentalsList.tsx ***!
+  \****************************************/
+/*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "readRentalsAction", function() { return readRentalsAction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "createRentalAction", function() { return createRentalAction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "updateRentalAction", function() { return updateRentalAction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "deleteRentalAction", function() { return deleteRentalAction; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rentalsReducer", function() { return rentalsReducer; });
-/* harmony import */ var lodash_es_omit__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! lodash-es/omit */ "./node_modules/lodash-es/omit.js");
-/* harmony import */ var ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ui/rentals/constants */ "./src/ui/rentals/constants.ts");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! moment */ "./node_modules/moment/moment.js");
+/* harmony import */ var moment__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(moment__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var react_router_dom__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! react-router-dom */ "./node_modules/react-router-dom/esm/react-router-dom.js");
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _common_table_StatefulTable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../common/table/StatefulTable */ "./src/ui/common/table/StatefulTable.tsx");
+/* harmony import */ var ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/common/table/constants */ "./src/ui/common/table/constants.ts");
+/* harmony import */ var ui_constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/constants */ "./src/ui/constants.ts");
+/* harmony import */ var ui_common_StatusLabel__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/common/StatusLabel */ "./src/ui/common/StatusLabel.tsx");
+/* harmony import */ var ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/utils/timeToDate */ "./src/ui/utils/timeToDate.ts");
+/* harmony import */ var ui_rentals_DeleteRentalModal__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/rentals/DeleteRentalModal */ "./src/ui/rentals/DeleteRentalModal.tsx");
+/* harmony import */ var ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
+/* harmony import */ var ui_rentals_CreateRental__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/rentals/CreateRental */ "./src/ui/rentals/CreateRental.tsx");
+/* harmony import */ var ui_rentals_RenewRental__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/rentals/RenewRental */ "./src/ui/rentals/RenewRental.tsx");
+/* harmony import */ var ui_rentals_EditRental__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ui/rentals/EditRental */ "./src/ui/rentals/EditRental.tsx");
+/* harmony import */ var _utils_extractTotalItems__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../utils/extractTotalItems */ "./src/ui/utils/extractTotalItems.ts");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _common_Filters_QueryContext__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! ../common/Filters/QueryContext */ "./src/ui/common/Filters/QueryContext.tsx");
 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(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -200659,294 +199629,149 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-const readRentalsAction = (isUserAdmin, queryParams) => async dispatch => {
-  dispatch({
-    type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].StartReadRequest
-  });
-  const func = isUserAdmin ? makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["adminListRentals"] : makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["listRentals"];
-  const result = await func(queryParams);
 
-  if (Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["isApiErrorResponse"])(result)) {
-    dispatch({
-      type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].GetRentalsFailure,
-      error: result.error.message
-    });
-  } else {
-    const {
-      data,
-      response
-    } = result;
-    const totalItems = response.headers.get("total-items");
-    dispatch({
-      type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].GetRentalsSuccess,
-      data: {
-        rentals: data,
-        totalItems: Number(totalItems)
-      }
-    });
-  }
-};
-const createRentalAction = rentalForm => async dispatch => {
-  dispatch({
-    type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].StartCreateRequest
-  });
-  const result = await Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["adminCreateRental"])({
-    createRentalDetails: rentalForm
-  });
 
-  if (Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["isApiErrorResponse"])(result)) {
-    dispatch({
-      type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].CreateRentalFailure,
-      error: result.error.message
-    });
-  } else {
-    dispatch({
-      type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].CreateRentalSuccess,
-      data: result.data
-    });
-  }
-};
-const updateRentalAction = (rentalId, updatedRental) => async dispatch => {
-  dispatch({
-    type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].StartUpdateRequest
-  });
-  const result = await Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["adminUpdateRental"])({
-    id: rentalId,
-    updateRentalDetails: updatedRental
-  });
 
-  if (Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["isApiErrorResponse"])(result)) {
-    dispatch({
-      type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].UpdateRentalFailure,
-      error: result.error.message
-    });
-  } else {
-    dispatch({
-      type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].UpdateRentalSuccess,
-      data: result.data
-    });
-  }
-};
-const deleteRentalAction = rentalId => async dispatch => {
-  dispatch({
-    type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].StartDeleteRequest
-  });
-  const result = await Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["adminDeleteRental"])({
-    id: rentalId
-  });
 
-  if (Object(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["isApiErrorResponse"])(result)) {
-    dispatch({
-      type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].DeleteRentalFailure,
-      error: result.error.message
-    });
-  } else {
-    dispatch({
-      type: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].DeleteRentalSuccess,
-      data: rentalId
-    });
-  }
-};
-const defaultState = {
-  entities: {},
-  read: {
-    isRequesting: false,
-    error: "",
-    totalItems: 0
-  },
-  create: {
-    isRequesting: false,
-    error: ""
-  },
-  update: {
-    isRequesting: false,
-    error: ""
-  },
-  delete: {
-    isRequesting: false,
-    error: ""
-  }
-};
-const rentalsReducer = (state = defaultState, action) => {
-  switch (action.type) {
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].StartReadRequest:
-      return _objectSpread({}, state, {
-        read: _objectSpread({}, state.read, {
-          isRequesting: true
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].GetRentalsSuccess:
-      const {
-        data: {
-          rentals,
-          totalItems
-        }
-      } = action;
-      const newRentals = {};
-      rentals.forEach(rental => {
-        newRentals[rental.id] = rental;
-      });
-      return _objectSpread({}, state, {
-        entities: newRentals,
-        read: _objectSpread({}, state.read, {
-          totalItems,
-          isRequesting: false,
-          error: ""
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].GetRentalsFailure:
-      const {
-        error
-      } = action;
-      return _objectSpread({}, state, {
-        read: _objectSpread({}, state.read, {
-          isRequesting: false,
-          error
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].StartCreateRequest:
-      return _objectSpread({}, state, {
-        create: _objectSpread({}, state.create, {
-          isRequesting: true
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].CreateRentalSuccess:
-      const newRental = action.data;
-      return _objectSpread({}, state, {
-        entities: _objectSpread({}, state.entities, {
-          [newRental.id]: newRental
-        }),
-        create: _objectSpread({}, state.create, {
-          isRequesting: false,
-          error: ""
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].CreateRentalFailure:
-      const {
-        error: createError
-      } = action;
-      return _objectSpread({}, state, {
-        create: _objectSpread({}, state.create, {
-          isRequesting: false,
-          error: createError
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].StartUpdateRequest:
-      return _objectSpread({}, state, {
-        update: _objectSpread({}, state.update, {
-          isRequesting: true
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].UpdateRentalSuccess:
-      const {
-        data: updatedRental
-      } = action;
-      return _objectSpread({}, state, {
-        entities: _objectSpread({}, state.entities, {
-          [updatedRental.id]: updatedRental
-        }),
-        update: _objectSpread({}, state.update, {
-          isRequesting: false,
-          error: ""
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].UpdateRentalFailure:
-      const updateError = action.error;
-      return _objectSpread({}, state, {
-        update: _objectSpread({}, state.update, {
-          isRequesting: false,
-          error: updateError
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].StartDeleteRequest:
-      return _objectSpread({}, state, {
-        delete: _objectSpread({}, state.delete, {
-          isRequesting: true
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].DeleteRentalSuccess:
-      const id = action.data;
-      return _objectSpread({}, state, {
-        entities: Object(lodash_es_omit__WEBPACK_IMPORTED_MODULE_0__["default"])(state.entities, [id]),
-        delete: _objectSpread({}, state.delete, {
-          isRequesting: false,
-          error: ""
-        })
-      });
 
-    case ui_rentals_constants__WEBPACK_IMPORTED_MODULE_1__["Action"].DeleteRentalFailure:
-      const deleteError = action.error;
-      return _objectSpread({}, state, {
-        delete: _objectSpread({}, state.delete, {
-          isRequesting: false,
-          error: deleteError
-        })
-      });
 
-    default:
-      return state;
-  }
+const rowId = rental => rental.id;
+
+const RentalsList = ({
+  member
+}) => {
+  const {
+    currentUser: {
+      id,
+      isAdmin
+    }
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_16__["useAuthState"])();
+  const asAdmin = isAdmin && id !== (member && member.id);
+  const fields = [{
+    id: "number",
+    label: "Number",
+    cell: row => row.number,
+    defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Desc
+  }, {
+    id: "description",
+    label: "Description",
+    cell: row => row.description
+  }, {
+    id: "expiration",
+    label: "Expiration Date",
+    cell: row => row.expiration ? Object(ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_9__["timeToDate"])(row.expiration) : "N/A",
+    defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Desc
+  }, ...(asAdmin ? [{
+    id: "member",
+    label: "Member",
+    cell: row => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react_router_dom__WEBPACK_IMPORTED_MODULE_2__["Link"], {
+      to: `/members/${row.memberId}`
+    }, row.memberName),
+    defaultSortDirection: ui_common_table_constants__WEBPACK_IMPORTED_MODULE_6__["SortDirection"].Desc,
+    width: 200
+  }] : []), {
+    id: "status",
+    label: "Status",
+    cell: row => {
+      const current = moment__WEBPACK_IMPORTED_MODULE_1__(row.expiration).valueOf() > Date.now();
+      const statusColor = current ? ui_constants__WEBPACK_IMPORTED_MODULE_7__["Status"].Success : ui_constants__WEBPACK_IMPORTED_MODULE_7__["Status"].Danger;
+      const label = current ? "Active" : "Expired";
+      return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_StatusLabel__WEBPACK_IMPORTED_MODULE_8__["default"], {
+        label: label,
+        color: statusColor
+      });
+    }
+  }];
+  const [selectedId, setSelectedId] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const {
+    params,
+    changePage
+  } = Object(_common_Filters_QueryContext__WEBPACK_IMPORTED_MODULE_17__["useQueryContext"])();
+  const adminListRentalsResponse = Object(ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_11__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4__["adminListRentals"], _objectSpread({}, params, {}, member && {
+    memberId: member.id
+  }), !isAdmin);
+  const listRentalsResposne = Object(ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_11__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4__["listRentals"], {}, isAdmin);
+  const {
+    isRequesting,
+    data: rentals = [],
+    response,
+    refresh,
+    error
+  } = isAdmin ? adminListRentalsResponse : listRentalsResposne;
+  const onRenew = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    refresh();
+  }, [refresh]);
+  const onEdit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    refresh();
+    setSelectedId(null);
+  }, [refresh, setSelectedId]);
+  const onDelete = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    refresh();
+    changePage(0);
+    setSelectedId(null);
+  }, [refresh, changePage, setSelectedId]);
+  const selectedRental = rentals.find(rental => rental.id === selectedId);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    container: true,
+    spacing: 24,
+    justify: "center"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    item: true,
+    md: member ? 12 : 10,
+    xs: 12
+  }, isAdmin && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_CreateRental__WEBPACK_IMPORTED_MODULE_12__["default"], {
+    onCreate: onRenew,
+    member: member
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_EditRental__WEBPACK_IMPORTED_MODULE_14__["default"], {
+    rental: selectedRental,
+    onUpdate: onEdit
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_RenewRental__WEBPACK_IMPORTED_MODULE_13__["default"], {
+    rental: selectedRental,
+    onRenew: onRenew
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_rentals_DeleteRentalModal__WEBPACK_IMPORTED_MODULE_10__["default"], {
+    rental: selectedRental,
+    onDelete: onDelete
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_table_StatefulTable__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    id: "rentals-table",
+    title: "Rentals",
+    loading: isRequesting,
+    data: Object.values(rentals),
+    error: error,
+    totalItems: Object(_utils_extractTotalItems__WEBPACK_IMPORTED_MODULE_15__["default"])(response),
+    selectedIds: selectedId,
+    setSelectedIds: setSelectedId,
+    columns: fields,
+    rowId: rowId,
+    renderSearch: true
+  })));
 };
 
+/* harmony default export */ __webpack_exports__["default"] = (RentalsList);
+
 /***/ }),
 
 /***/ "./src/ui/rentals/constants.ts":
 /*!*************************************!*\
   !*** ./src/ui/rentals/constants.ts ***!
   \*************************************/
-/*! exports provided: Action, rentalRenewalOptions, fields */
+/*! exports provided: fields */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Action", function() { return Action; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "rentalRenewalOptions", function() { return rentalRenewalOptions; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "fields", function() { return fields; });
 /* harmony import */ var ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ui/utils/timeToDate */ "./src/ui/utils/timeToDate.ts");
 
-let Action;
-
-(function (Action) {
-  Action["StartReadRequest"] = "RENTALS/START_READ_REQUEST";
-  Action["GetRentalsSuccess"] = "RENTALS/GET_RENTALS_SUCCESS";
-  Action["GetRentalsFailure"] = "RENTALS/GET_RENTALS_FAILURE";
-  Action["StartCreateRequest"] = "RENTALS/START_CREATE_REQUEST";
-  Action["CreateRentalSuccess"] = "RENTALS/CREATE_RENTAL_SUCCESS";
-  Action["CreateRentalFailure"] = "RENTALS/CREATE_RENTAL_FAILURE";
-  Action["StartUpdateRequest"] = "RENTAL/START_UPDATE_REQUEST";
-  Action["UpdateRentalSuccess"] = "RENTAL/UPDATE_RENTAL_SUCCESS";
-  Action["UpdateRentalFailure"] = "RENTAL/UPDATE_RENTAL_FAILURE";
-  Action["StartDeleteRequest"] = "RENTAL/START_DELETE_REQUEST";
-  Action["DeleteRentalSuccess"] = "RENTAL/DELETE_RENTAL_SUCCESS";
-  Action["DeleteRentalFailure"] = "RENTAL/DELETE_RENTAL_FAILURE";
-})(Action || (Action = {}));
-
-const rentalRenewalOptions = [{
-  label: "None",
-  value: undefined
-}, {
-  label: "1 month",
-  value: 1
-}, {
-  label: "3 months",
-  value: 3
-}, {
-  label: "6 months",
-  value: 6
-}, {
-  label: "12 months",
-  value: 12
-}];
 const formPrefix = "rental-form";
 const fields = rental => ({
   number: {
@@ -201807,142 +200632,6 @@ const reportRequirementFields = (requirement, index) => ({
 
 /***/ }),
 
-/***/ "./src/ui/settings/ManageRentalSubscriptions.tsx":
-/*!*******************************************************!*\
-  !*** ./src/ui/settings/ManageRentalSubscriptions.tsx ***!
-  \*******************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _material_ui_core_Card__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
-/* harmony import */ var _material_ui_core_Card__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
-/* harmony import */ var _material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
-/* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-/* harmony import */ var _hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
-/* harmony import */ var _common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
-/* harmony import */ var _common_ErrorMessage__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
-/* harmony import */ var _subscriptions_SubscriptionDetails__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../subscriptions/SubscriptionDetails */ "./src/ui/subscriptions/SubscriptionDetails.tsx");
-/* harmony import */ var _material_ui_core__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! @material-ui/core */ "./node_modules/@material-ui/core/index.es.js");
-
-
-
-
-
-
-
-
-
-
-
-
-const ManageRentalSubscriptions = () => {
-  const {
-    currentUser: {
-      id: memberId
-    }
-  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_5__["useAuthState"])();
-  const {
-    isRequesting: rentalsLoading,
-    data: rentals = [],
-    error: rentalsError
-  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_6__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_4__["listRentals"], {});
-  ;
-  const subscriptionRentals = rentals.filter(rental => !!rental.subscriptionId);
-  const fallbackUI = rentalsLoading && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_7__["default"], {
-    id: "manage-rental-subscription-loading",
-    contained: true
-  }) || rentalsError && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ErrorMessage__WEBPACK_IMPORTED_MODULE_8__["default"], {
-    error: rentalsError
-  });
-
-  if (!rentalsLoading && !rentalsError && !(subscriptionRentals.length && subscriptionRentals.some(r => !!r.subscriptionId))) {
-    return null;
-  }
-
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_1___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_2___default.a, null, fallbackUI || react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3___default.a, {
-    variant: "h4",
-    gutterBottom: true
-  }, "Rentals"), subscriptionRentals.map(rental => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core__WEBPACK_IMPORTED_MODULE_10__["Grid"], {
-    style: {
-      padding: "1em",
-      border: "1px solid black",
-      borderRadius: "3px"
-    }
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_subscriptions_SubscriptionDetails__WEBPACK_IMPORTED_MODULE_9__["default"], {
-    memberId: memberId,
-    key: rental.id,
-    rentalSubId: rental.subscriptionId
-  }))))));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (ManageRentalSubscriptions);
-
-/***/ }),
-
-/***/ "./src/ui/settings/ManageSubscriptions.tsx":
-/*!*************************************************!*\
-  !*** ./src/ui/settings/ManageSubscriptions.tsx ***!
-  \*************************************************/
-/*! exports provided: default */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-__webpack_require__.r(__webpack_exports__);
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
-/* harmony import */ var _material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
-/* harmony import */ var _material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
-/* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_4__);
-/* harmony import */ var _ManageRentalSubscriptions__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./ManageRentalSubscriptions */ "./src/ui/settings/ManageRentalSubscriptions.tsx");
-/* harmony import */ var _subscriptions_SubscriptionDetails__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../subscriptions/SubscriptionDetails */ "./src/ui/subscriptions/SubscriptionDetails.tsx");
-/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-
-
-
-
-
-
-
-
-
-const ManageSubscriptions = () => {
-  const {
-    currentUser: {
-      id: currentUserId
-    }
-  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_7__["useAuthState"])();
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
-    container: true,
-    spacing: 24
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
-    item: true,
-    xs: 12
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_4___default.a, {
-    variant: "h4",
-    gutterBottom: true
-  }, "Membership"), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_subscriptions_SubscriptionDetails__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    memberId: currentUserId
-  }))), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_ManageRentalSubscriptions__WEBPACK_IMPORTED_MODULE_5__["default"], null)));
-};
-
-/* harmony default export */ __webpack_exports__["default"] = (ManageSubscriptions);
-
-/***/ }),
-
 /***/ "./src/ui/settings/SettingsContainer.tsx":
 /*!***********************************************!*\
   !*** ./src/ui/settings/SettingsContainer.tsx ***!
@@ -201966,15 +200655,16 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _material_ui_core_ListItem__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_ListItem__WEBPACK_IMPORTED_MODULE_5__);
 /* harmony import */ var _material_ui_core_ListItemText__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core/ListItemText */ "./node_modules/@material-ui/core/ListItemText/index.js");
 /* harmony import */ var _material_ui_core_ListItemText__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_ListItemText__WEBPACK_IMPORTED_MODULE_6__);
-/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-/* harmony import */ var ui_member_UpdateMemberContainer__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/member/UpdateMemberContainer */ "./src/ui/member/UpdateMemberContainer.tsx");
-/* harmony import */ var ui_member_MemberForm__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/member/MemberForm */ "./src/ui/member/MemberForm.tsx");
-/* harmony import */ var ui_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/checkout/PaymentMethodsContainer */ "./src/ui/checkout/PaymentMethodsContainer.tsx");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_11___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_11__);
-/* harmony import */ var _hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
-/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-/* harmony import */ var _ManageSubscriptions__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ./ManageSubscriptions */ "./src/ui/settings/ManageSubscriptions.tsx");
+/* harmony import */ var ui_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/checkout/PaymentMethodsContainer */ "./src/ui/checkout/PaymentMethodsContainer.tsx");
+/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _subscriptions_SubscriptionDetails__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../subscriptions/SubscriptionDetails */ "./src/ui/subscriptions/SubscriptionDetails.tsx");
+/* harmony import */ var _subscriptions_ManageRentalSubscriptions__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../subscriptions/ManageRentalSubscriptions */ "./src/ui/subscriptions/ManageRentalSubscriptions.tsx");
+/* harmony import */ var ui_member_EditMember__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/member/EditMember */ "./src/ui/member/EditMember.tsx");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_13___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_13__);
+/* harmony import */ var ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ui/hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
+/* harmony import */ var ui_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ui/common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
 
 
 
@@ -201998,14 +200688,15 @@ const SettingsContainer = () => {
       id: currentUserId
     },
     permissions
-  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_13__["useAuthState"])();
-  const billingEnabled = !!permissions[app_constants__WEBPACK_IMPORTED_MODULE_7__["Whitelists"].billing];
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_9__["useAuthState"])();
+  const billingEnabled = !!permissions[app_constants__WEBPACK_IMPORTED_MODULE_8__["Whitelists"].billing];
   const [selectedIndex, setIndex] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](0);
   const {
     isRequesting: loadingMember,
-    error: memberError,
-    data: member
-  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_12__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_11__["getMember"], {
+    data: member = {
+      id: currentUserId
+    }
+  } = Object(ui_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_14__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_13__["getMember"], {
     id: currentUserId
   });
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
@@ -202044,36 +200735,27 @@ const SettingsContainer = () => {
     md: 8,
     sm: 7,
     xs: 12
-  }, selectedIndex == 0 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
     container: true,
     spacing: 16
   }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
     item: true,
     xs: 12
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_UpdateMemberContainer__WEBPACK_IMPORTED_MODULE_8__["default"], {
-    closeHandler: () => {},
-    operation: app_constants__WEBPACK_IMPORTED_MODULE_7__["CrudOperation"].Update,
-    isOpen: selectedIndex === 0,
-    member: member,
-    render: renderProps => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_MemberForm__WEBPACK_IMPORTED_MODULE_9__["default"], {
-      ref: renderProps.setRef,
-      member: member || {},
-      isAdmin: false,
-      isOpen: renderProps.isOpen,
-      isRequesting: loadingMember || renderProps.isRequesting,
-      error: memberError || renderProps.error,
-      onClose: renderProps.closeHandler,
-      onSubmit: renderProps.submit,
-      noDialog: true,
-      title: "Update Personal Information"
-    })
-  }))))), selectedIndex === 1 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_ManageSubscriptions__WEBPACK_IMPORTED_MODULE_14__["default"], null), selectedIndex === 2 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
+  }, selectedIndex === 0 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, loadingMember && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_15__["default"], null), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_member_EditMember__WEBPACK_IMPORTED_MODULE_12__["default"], {
+    formOnly: true,
+    member: member
+  })), selectedIndex === 1 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
     container: true,
     spacing: 16
   }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
     item: true,
     xs: 12
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_10__["default"], {
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_subscriptions_SubscriptionDetails__WEBPACK_IMPORTED_MODULE_10__["default"], {
+    memberId: currentUserId
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
+    item: true,
+    xs: 12
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_subscriptions_ManageRentalSubscriptions__WEBPACK_IMPORTED_MODULE_11__["default"], null))), selectedIndex === 2 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_7__["default"], {
     title: "Manage Payment Methods",
     managingMethods: true
   })))))));
@@ -202176,6 +200858,82 @@ const CancelSubscriptionModal = ({
 
 /***/ }),
 
+/***/ "./src/ui/subscriptions/ManageRentalSubscriptions.tsx":
+/*!************************************************************!*\
+  !*** ./src/ui/subscriptions/ManageRentalSubscriptions.tsx ***!
+  \************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
+/* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
+/* harmony import */ var _common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
+/* harmony import */ var _common_ErrorMessage__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
+/* harmony import */ var _SubscriptionDetails__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./SubscriptionDetails */ "./src/ui/subscriptions/SubscriptionDetails.tsx");
+
+
+
+
+
+
+
+
+
+
+const ManageRentalSubscriptions = () => {
+  const {
+    currentUser: {
+      id: memberId
+    }
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_4__["useAuthState"])();
+  const {
+    isRequesting: rentalsLoading,
+    data: rentals = [],
+    error: rentalsError
+  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_5__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__["listRentals"], {});
+  ;
+  const subscriptionRentals = rentals.filter(rental => !!rental.subscriptionId);
+  const fallbackUI = rentalsLoading && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    id: "manage-rental-subscription-loading",
+    contained: true
+  }) || rentalsError && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ErrorMessage__WEBPACK_IMPORTED_MODULE_7__["default"], {
+    error: rentalsError
+  });
+
+  if (!rentalsLoading && !rentalsError && !(subscriptionRentals.length && subscriptionRentals.some(r => !!r.subscriptionId))) {
+    return null;
+  }
+
+  return fallbackUI || react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_1___default.a, {
+    variant: "h4",
+    gutterBottom: true
+  }, "Rentals"), subscriptionRentals.map(rental => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    style: {
+      padding: "1em",
+      border: "1px solid black",
+      borderRadius: "3px"
+    }
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_SubscriptionDetails__WEBPACK_IMPORTED_MODULE_8__["default"], {
+    memberId: memberId,
+    key: rental.id,
+    rentalSubId: rental.subscriptionId
+  }))));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (ManageRentalSubscriptions);
+
+/***/ }),
+
 /***/ "./src/ui/subscriptions/NoSubscriptionDetails.tsx":
 /*!********************************************************!*\
   !*** ./src/ui/subscriptions/NoSubscriptionDetails.tsx ***!