makerspace-react-rails 0.5.1 → 0.6.0

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

@@ -102905,6 +102905,10 @@ function getRental(id) {
     return exports.makeRequest("GET", "/rentals/{id}".replace("{id}", id), undefined, "rental");
 }
 exports.getRental = getRental;
+function updateRental(id, updateRentalDetails) {
+    return exports.makeRequest("PUT", "/rentals/{id}".replace("{id}", id), { rental: updateRentalDetails }, "rental");
+}
+exports.updateRental = updateRental;
 //# sourceMappingURL=apiClient.js.map
 
 /***/ }),
@@ -187035,7 +187039,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var ui_settings_SettingsContainer__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ui/settings/SettingsContainer */ "./src/ui/settings/SettingsContainer.tsx");
 /* harmony import */ var ui_checkout_Receipt__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/checkout/Receipt */ "./src/ui/checkout/Receipt.tsx");
 /* harmony import */ var ui_auth_SendRegistrationComponent__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/auth/SendRegistrationComponent */ "./src/ui/auth/SendRegistrationComponent.tsx");
-/* harmony import */ var ui_documents_SignDocuments__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/documents/SignDocuments */ "./src/ui/documents/SignDocuments.tsx");
+/* harmony import */ var ui_documents_AgreementsContainer__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ui/documents/AgreementsContainer */ "./src/ui/documents/AgreementsContainer.tsx");
 
 
 
@@ -187064,8 +187068,8 @@ const PrivateRouting = ({
     component: ui_members_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,
-    component: ui_documents_SignDocuments__WEBPACK_IMPORTED_MODULE_13__["default"]
+    path: `${app_constants__WEBPACK_IMPORTED_MODULE_2__["Routing"].Documents}`,
+    component: ui_documents_AgreementsContainer__WEBPACK_IMPORTED_MODULE_13__["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"].Settings,
@@ -187181,6 +187185,7 @@ let Routing;
     PathPlaceholder["Optional"] = "?";
     PathPlaceholder["MemberId"] = ":memberId";
     PathPlaceholder["Resource"] = ":resource";
+    PathPlaceholder["ResourceId"] = ":resourceId";
     PathPlaceholder["InvoiceId"] = ":invoiceId";
     PathPlaceholder["Email"] = ":email";
   })(PathPlaceholder || (PathPlaceholder = {}));
@@ -187190,7 +187195,7 @@ let Routing;
   const Login = _Routing.Login = "/login";
   const SignUp = _Routing.SignUp = "/signup";
   const Members = _Routing.Members = "/members";
-  const Documents = _Routing.Documents = "/agreements";
+  const Documents = _Routing.Documents = `/agreements/${Routing.PathPlaceholder.Resource}/${Routing.PathPlaceholder.ResourceId}${Routing.PathPlaceholder.Optional}`;
   const Profile = _Routing.Profile = `${Members}/${PathPlaceholder.MemberId}`;
   const Billing = _Routing.Billing = "/billing";
   const Subscriptions = _Routing.Subscriptions = "/subscriptions";
@@ -193978,10 +193983,10 @@ const mongoIdRegex = /^[a-f\d]{24}$/i;
 
 /***/ }),
 
-/***/ "./src/ui/documents/CodeOfConduct.tsx":
-/*!********************************************!*\
-  !*** ./src/ui/documents/CodeOfConduct.tsx ***!
-  \********************************************/
+/***/ "./src/ui/documents/AgreementsContainer.tsx":
+/*!**************************************************!*\
+  !*** ./src/ui/documents/AgreementsContainer.tsx ***!
+  \**************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -193989,64 +193994,46 @@ const mongoIdRegex = /^[a-f\d]{24}$/i;
 __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_Checkbox__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material-ui/core/Checkbox */ "./node_modules/@material-ui/core/Checkbox/index.js");
-/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/FormControlLabel */ "./node_modules/@material-ui/core/FormControlLabel/index.js");
-/* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var ui_common_Form__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ui/common/Form */ "./src/ui/common/Form.tsx");
-/* harmony import */ var _common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
-/* harmony import */ var _Document__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Document */ "./src/ui/documents/Document.tsx");
+/* 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 _reducer_hooks__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _member_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
+/* harmony import */ var _MembershipAgreement__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./MembershipAgreement */ "./src/ui/documents/MembershipAgreement.tsx");
+/* harmony import */ var _RentalAgreement__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./RentalAgreement */ "./src/ui/documents/RentalAgreement.tsx");
 
 
 
 
 
 
-const id = "code-of-conduct";
-const document = {
-  displayName: "Code of Conduct",
-  name: `${id}-checkbox`,
-  transform: val => !!val,
-  validate: val => val,
-  error: "You must accept to continue",
-  label: "I have read and agree to the Manchester Makerspace Code of Conduct"
-};
+const resources = ["membership", "rental"];
 
-const CodeOfConduct = ({
-  onAccept
-}) => {
-  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
-    await form.simpleValidate({
-      [id]: document
-    });
-
-    if (!form.isValid()) {
-      return;
+const AgreementContainer = () => {
+  const {
+    history,
+    match: {
+      params: {
+        resource,
+        resourceId
+      }
     }
-
-    onAccept();
-  }, [onAccept]);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_Form__WEBPACK_IMPORTED_MODULE_3__["default"], {
-    key: id,
-    id: `${id}-form`,
-    submitText: "Proceed",
-    onSubmit: onSubmit
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_Document__WEBPACK_IMPORTED_MODULE_5__["default"], {
-    id: id,
-    src: _Document__WEBPACK_IMPORTED_MODULE_5__["documents"].codeOfConduct
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    key: document.name
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_2___default.a, {
-    control: react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_1___default.a, {
-      id: document.name,
-      name: document.name,
-      color: "primary"
-    }),
-    label: document.label
-  })));
+  } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
+  const {
+    currentUser: {
+      id
+    }
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_2__["useAuthState"])();
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
+    if (!resources.includes(resource)) {
+      history.push(Object(_member_utils__WEBPACK_IMPORTED_MODULE_3__["buildProfileRouting"])(id));
+    }
+  }, []);
+  return resource === "membership" ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_MembershipAgreement__WEBPACK_IMPORTED_MODULE_4__["default"], null) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_RentalAgreement__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    rentalId: resourceId
+  });
 };
 
-/* harmony default export */ __webpack_exports__["default"] = (Object(_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_4__["withLoading"])(CodeOfConduct));
+/* harmony default export */ __webpack_exports__["default"] = (AgreementContainer);
 
 /***/ }),
 
@@ -194054,11 +194041,12 @@ const CodeOfConduct = ({
 /*!***************************************!*\
   !*** ./src/ui/documents/Document.tsx ***!
   \***************************************/
-/*! exports provided: documents, default */
+/*! exports provided: Documents, documents, default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "Documents", function() { return Documents; });
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "documents", function() { return documents; });
 /* 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__);
@@ -194074,13 +194062,47 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+let Documents;
+
+(function (Documents) {
+  Documents["CodeOfConduct"] = "code-of-conduct";
+  Documents["MemberContract"] = "member-contract";
+  Documents["RentalAgreement"] = "rental-agreement";
+})(Documents || (Documents = {}));
 
-const buildDocumentUrl = document => `${ false || ""}/api/documents/${document}`;
+const buildDocumentUrl = documentName => `${ false || ""}/api/documents/${documentName}`;
 
 const documents = {
-  memberContract: buildDocumentUrl("member_contract"),
-  codeOfConduct: buildDocumentUrl("code_of_conduct"),
-  rentalAgreement: buildDocumentUrl("rental_agreement")
+  [Documents.MemberContract]: {
+    id: Documents.MemberContract,
+    src: buildDocumentUrl("member_contract"),
+    displayName: "Member Contract",
+    name: `${Documents.MemberContract}-checkbox`,
+    transform: val => !!val,
+    validate: val => val,
+    error: "You must accept to continue",
+    label: "I have read and agree to the Manchester Makerspace Member Contract"
+  },
+  [Documents.CodeOfConduct]: {
+    id: Documents.CodeOfConduct,
+    src: buildDocumentUrl("code_of_conduct"),
+    displayName: "Code of Conduct",
+    name: `${Documents.CodeOfConduct}-checkbox`,
+    transform: val => !!val,
+    validate: val => val,
+    error: "You must accept to continue",
+    label: "I have read and agree to the Manchester Makerspace Code of Conduct"
+  },
+  [Documents.RentalAgreement]: {
+    id: Documents.RentalAgreement,
+    src: rentalId => buildDocumentUrl(`rental_agreement?resourceId=${rentalId}`),
+    displayName: "Rental Agreement",
+    name: `${Documents.RentalAgreement}-checkbox`,
+    transform: val => !!val,
+    validate: val => val,
+    error: "You must accept to continue",
+    label: "I have read and agree to the Manchester Makerspace Rental Agreement"
+  }
 };
 
 const DocumentFrame = ({
@@ -194127,10 +194149,10 @@ const DocumentFrame = ({
 
 /***/ }),
 
-/***/ "./src/ui/documents/MemberContract.tsx":
-/*!*********************************************!*\
-  !*** ./src/ui/documents/MemberContract.tsx ***!
-  \*********************************************/
+/***/ "./src/ui/documents/DocumentForm.tsx":
+/*!*******************************************!*\
+  !*** ./src/ui/documents/DocumentForm.tsx ***!
+  \*******************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -194151,9 +194173,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core/FormControlLabel */ "./node_modules/@material-ui/core/FormControlLabel/index.js");
 /* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_6__);
 /* harmony import */ var ui_common_Form__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/common/Form */ "./src/ui/common/Form.tsx");
-/* harmony import */ var _common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
-/* harmony import */ var _Document__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./Document */ "./src/ui/documents/Document.tsx");
-
+/* harmony import */ var _Document__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./Document */ "./src/ui/documents/Document.tsx");
 
 
 
@@ -194163,39 +194183,46 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-const id = "member-contract";
-const document = {
-  displayName: "Member Contract",
-  name: `${id}-checkbox`,
-  transform: val => !!val,
-  validate: val => val,
-  error: "You must accept to continue",
-  label: "I have read and agree to the Manchester Makerspace Member Contract"
-};
 
-const MemberContract = ({
-  onAccept
+const DocumentForm = ({
+  error,
+  loading,
+  onAccept,
+  doc,
+  requestSignature
 }) => {
-  const [error, setError] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const {
+    id,
+    name,
+    src,
+    label
+  } = doc;
+  const [signatureError, setError] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
   const signatureRef = react__WEBPACK_IMPORTED_MODULE_0__["useRef"]();
   const clearSignature = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
     signatureRef.current && signatureRef.current.clear();
   }, [signatureRef]);
   const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
     await form.simpleValidate({
-      [id]: document
+      [id]: doc
     });
 
     if (!form.isValid()) {
       return;
     }
 
-    if (!signatureRef.current || signatureRef.current.isEmpty()) {
-      setError("Signature required to proceed");
-      return;
+    let signature;
+
+    if (requestSignature) {
+      if (!signatureRef.current || signatureRef.current.isEmpty()) {
+        setError("Signature required to proceed");
+        return;
+      } else {
+        setError("");
+        signature = signatureRef.current.toDataURL();
+      }
     }
 
-    const signature = signatureRef.current.toDataURL();
     onAccept(signature);
   }, [onAccept, signatureRef, setError]);
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_Form__WEBPACK_IMPORTED_MODULE_7__["default"], {
@@ -194203,20 +194230,21 @@ const MemberContract = ({
     id: `${id}-form`,
     submitText: "Proceed",
     onSubmit: onSubmit,
-    error: error
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_Document__WEBPACK_IMPORTED_MODULE_9__["default"], {
+    error: signatureError || error,
+    loading: loading
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_Document__WEBPACK_IMPORTED_MODULE_8__["default"], {
     id: id,
-    src: _Document__WEBPACK_IMPORTED_MODULE_9__["documents"].memberContract
+    src: src
   }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", {
-    key: document.name
+    key: name
   }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_6___default.a, {
     control: react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_3___default.a, {
-      id: document.name,
-      name: document.name,
+      id: name,
+      name: name,
       color: "primary"
     }),
-    label: document.label
-  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    label: label
+  })), requestSignature && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
     container: true
   }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
     item: true,
@@ -194250,14 +194278,14 @@ const MemberContract = ({
   }, "Reset Signature"))))));
 };
 
-/* harmony default export */ __webpack_exports__["default"] = (Object(_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_8__["withLoading"])(MemberContract));
+/* harmony default export */ __webpack_exports__["default"] = (DocumentForm);
 
 /***/ }),
 
-/***/ "./src/ui/documents/SignDocuments.tsx":
-/*!********************************************!*\
-  !*** ./src/ui/documents/SignDocuments.tsx ***!
-  \********************************************/
+/***/ "./src/ui/documents/MembershipAgreement.tsx":
+/*!**************************************************!*\
+  !*** ./src/ui/documents/MembershipAgreement.tsx ***!
+  \**************************************************/
 /*! exports provided: default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
@@ -194267,18 +194295,18 @@ __webpack_require__.r(__webpack_exports__);
 /* 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 _member_utils__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
-/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
-/* harmony import */ var _CodeOfConduct__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./CodeOfConduct */ "./src/ui/documents/CodeOfConduct.tsx");
-/* harmony import */ var _MemberContract__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./MemberContract */ "./src/ui/documents/MemberContract.tsx");
-/* harmony import */ var _hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_9__ = __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 _member_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _DocumentForm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./DocumentForm */ "./src/ui/documents/DocumentForm.tsx");
+/* harmony import */ var _Document__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Document */ "./src/ui/documents/Document.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; }
 
 
 
@@ -194287,15 +194315,10 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
-var Documents;
 
-(function (Documents) {
-  Documents["codeOfConduct"] = "code-of-conduct";
-  Documents["memberContract"] = "member-contract";
-})(Documents || (Documents = {}));
 
-const SignDocuments = () => {
-  const [display, setDisplay] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](Documents.codeOfConduct);
+const MembershipAgreement = () => {
+  const [display, setDisplay] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](_Document__WEBPACK_IMPORTED_MODULE_7__["Documents"].CodeOfConduct);
   const {
     history
   } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
@@ -194303,58 +194326,111 @@ const SignDocuments = () => {
     currentUser: {
       id: currentUserId
     }
-  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_5__["useAuthState"])();
-  const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](({
-    reset
-  }) => {
-    history.push(Object(_member_utils__WEBPACK_IMPORTED_MODULE_4__["buildProfileRouting"])(currentUserId));
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_4__["useAuthState"])();
+  const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    history.push(Object(_member_utils__WEBPACK_IMPORTED_MODULE_3__["buildProfileRouting"])(currentUserId));
   }, [history]);
   const {
+    error,
     isRequesting: updating,
     call: update
-  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_6__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__["updateMember"], onSuccess);
-  const {
-    refresh: refreshMember
-  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_9__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__["getMember"], currentUserId);
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_5__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["updateMember"], onSuccess);
   const onContractAccept = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async signature => {
     await update(currentUserId, {
       signature
     });
-    refreshMember();
   }, [update]);
   const onConductAccept = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
-    setDisplay(Documents.memberContract);
+    setDisplay(_Document__WEBPACK_IMPORTED_MODULE_7__["Documents"].MemberContract);
   }, [setDisplay]);
-  let renderDoc;
+  const onAccept = display === _Document__WEBPACK_IMPORTED_MODULE_7__["Documents"].MemberContract ? onContractAccept : onConductAccept;
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_DocumentForm__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    error: error,
+    loading: updating,
+    doc: _objectSpread({}, _Document__WEBPACK_IMPORTED_MODULE_7__["documents"][display], {
+      src: String(_Document__WEBPACK_IMPORTED_MODULE_7__["documents"][display].src)
+    }),
+    onAccept: onAccept,
+    requestSignature: display === _Document__WEBPACK_IMPORTED_MODULE_7__["Documents"].MemberContract
+  });
+};
 
-  switch (display) {
-    case Documents.codeOfConduct:
-      renderDoc = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_CodeOfConduct__WEBPACK_IMPORTED_MODULE_7__["default"], {
-        onAccept: onConductAccept,
-        loading: updating
-      });
-      break;
+/* harmony default export */ __webpack_exports__["default"] = (MembershipAgreement);
 
-    case Documents.memberContract:
-      renderDoc = react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_MemberContract__WEBPACK_IMPORTED_MODULE_8__["default"], {
-        onAccept: onContractAccept,
-        loading: updating
-      });
-      break;
-  }
+/***/ }),
 
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
-    container: true,
-    spacing: 16,
-    justify: "center"
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
-    item: true,
-    md: 10,
-    sm: 12
-  }, renderDoc));
+/***/ "./src/ui/documents/RentalAgreement.tsx":
+/*!**********************************************!*\
+  !*** ./src/ui/documents/RentalAgreement.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 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 _member_utils__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _DocumentForm__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./DocumentForm */ "./src/ui/documents/DocumentForm.tsx");
+/* harmony import */ var _Document__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ./Document */ "./src/ui/documents/Document.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; }
+
+
+
+
+
+
+
+
+
+const rentalAgreement = _Document__WEBPACK_IMPORTED_MODULE_7__["documents"][_Document__WEBPACK_IMPORTED_MODULE_7__["Documents"].RentalAgreement];
+
+const RentalAgreement = ({
+  rentalId
+}) => {
+  const {
+    history
+  } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
+  const {
+    currentUser: {
+      id: currentUserId
+    }
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_4__["useAuthState"])();
+  const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    history.push(Object(_member_utils__WEBPACK_IMPORTED_MODULE_3__["buildProfileRouting"])(currentUserId));
+  }, [history]);
+  const {
+    error,
+    isRequesting: updating,
+    call: update
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_5__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["updateRental"], onSuccess);
+  const onContractAccept = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async signature => {
+    await update(rentalId, {
+      signature
+    });
+  }, [update]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_DocumentForm__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    error: error,
+    loading: updating,
+    doc: _objectSpread({}, rentalAgreement, {
+      src: typeof rentalAgreement.src === "function" && rentalAgreement.src(rentalId)
+    }),
+    onAccept: onContractAccept,
+    requestSignature: true
+  });
 };
 
-/* harmony default export */ __webpack_exports__["default"] = (SignDocuments);
+/* harmony default export */ __webpack_exports__["default"] = (RentalAgreement);
 
 /***/ }),
 
@@ -195696,6 +195772,7 @@ const useReadTransaction = (transaction, ...args) => {
     const key = Object(_reducer_functions__WEBPACK_IMPORTED_MODULE_4__["buildQueryString"])(transaction, ...args);
     return Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_3__["getApiState"])(key, Object(app_main__WEBPACK_IMPORTED_MODULE_6__["getStore"])().getState());
   }, [transaction, Object(ui_utils_stringifyArgs__WEBPACK_IMPORTED_MODULE_1__["default"])(args)]);
+  console.warn("args", Object(ui_utils_stringifyArgs__WEBPACK_IMPORTED_MODULE_1__["default"])(args));
   react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
     const callTransaction = async () => {
       const currentState = getCurrentState();
@@ -196416,7 +196493,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
-const getFields = memberId => [...(memberId ? [] : [{
+const getFields = (memberId, onUpdate) => [...(memberId ? [] : [{
   id: "member",
   label: "Member",
   cell: row => row.memberName,
@@ -196459,7 +196536,8 @@ const getFields = memberId => [...(memberId ? [] : [{
     }
 
     return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_ViewInvoiceModal__WEBPACK_IMPORTED_MODULE_18__["default"], {
-      invoice: row
+      invoice: row,
+      onUpdate: onUpdate
     });
   }
 }];
@@ -196515,7 +196593,7 @@ const InvoicesTable = ({
     refresh();
   }, [refresh, refreshMember]);
   const rowId = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](invoice => invoice.id, []);
-  const fields = getFields(memberId);
+  const fields = getFields(memberId, onSuccess);
   const payNow = viewingOwnInvoices && Object(_utils__WEBPACK_IMPORTED_MODULE_17__["isInvoicePayable"])(selectedInvoice);
   const goToCheckout = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => stageInvoice(selectedInvoice), [selectedInvoice, stageInvoice]);
   return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, isAdmin && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_invoice_CreateInvoiceModal__WEBPACK_IMPORTED_MODULE_14__["default"], {
@@ -196564,6 +196642,113 @@ const InvoicesTable = ({
 
 /***/ }),
 
+/***/ "./src/ui/invoice/SettleInvoiceModal.tsx":
+/*!***********************************************!*\
+  !*** ./src/ui/invoice/SettleInvoiceModal.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_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/Button */ "./node_modules/@material-ui/core/Button/index.js");
+/* harmony import */ var _material_ui_core_Button__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Button__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 app_entities_invoice__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! app/entities/invoice */ "./src/app/entities/invoice.ts");
+/* harmony import */ var ui_common_FormModal__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
+/* harmony import */ var ui_common_KeyValueItem__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/common/KeyValueItem */ "./src/ui/common/KeyValueItem.tsx");
+/* harmony import */ var ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/utils/timeToDate */ "./src/ui/utils/timeToDate.ts");
+/* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var _invoice_utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ../invoice/utils */ "./src/ui/invoice/utils.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 SettleInvoiceModal = ({
+  invoice,
+  onSuccess
+}) => {
+  const {
+    isOpen,
+    openModal,
+    closeModal
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_8__["default"])();
+  const onUpdate = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](({
+    reset
+  }) => {
+    closeModal();
+    onSuccess();
+    reset();
+  }, [closeModal, onSuccess]);
+  const {
+    call,
+    isRequesting,
+    error
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_9__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_3__["adminUpdateInvoice"], onUpdate);
+  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    call(invoice.id, _objectSpread({}, invoice, {
+      settled: true
+    }));
+  }, [invoice, call]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, Object(_invoice_utils__WEBPACK_IMPORTED_MODULE_10__["isInvoiceSettled"])(invoice) ? "Settled" : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    variant: "outlined",
+    color: "primary",
+    disabled: isRequesting,
+    onClick: openModal
+  }, "Mark as Paid"), isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_FormModal__WEBPACK_IMPORTED_MODULE_5__["default"], {
+    id: "settle-invoice",
+    loading: isRequesting,
+    isOpen: true,
+    closeHandler: closeModal,
+    title: "Confirm Settlement",
+    onSubmit: onSubmit,
+    submitText: "Confirm",
+    error: error
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_1___default.a, {
+    gutterBottom: true
+  }, "Are you sure you want to manually mark this invoice as paid? This may trigger automatic renewals based on the invoice. This action cannot be reversed."), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_KeyValueItem__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    label: "Responsible Party"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+    id: "settle-invoice-member"
+  }, invoice.memberName)), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_KeyValueItem__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    label: "Type"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+    id: "settle-invoice-amount"
+  }, app_entities_invoice__WEBPACK_IMPORTED_MODULE_4__["InvoiceableResourceDisplay"][invoice.resourceClass])), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_KeyValueItem__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    label: "Amount"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+    id: "settle-invoice-amount"
+  }, `$${invoice.amount}`)), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_KeyValueItem__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    label: "Due Date"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
+    id: "settle-invoice-due-date"
+  }, Object(ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_7__["timeToDate"])(invoice.dueDate)))));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (SettleInvoiceModal);
+
+/***/ }),
+
 /***/ "./src/ui/invoice/ViewInvoiceModal.tsx":
 /*!*********************************************!*\
   !*** ./src/ui/invoice/ViewInvoiceModal.tsx ***!
@@ -196581,6 +196766,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _common_ButtonRow__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
 /* harmony import */ var ui_common_FormModal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
 /* harmony import */ var _InvoiceDetails__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./InvoiceDetails */ "./src/ui/invoice/InvoiceDetails.tsx");
+/* harmony import */ var _SettleInvoiceModal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./SettleInvoiceModal */ "./src/ui/invoice/SettleInvoiceModal.tsx");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+
+
 
 
 
@@ -196589,8 +196778,14 @@ __webpack_require__.r(__webpack_exports__);
 
 
 const ViewInvoiceModal = ({
-  invoice
+  invoice,
+  onUpdate
 }) => {
+  const {
+    currentUser: {
+      isAdmin
+    }
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_7__["useAuthState"])();
   const {
     isOpen,
     openModal,
@@ -196612,6 +196807,9 @@ const ViewInvoiceModal = ({
     gutterBottom: true
   }, "Details"), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_InvoiceDetails__WEBPACK_IMPORTED_MODULE_5__["default"], {
     invoice: invoice
+  }), isAdmin && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_SettleInvoiceModal__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    invoice: invoice,
+    onSuccess: onUpdate
   })));
 };
 
@@ -196904,14 +197102,20 @@ const MemberProfile = () => {
   } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_16__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["getMember"], memberId);
   const [notification, setNotification] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
   react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"](() => {
-    if (isOwnProfile && !memberLoading && member.hasOwnProperty("memberContractOnFile")) {
-      if (member.memberContractOnFile) {
-        setNotification(undefined);
-      } else {
-        setNotification(_NotificationModal__WEBPACK_IMPORTED_MODULE_20__["Notification"].Welcome);
-      }
+    if (isOwnProfile && !memberLoading && member.id && !member.memberContractOnFile) {
+      setNotification(_NotificationModal__WEBPACK_IMPORTED_MODULE_20__["Notification"].Welcome);
     }
-  }, [isOwnProfile, memberLoading, setNotification, member.memberContractOnFile]); // Don't render the notification box on the first paint
+  }, [isOwnProfile, memberLoading, member.memberContractOnFile]);
+  const {
+    data: rentals = []
+  } = Object(_hooks_useReadTransaction__WEBPACK_IMPORTED_MODULE_16__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_2__["listRentals"], memberId);
+  react__WEBPACK_IMPORTED_MODULE_0__["useLayoutEffect"](() => {
+    const missingAgreement = rentals.find(rental => !rental.contractOnFile);
+
+    if (isOwnProfile && missingAgreement && !notification) {
+      setNotification(_NotificationModal__WEBPACK_IMPORTED_MODULE_20__["Notification"].SignRental);
+    }
+  }, [isOwnProfile, rentals]); // Don't render the notification box on the first paint
   // Helps prevent flickering issue
 
   const [renderNotification, setRenderNotification] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](false);
@@ -196926,8 +197130,17 @@ const MemberProfile = () => {
     setNotification(undefined);
   }, [refreshMember, setNotification]);
   const goToAgreements = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
-    history.push(app_constants__WEBPACK_IMPORTED_MODULE_11__["Routing"].Documents);
-  }, [history]);
+    switch (notification) {
+      case _NotificationModal__WEBPACK_IMPORTED_MODULE_20__["Notification"].SignRental:
+        const missingAgreement = rentals.find(rental => !rental.contractOnFile);
+        history.push(app_constants__WEBPACK_IMPORTED_MODULE_11__["Routing"].Documents.replace(app_constants__WEBPACK_IMPORTED_MODULE_11__["Routing"].PathPlaceholder.Resource, "rental").replace(app_constants__WEBPACK_IMPORTED_MODULE_11__["Routing"].PathPlaceholder.ResourceId, missingAgreement.id));
+        break;
+
+      case _NotificationModal__WEBPACK_IMPORTED_MODULE_20__["Notification"].Welcome:
+        history.push(app_constants__WEBPACK_IMPORTED_MODULE_11__["Routing"].Documents.replace(app_constants__WEBPACK_IMPORTED_MODULE_11__["Routing"].PathPlaceholder.Resource, "membership").replace(app_constants__WEBPACK_IMPORTED_MODULE_11__["Routing"].PathPlaceholder.ResourceId, ""));
+        break;
+    }
+  }, [history, rentals, notification]);
   react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
     if (memberError && !member.id) {
       history.push(app_constants__WEBPACK_IMPORTED_MODULE_11__["Routing"].Members);
@@ -197349,6 +197562,7 @@ let Notification;
   Notification["WelcomeNeedPayment"] = "welcomeNeedPayment";
   Notification["MembershipExpired"] = "membershipExpired";
   Notification["PaymentRequired"] = "paymentRequired";
+  Notification["SignRental"] = "SignRental";
 })(Notification || (Notification = {}));
 
 const Notifications = {
@@ -197363,6 +197577,12 @@ const Notifications = {
 
     Before proceeding, please take a moment to review and sign the Manchester Makerspace Code of Conduct and Member Contract.`,
     required: true
+  },
+  [Notification.SignRental]: {
+    title: "Please complete your Rental Agreement",
+    submit: "Review Documents",
+    body: `We are missing a signed rental agreement for one of your plot, shelf or locker rentals.  Please take a moment to review these documents before continuing`,
+    required: true
   }
 };
 
@@ -197879,12 +198099,12 @@ const membershipDetails = {
     allowMod: true
   },
   paypal: {
-    description: "Membership handled by PayPal. Contact an administrator for details.",
+    description: "Membership handled by PayPal. If you wish to change your membership, you must first cancel your PayPal subscription.",
     type: "Managed by PayPal",
     allowMod: false
   },
   notFound: {
-    description: "Membership subscription cannot be found. Contact an administrator for assistance.",
+    description: "Membership subscription exists but cannot be found. Contact an administrator for assistance.",
     type: "Unknown",
     allowMod: false
   },
@@ -199181,10 +199401,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_2__);
 /* harmony import */ var _material_ui_core_FormLabel__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core/FormLabel */ "./node_modules/@material-ui/core/FormLabel/index.js");
 /* harmony import */ var _material_ui_core_FormLabel__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_FormLabel__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var ui_common_FormModal__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
-/* harmony import */ var ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ui/rentals/constants */ "./src/ui/rentals/constants.ts");
-/* harmony import */ var ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/utils/timeToDate */ "./src/ui/utils/timeToDate.ts");
-/* harmony import */ var _common_MemberSearchInput__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../common/MemberSearchInput */ "./src/ui/common/MemberSearchInput.tsx");
+/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/Checkbox */ "./node_modules/@material-ui/core/Checkbox/index.js");
+/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Checkbox__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 ui_common_FormModal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
+/* harmony import */ var ui_rentals_constants__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/rentals/constants */ "./src/ui/rentals/constants.ts");
+/* harmony import */ var ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/utils/timeToDate */ "./src/ui/utils/timeToDate.ts");
+/* harmony import */ var _common_MemberSearchInput__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../common/MemberSearchInput */ "./src/ui/common/MemberSearchInput.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; }
 
 
@@ -199196,19 +199420,36 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 
 
+
+
 class RentalForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
-  constructor(...args) {
-    super(...args);
+  constructor(props) {
+    super(props);
 
     _defineProperty(this, "formRef", void 0);
 
     _defineProperty(this, "setFormRef", ref => this.formRef = ref);
 
-    _defineProperty(this, "validate", form => form.simpleValidate(ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"]));
+    _defineProperty(this, "toggleContract", () => this.setState(state => ({
+      contractOnFile: !state.contractOnFile
+    })));
+
+    _defineProperty(this, "validate", form => form.simpleValidate(Object(ui_rentals_constants__WEBPACK_IMPORTED_MODULE_7__["fields"])(this.props.rental)));
+
+    this.state = {
+      contractOnFile: props.rental && props.rental.contractOnFile || false
+    };
+  }
+
+  componentDidMount() {
+    this.setState({
+      contractOnFile: this.props.rental && this.props.rental.contractOnFile || false
+    });
   }
 
   render() {
     const {
+      title,
       isOpen,
       onClose,
       isRequesting,
@@ -199216,13 +199457,14 @@ class RentalForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       onSubmit,
       rental
     } = this.props;
-    return isOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_FormModal__WEBPACK_IMPORTED_MODULE_4__["default"], {
+    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"], {
       formRef: this.setFormRef,
       id: "rental-form",
       loading: isRequesting,
       isOpen: isOpen,
       closeHandler: onClose,
-      title: this.props.title || "Update Rental",
+      title: title || "Update Rental",
       onSubmit: onSubmit,
       submitText: "Submit",
       error: error
@@ -199236,29 +199478,29 @@ class RentalForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       fullWidth: true,
       required: true,
       value: rental.number,
-      label: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].number.label,
-      name: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].number.name,
-      id: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].number.name,
-      placeholder: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].number.placeholder
+      label: rentalFields.number.label,
+      name: rentalFields.number.name,
+      id: rentalFields.number.name,
+      placeholder: rentalFields.number.placeholder
     })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
       item: true,
       xs: 6
     }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_TextField__WEBPACK_IMPORTED_MODULE_2___default.a, {
       fullWidth: true,
       value: rental.description,
-      label: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].description.label,
-      name: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].description.name,
-      id: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].description.name,
-      placeholder: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].description.placeholder
+      label: rentalFields.description.label,
+      name: rentalFields.description.name,
+      id: rentalFields.description.name,
+      placeholder: rentalFields.description.placeholder
     })), rental && rental.id && 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_TextField__WEBPACK_IMPORTED_MODULE_2___default.a, {
       fullWidth: true,
-      value: Object(ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_6__["toDatePicker"])(rental.expiration),
-      label: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].expiration.label,
-      name: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].expiration.name,
-      placeholder: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].expiration.placeholder,
+      value: Object(ui_utils_timeToDate__WEBPACK_IMPORTED_MODULE_8__["toDatePicker"])(rental.expiration),
+      label: rentalFields.expiration.label,
+      name: rentalFields.expiration.name,
+      placeholder: rentalFields.expiration.placeholder,
       type: "date",
       InputLabelProps: {
         shrink: true
@@ -199268,15 +199510,29 @@ class RentalForm extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
       xs: 12
     }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_FormLabel__WEBPACK_IMPORTED_MODULE_3___default.a, {
       component: "legend"
-    }, ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].memberId.label), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_MemberSearchInput__WEBPACK_IMPORTED_MODULE_7__["default"], {
-      name: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].memberId.name,
-      placeholder: ui_rentals_constants__WEBPACK_IMPORTED_MODULE_5__["fields"].memberId.placeholder,
+    }, rentalFields.memberId.label), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_MemberSearchInput__WEBPACK_IMPORTED_MODULE_9__["default"], {
+      name: rentalFields.memberId.name,
+      placeholder: rentalFields.memberId.placeholder,
       getFormRef: () => this.formRef,
       initialSelection: rental && {
         value: rental.memberId,
         label: rental.memberName,
         id: rental.memberId
       }
+    })), 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_FormControlLabel__WEBPACK_IMPORTED_MODULE_5___default.a, {
+      control: react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_4___default.a, {
+        required: !(rental && rental.id),
+        name: rentalFields.contractOnFile.name,
+        id: rentalFields.contractOnFile.name,
+        value: rentalFields.contractOnFile.name,
+        checked: this.state.contractOnFile,
+        onChange: this.toggleContract,
+        color: "default"
+      }),
+      label: rentalFields.contractOnFile.label
     }))));
   }
 
@@ -200164,7 +200420,7 @@ const rentalRenewalOptions = [{
   value: 12
 }];
 const formPrefix = "rental-form";
-const fields = {
+const fields = rental => ({
   number: {
     label: "Number",
     name: `${formPrefix}-number`,
@@ -200190,9 +200446,18 @@ const fields = {
     label: "Select a member",
     name: `${formPrefix}-member`,
     placeholder: `Search by name or email`,
+    validate: val => !!val,
     transform: val => val && val.value
+  },
+  contractOnFile: {
+    label: "Rental Agreement Signed?",
+    name: `${formPrefix}-contract`,
+    validate: val => rental && rental.id ? true : !!val,
+    // Validate contract only on create.
+    transform: val => !!val,
+    error: "Member must sign contract"
   }
-};
+});
 
 /***/ }),
 
@@ -201011,6 +201276,8 @@ __webpack_require__.r(__webpack_exports__);
 /* 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");
+
 
 
 
@@ -201042,59 +201309,27 @@ const ManageRentalSubscriptions = () => {
     error: rentalsError
   });
 
-  if (!rentalsLoading && !rentalsError && !subscriptionRentals.length) {
+  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"](_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/ManageSubscription.tsx":
-/*!************************************************!*\
-  !*** ./src/ui/settings/ManageSubscription.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 _membership_ChangePaymentMethodModal__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../membership/ChangePaymentMethodModal */ "./src/ui/membership/ChangePaymentMethodModal.tsx");
-/* harmony import */ var _subscriptions_CancelSubscriptionModal__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../subscriptions/CancelSubscriptionModal */ "./src/ui/subscriptions/CancelSubscriptionModal.tsx");
-
-
-
-
-const ManageSubscription = ({
-  subscription,
-  onChange,
-  memberId
-}) => {
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_membership_ChangePaymentMethodModal__WEBPACK_IMPORTED_MODULE_1__["default"], {
-    subscription: subscription,
-    onSuccess: onChange
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_subscriptions_CancelSubscriptionModal__WEBPACK_IMPORTED_MODULE_2__["default"], {
-    subscription: subscription,
+  }, "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,
-    onSuccess: onChange
-  }));
+    key: rental.id,
+    rentalSubId: rental.subscriptionId
+  }))))));
 };
 
-/* harmony default export */ __webpack_exports__["default"] = (ManageSubscription);
+/* harmony default export */ __webpack_exports__["default"] = (ManageRentalSubscriptions);
 
 /***/ }),
 
@@ -201516,13 +201751,12 @@ const NoSubscriptionDetails = ({
 /*!******************************************************!*\
   !*** ./src/ui/subscriptions/SubscriptionDetails.tsx ***!
   \******************************************************/
-/*! exports provided: SubscriptionDetailsInner, SubscriptionDetailsWithManagement, default */
+/*! exports provided: SubscriptionDetailsInner, default */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SubscriptionDetailsInner", function() { return SubscriptionDetailsInner; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "SubscriptionDetailsWithManagement", function() { return SubscriptionDetailsWithManagement; });
 /* 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");
@@ -201537,8 +201771,10 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _utils_timeToDate__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../utils/timeToDate */ "./src/ui/utils/timeToDate.ts");
 /* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
 /* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils */ "./src/ui/subscriptions/utils.ts");
-/* harmony import */ var _settings_ManageSubscription__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ../settings/ManageSubscription */ "./src/ui/settings/ManageSubscription.tsx");
-/* harmony import */ var _NoSubscriptionDetails__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ./NoSubscriptionDetails */ "./src/ui/subscriptions/NoSubscriptionDetails.tsx");
+/* harmony import */ var _NoSubscriptionDetails__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ./NoSubscriptionDetails */ "./src/ui/subscriptions/NoSubscriptionDetails.tsx");
+/* harmony import */ var _membership_ChangePaymentMethodModal__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../membership/ChangePaymentMethodModal */ "./src/ui/membership/ChangePaymentMethodModal.tsx");
+/* harmony import */ var _CancelSubscriptionModal__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./CancelSubscriptionModal */ "./src/ui/subscriptions/CancelSubscriptionModal.tsx");
+
 
 
 
@@ -201574,46 +201810,12 @@ const SubscriptionDetailsInner = ({
     label: "Type"
   }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
     id: "subscription-type"
-  }, type)), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_KeyValueItem__WEBPACK_IMPORTED_MODULE_2__["default"], {
+  }, type)), !Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isCanceled"])(subscription) && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_KeyValueItem__WEBPACK_IMPORTED_MODULE_2__["default"], {
     label: "Next Payment"
   }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("span", {
     id: "subscription-next-payment"
   }, Object(_utils_timeToDate__WEBPACK_IMPORTED_MODULE_8__["timeToDate"])(subscription.nextBillingDate)))));
 };
-const SubscriptionDetailsWithManagement = ({
-  member,
-  subscription,
-  isLoading,
-  error,
-  onChange,
-  invoice
-}) => {
-  const fallbackUI = isLoading && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_4__["default"], {
-    id: "update-membership-modal-loading",
-    contained: true
-  }) || error && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ErrorMessage__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    error: error
-  });
-  const subDetails = subscription && subscription.id ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SubscriptionDetailsInner, {
-    subscription: subscription,
-    invoice: invoice
-  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, {
-    container: true,
-    spacing: 24
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, {
-    item: true,
-    xs: 12
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_settings_ManageSubscription__WEBPACK_IMPORTED_MODULE_11__["default"], {
-    memberId: member.id,
-    subscription: subscription,
-    onChange: onChange,
-    isLoading: isLoading,
-    error: error
-  })))) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_NoSubscriptionDetails__WEBPACK_IMPORTED_MODULE_12__["default"], {
-    member: member
-  });
-  return fallbackUI || subDetails;
-};
 
 const SubscriptionDetails = ({
   memberId,
@@ -201643,7 +201845,7 @@ const SubscriptionDetails = ({
   } // Use prop if exists
 
 
-  const subscriptionId = rentalSubId || member ? member.subscriptionId : undefined;
+  const subscriptionId = rentalSubId || (member ? member.subscriptionId : undefined);
   const {
     isRequesting: invoicesLoading,
     data: invoices = [],
@@ -201665,17 +201867,34 @@ const SubscriptionDetails = ({
     reloadInvoices();
     reloadSubscription();
   }, [reloadMember, reloadInvoices, reloadSubscription]);
-  const context = react__WEBPACK_IMPORTED_MODULE_0__["useMemo"](() => ({
-    isLoading,
-    error,
-    subscription,
+  const fallbackUI = isLoading && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_4__["default"], {
+    id: "update-membership-modal-loading",
+    contained: true
+  }) || error && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_common_ErrorMessage__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    error: error
+  });
+  const subDetails = subscription && subscription.id ? react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SubscriptionDetailsInner, {
+    subscription: subscription,
+    invoice: subscriptionInvoice
+  }), !Object(_utils__WEBPACK_IMPORTED_MODULE_10__["isCanceled"])(subscription) && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    container: true,
+    spacing: 24
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    item: true,
+    xs: 12
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_membership_ChangePaymentMethodModal__WEBPACK_IMPORTED_MODULE_12__["default"], {
+    subscription: subscription,
+    onSuccess: onChange
+  }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_CancelSubscriptionModal__WEBPACK_IMPORTED_MODULE_13__["default"], {
+    subscription: subscription,
+    memberId: memberId,
+    onSuccess: onChange
+  })))) : react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_NoSubscriptionDetails__WEBPACK_IMPORTED_MODULE_11__["default"], {
     member: member || {
       id: memberId
-    },
-    onChange,
-    invoice: subscriptionInvoice
-  }), [isLoading, error, subscription, onChange, subscriptionInvoice]);
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](SubscriptionDetailsWithManagement, context);
+    }
+  });
+  return fallbackUI || subDetails;
 };
 
 /* harmony default export */ __webpack_exports__["default"] = (SubscriptionDetails);
@@ -201864,12 +202083,13 @@ const ViewSubscriptionModal = ({
 /*!***************************************!*\
   !*** ./src/ui/subscriptions/utils.ts ***!
   \***************************************/
-/*! exports provided: renderPlanType */
+/*! exports provided: renderPlanType, isCanceled */
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
 __webpack_require__.r(__webpack_exports__);
 /* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "renderPlanType", function() { return renderPlanType; });
+/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "isCanceled", function() { return isCanceled; });
 const renderPlanType = planId => {
   const membership = planId.match(/membership/);
 
@@ -201899,6 +202119,7 @@ const renderPlanType = planId => {
     }
   }
 };
+const isCanceled = subscription => subscription && subscription.status.toLowerCase() === "canceled";
 
 /***/ }),