makerspace-react-rails 0.3.0 → 0.4.0

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

@@ -176793,16 +176793,12 @@ var App = /** @class */ (function (_super) {
     return App;
 }(React.Component));
 var mapStateToProps = function (state, _ownProps) {
-    var _a = state.auth, currentUser = _a.currentUser, permissions = _a.permissions, isSigningIn = _a.isRequesting, invoices = state.checkout.invoices;
-    var _b = state.checkout, isCheckingOut = _b.isRequesting, checkoutError = _b.error;
+    var _a = state.auth, currentUser = _a.currentUser, permissions = _a.permissions, isSigningIn = _a.isRequesting;
     return {
         currentUserId: currentUser.id,
         isAdmin: currentUser.isAdmin,
-        stagedInvoices: invoices,
         permissions: permissions,
         isSigningIn: isSigningIn,
-        isCheckingOut: isCheckingOut,
-        checkoutError: checkoutError
     };
 };
 var mapDispatchToProps = function (dispatch) {
@@ -176833,7 +176829,7 @@ var MembersList_1 = __webpack_require__(/*! ui/members/MembersList */ "./src/ui/
 var RentalsList_1 = __webpack_require__(/*! ui/rentals/RentalsList */ "./src/ui/rentals/RentalsList.tsx");
 var EarnedMembershipsList_1 = __webpack_require__(/*! ui/earnedMemberships/EarnedMembershipsList */ "./src/ui/earnedMemberships/EarnedMembershipsList.tsx");
 var MemberDetail_1 = __webpack_require__(/*! ui/member/MemberDetail */ "./src/ui/member/MemberDetail.tsx");
-var CheckoutContainer_1 = __webpack_require__(/*! ui/checkout/CheckoutContainer */ "./src/ui/checkout/CheckoutContainer.tsx");
+var CheckoutPage_1 = __webpack_require__(/*! ui/checkout/CheckoutPage */ "./src/ui/checkout/CheckoutPage.tsx");
 var BillingContainer_1 = __webpack_require__(/*! ui/billing/BillingContainer */ "./src/ui/billing/BillingContainer.tsx");
 var Settings_1 = __webpack_require__(/*! ui/member/Settings */ "./src/ui/member/Settings.tsx");
 var BillingContextContainer_1 = __webpack_require__(/*! ui/billing/BillingContextContainer */ "./src/ui/billing/BillingContextContainer.tsx");
@@ -176853,7 +176849,7 @@ var PrivateRouting = function (_a) {
             React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.Rentals, component: RentalsList_1.default }),
             billingEnabled && React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.Billing + "/" + constants_1.Routing.PathPlaceholder.Resource + constants_1.Routing.PathPlaceholder.Optional, component: BillingContainer_1.default }),
             billingEnabled && React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.Receipt, component: Receipt_1.default }),
-            billingEnabled && React.createElement(react_router_dom_1.Route, { path: constants_1.Routing.Checkout, component: CheckoutContainer_1.default }),
+            billingEnabled && React.createElement(react_router_dom_1.Route, { path: constants_1.Routing.Checkout, component: CheckoutPage_1.default }),
             React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.SendRegistration, component: SendRegistrationComponent_1.default }),
             earnedMembershipEnabled && React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.EarnedMemberships, component: EarnedMembershipsList_1.default }),
             React.createElement(react_router_dom_1.Redirect, { to: constants_1.Routing.Members + "/" + currentUserId }),
@@ -176879,14 +176875,14 @@ var react_router_dom_1 = __webpack_require__(/*! react-router-dom */ "./node_mod
 var constants_1 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
 var LandingPage_1 = __webpack_require__(/*! ui/auth/LandingPage */ "./src/ui/auth/LandingPage.tsx");
 var PasswordReset_1 = __webpack_require__(/*! ui/auth/PasswordReset */ "./src/ui/auth/PasswordReset.tsx");
-var SignUpContainer_1 = __webpack_require__(/*! ui/auth/SignUpContainer */ "./src/ui/auth/SignUpContainer.tsx");
+var SignUpForm_1 = __webpack_require__(/*! ui/auth/SignUpForm */ "./src/ui/auth/SignUpForm.tsx");
 var LoginPage_1 = __webpack_require__(/*! ui/auth/LoginPage */ "./src/ui/auth/LoginPage.tsx");
 var PublicRouting = function () {
     // Redirect to root if not authed and somewhere else
     return (React.createElement(react_router_dom_1.Switch, null,
         React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.PasswordReset + "/:token", component: PasswordReset_1.default }),
         React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.Login, component: LoginPage_1.default }),
-        React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.SignUp, component: SignUpContainer_1.default }),
+        React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.SignUp, component: SignUpForm_1.default }),
         React.createElement(react_router_dom_1.Route, { exact: true, path: constants_1.Routing.Root, component: LandingPage_1.default }),
         React.createElement(react_router_dom_1.Redirect, { to: "/" })));
 };
@@ -177003,7 +176999,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.isMemberInvoice = function (item) {
     return item && !!item.member && !item.rental;
 };
-exports.isInvoiceOptionSelection = function (item) { return !!item.invoiceOptionId; };
 var InvoiceOperation;
 (function (InvoiceOperation) {
     InvoiceOperation["Renew"] = "renew";
@@ -177297,7 +177292,6 @@ var AccessCardForm = function (_a) {
         createCard({
             memberId: member.id,
             uid: rejectionCard.uid,
-            cardLocation: undefined // TODO: this should be optional
         });
     }, [rejectionCard, createCard, setError, member.id]);
     return (React.createElement(React.Fragment, null,
@@ -177342,6 +177336,17 @@ exports.default = AccessCardForm;
 
 "use strict";
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 var use_react_router_1 = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
@@ -177354,8 +177359,15 @@ var FilledLaserableLogo_svg_1 = __webpack_require__(/*! -!react-svg-loader!asset
 var constants_1 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
 var MembershipSelectForm_1 = __webpack_require__(/*! ui/membership/MembershipSelectForm */ "./src/ui/membership/MembershipSelectForm.tsx");
 var LandingPage = function () {
-    var history = use_react_router_1.default().history;
-    var goToSignup = React.useCallback(function () { return history.push(constants_1.Routing.SignUp); }, []);
+    var _a = use_react_router_1.default(), history = _a.history, search = _a.location.search;
+    var goToSignup = React.useCallback(function (option, discountId) {
+        var searchParams = new URLSearchParams(search);
+        if (option !== undefined) {
+            searchParams.set(MembershipSelectForm_1.invoiceOptionParam, option.id);
+            discountId && searchParams.set(MembershipSelectForm_1.discountParam, discountId);
+        }
+        history.push(__assign(__assign({}, option && { search: searchParams.toString() }), { pathname: constants_1.Routing.SignUp }));
+    }, [history, search]);
     return (React.createElement(Grid_1.default, { container: true, spacing: 24, justify: "center" },
         React.createElement(Grid_1.default, { item: true, xs: 10 },
             React.createElement(Card_1.default, { style: { minWidth: 275 } },
@@ -177368,10 +177380,10 @@ var LandingPage = function () {
                     React.createElement(Grid_1.default, { container: true, spacing: 24, justify: "center" },
                         constants_1.billingEnabled && React.createElement(Grid_1.default, { item: true, xs: 12 },
                             React.createElement(Typography_1.default, { variant: "h5" }, "To get started, first select a membership option."),
-                            React.createElement(MembershipSelectForm_1.default, { onSelect: goToSignup, subscriptionOnly: true })),
+                            React.createElement(MembershipSelectForm_1.default, { onSelect: goToSignup, allowNone: true })),
                         !constants_1.billingEnabled && React.createElement(Grid_1.default, { item: true, md: 6, xs: 12 },
                             React.createElement(Typography_1.default, { variant: "subtitle1", align: "center" }, "Please take a moment to register with our online portal."),
-                            React.createElement(Button_1.default, { id: "register", variant: "outlined", color: "secondary", fullWidth: true, onClick: goToSignup }, "Register"))))))));
+                            React.createElement(Button_1.default, { id: "register", variant: "outlined", color: "secondary", fullWidth: true, onClick: function () { return goToSignup(); } }, "Register"))))))));
 };
 exports.default = LandingPage;
 
@@ -177876,39 +177888,15 @@ exports.default = SendRegistrationComponent;
 
 /***/ }),
 
-/***/ "./src/ui/auth/SignUpContainer.tsx":
-/*!*****************************************!*\
-  !*** ./src/ui/auth/SignUpContainer.tsx ***!
-  \*****************************************/
+/***/ "./src/ui/auth/SignUpForm.tsx":
+/*!************************************!*\
+  !*** ./src/ui/auth/SignUpForm.tsx ***!
+  \************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -177949,230 +177937,100 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 var react_redux_1 = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
 var use_react_router_1 = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+var TextField_1 = __webpack_require__(/*! @material-ui/core/TextField */ "./node_modules/@material-ui/core/TextField/index.js");
 var Grid_1 = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-var Card_1 = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
 var Button_1 = __webpack_require__(/*! @material-ui/core/Button */ "./node_modules/@material-ui/core/Button/index.js");
+var Card_1 = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
 var CardContent_1 = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
+var InputAdornment_1 = __webpack_require__(/*! @material-ui/core/InputAdornment */ "./node_modules/@material-ui/core/InputAdornment/index.js");
+var RemoveRedEye_1 = __webpack_require__(/*! @material-ui/icons/RemoveRedEye */ "./node_modules/@material-ui/icons/RemoveRedEye.js");
 var makerspace_ts_api_client_1 = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-var constants_1 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-var SignUpForm_1 = __webpack_require__(/*! ui/auth/SignUpForm */ "./src/ui/auth/SignUpForm.tsx");
-var actions_1 = __webpack_require__(/*! ui/auth/actions */ "./src/ui/auth/actions.ts");
+var constants_1 = __webpack_require__(/*! ui/auth/constants */ "./src/ui/auth/constants.ts");
+var ErrorMessage_1 = __webpack_require__(/*! ui/common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
+var Form_1 = __webpack_require__(/*! ui/common/Form */ "./src/ui/common/Form.tsx");
+var useModal_1 = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+var FormModal_1 = __webpack_require__(/*! ../common/FormModal */ "./src/ui/common/FormModal.tsx");
 var constants_2 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-var connected_react_router_1 = __webpack_require__(/*! connected-react-router */ "./node_modules/connected-react-router/esm/index.js");
+var actions_1 = __webpack_require__(/*! ./actions */ "./src/ui/auth/actions.ts");
+var constants_3 = __webpack_require__(/*! ui/auth/constants */ "./src/ui/auth/constants.ts");
 var hooks_1 = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+var constants_4 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
 var useWriteTransaction_1 = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
-var SignUpWrapper = function (_a) {
-    var goToLogin = _a.goToLogin, submitSignUp = _a.submitSignUp;
-    var selectedOption = hooks_1.useBillingState()[0].selectedOption;
-    var _b = hooks_1.useAuthState(), isRequesting = _b.isRequesting, error = _b.error;
-    var location = use_react_router_1.default().location;
-    var call = useWriteTransaction_1.default(makerspace_ts_api_client_1.createInvoice).call;
-    var onSubmit = React.useCallback(function (validSignUp) { return __awaiter(void 0, void 0, void 0, function () {
+var MembershipSelectForm_1 = __webpack_require__(/*! ui/membership/MembershipSelectForm */ "./src/ui/membership/MembershipSelectForm.tsx");
+var SignUpForm = function () {
+    var _a = useModal_1.default(), emailNoteOpen = _a.isOpen, openEmailNote = _a.openModal, closeEmailNote = _a.closeModal;
+    var _b = use_react_router_1.default(), history = _b.history, search = _b.location.search;
+    var goToLogin = React.useCallback(function () { return history.push(constants_2.Routing.Login); }, [history]);
+    var dispatch = react_redux_1.useDispatch();
+    var _c = hooks_1.useAuthState(), isRequesting = _c.isRequesting, error = _c.error;
+    var searchParams = new URLSearchParams(search);
+    var _d = React.useState({
+        id: searchParams.get(MembershipSelectForm_1.invoiceOptionParam),
+        discountId: searchParams.get(MembershipSelectForm_1.discountParam),
+    }), option = _d[0], setOption = _d[1];
+    var buildInvoice = useWriteTransaction_1.default(makerspace_ts_api_client_1.createInvoice).call;
+    var _e = React.useState(true), mask = _e[0], setMask = _e[1];
+    var toggleMask = React.useCallback(function () { return setMask(function (curr) { return !curr; }); }, [setMask]);
+    var submit = React.useCallback(function (form) { return __awaiter(void 0, void 0, void 0, function () {
+        var validSignUp;
         return __generator(this, function (_a) {
             switch (_a.label) {
-                case 0: return [4 /*yield*/, submitSignUp(validSignUp)];
+                case 0: return [4 /*yield*/, form.simpleValidate(constants_1.SignUpFields)];
                 case 1:
-                    _a.sent();
-                    if (!selectedOption) return [3 /*break*/, 3];
-                    return [4 /*yield*/, call(selectedOption)];
+                    validSignUp = _a.sent();
+                    if (!form.isValid())
+                        return [2 /*return*/];
+                    return [4 /*yield*/, dispatch(actions_1.submitSignUpAction(validSignUp))];
                 case 2:
                     _a.sent();
-                    _a.label = 3;
-                case 3: return [2 /*return*/];
+                    if (!option) return [3 /*break*/, 4];
+                    return [4 /*yield*/, buildInvoice(option)];
+                case 3:
+                    _a.sent();
+                    _a.label = 4;
+                case 4: return [2 /*return*/];
             }
         });
-    }); }, [call, submitSignUp, selectedOption]);
-    return (React.createElement(Grid_1.default, { container: true, justify: "center", spacing: 16 },
-        React.createElement(Grid_1.default, { item: true, md: 10, xs: 12 },
-            React.createElement(Grid_1.default, { container: true, justify: "center", spacing: 16 },
-                React.createElement(Grid_1.default, { item: true, xs: 12 },
-                    React.createElement(Card_1.default, { style: { minWidth: 275 } },
-                        React.createElement(CardContent_1.default, null,
-                            React.createElement(SignUpForm_1.default, { goToLogin: goToLogin, onSubmit: onSubmit, isRequesting: isRequesting, error: error, renderMembershipOptions: constants_2.billingEnabled, selectedOption: selectedOption, location: location })))),
-                React.createElement(Grid_1.default, { item: true, xs: 12 },
-                    React.createElement(Button_1.default, { id: "auth-toggle", variant: "outlined", color: "secondary", fullWidth: true, onClick: goToLogin }, "Already a Member? Login"))))));
-};
-var SignUpContainer = /** @class */ (function (_super) {
-    __extends(SignUpContainer, _super);
-    function SignUpContainer() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SignUpContainer.prototype.render = function () {
-        return React.createElement(SignUpWrapper, __assign({}, this.props));
-    };
-    return SignUpContainer;
-}(React.Component));
-var mapDispatchToProps = function (dispatch) {
-    return {
-        submitSignUp: function (signUpForm) { return dispatch(actions_1.submitSignUpAction(signUpForm)); },
-        goToLogin: function () { return dispatch(connected_react_router_1.push(constants_1.Routing.Login)); },
-    };
-};
-exports.default = react_redux_1.connect(null, mapDispatchToProps)(SignUpContainer);
-
-
-/***/ }),
-
-/***/ "./src/ui/auth/SignUpForm.tsx":
-/*!************************************!*\
-  !*** ./src/ui/auth/SignUpForm.tsx ***!
-  \************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-var TextField_1 = __webpack_require__(/*! @material-ui/core/TextField */ "./node_modules/@material-ui/core/TextField/index.js");
-var Grid_1 = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-var InputAdornment_1 = __webpack_require__(/*! @material-ui/core/InputAdornment */ "./node_modules/@material-ui/core/InputAdornment/index.js");
-var Card_1 = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
-var CardContent_1 = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
-var RemoveRedEye_1 = __webpack_require__(/*! @material-ui/icons/RemoveRedEye */ "./node_modules/@material-ui/icons/RemoveRedEye.js");
-var MembershipSelectForm_1 = __webpack_require__(/*! ui/membership/MembershipSelectForm */ "./src/ui/membership/MembershipSelectForm.tsx");
-var constants_1 = __webpack_require__(/*! ui/auth/constants */ "./src/ui/auth/constants.ts");
-var ErrorMessage_1 = __webpack_require__(/*! ui/common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
-var Form_1 = __webpack_require__(/*! ui/common/Form */ "./src/ui/common/Form.tsx");
-var SignUpFormComponent = /** @class */ (function (_super) {
-    __extends(SignUpFormComponent, _super);
-    function SignUpFormComponent(props) {
-        var _this = _super.call(this, props) || this;
-        _this.setFormRef = function (ref) { return _this.formRef = ref; };
-        _this.togglePasswordMask = function () {
-            _this.setState(function (state) { return ({ passwordMask: !state.passwordMask }); });
-        };
-        _this.renderPasswordInput = function () {
-            var passwordMask = _this.state.passwordMask;
-            return (React.createElement(Grid_1.default, { item: true, xs: 12 },
-                React.createElement(TextField_1.default, { fullWidth: true, required: true, label: constants_1.SignUpFields.password.label, name: constants_1.SignUpFields.password.name, id: constants_1.SignUpFields.password.name, placeholder: constants_1.SignUpFields.password.placeholder, type: passwordMask ? 'password' : 'text', InputProps: {
-                        endAdornment: (React.createElement(InputAdornment_1.default, { position: "end" },
-                            React.createElement(RemoveRedEye_1.default, { style: { cursor: 'pointer' }, onClick: _this.togglePasswordMask }))),
-                    } })));
-        };
-        _this.submit = function (form) { return __awaiter(_this, void 0, void 0, function () {
-            var validSignUp;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0: return [4 /*yield*/, form.simpleValidate(constants_1.SignUpFields)];
-                    case 1:
-                        validSignUp = _a.sent();
-                        if (!form.isValid())
-                            return [2 /*return*/];
-                        if (this.props.renderMembershipOptions && !this.state.membershipSelectionId) {
-                            this.setState({ membershipSelectionError: constants_1.SignUpFields.membershipSelectionId.error });
-                            return [2 /*return*/];
-                        }
-                        return [4 /*yield*/, this.props.onSubmit(validSignUp)];
-                    case 2:
-                        _a.sent();
-                        return [2 /*return*/];
-                }
-            });
-        }); };
-        _this.closeNotification = function () {
-            _this.setState({ emailExists: false });
-        };
-        _this.renderEmailNotification = function () {
-            var goToLogin = _this.props.goToLogin;
-            return (React.createElement(Card_1.default, { style: { minWidth: 275 } },
-                React.createElement(CardContent_1.default, null,
-                    React.createElement(Form_1.default, { id: "email-exists", title: "Email already exists", onSubmit: goToLogin, submitText: "Login", onCancel: _this.closeNotification, cancelText: "Cancel" }, "An account with this email already exists.  Please login to continue."))));
-        };
-        _this.updateMembershipSelection = function (membershipSelectionId) {
-            _this.setState({ membershipSelectionId: membershipSelectionId });
-        };
-        _this.state = {
-            passwordMask: true,
-            emailExists: false,
-            membershipSelectionError: "",
-            membershipSelectionId: props.selectedOption && props.selectedOption.id,
-            discountId: props.selectedOption && props.selectedOption.discountId,
-        };
-        return _this;
-    }
-    SignUpFormComponent.prototype.componentDidUpdate = function (prevProps, prevState) {
-        var wasRequesting = prevProps.isRequesting;
-        var _a = this.props, isRequesting = _a.isRequesting, error = _a.error;
-        if (wasRequesting && !isRequesting) {
-            if (error === constants_1.EmailExistsError) {
-                this.setState({ emailExists: true });
-            }
-        }
-        if (this.state.membershipSelectionId !== prevState.membershipSelectionId) {
-            this.setState({ membershipSelectionError: "" });
+    }); }, []);
+    React.useEffect(function () {
+        if (!isRequesting && error && error.match(new RegExp(constants_1.EmailExistsError))) {
+            dispatch({ type: constants_3.Action.LogoutSuccess }); // Clear error & redirect
+            openEmailNote();
         }
-    };
-    SignUpFormComponent.prototype.render = function () {
-        var _a = this.props, isRequesting = _a.isRequesting, error = _a.error;
-        var _b = this.state, emailExists = _b.emailExists, membershipSelectionError = _b.membershipSelectionError;
-        return (React.createElement(Form_1.default, { ref: this.setFormRef, id: constants_1.signUpPrefix, loading: isRequesting, title: "Create an Account", onSubmit: this.submit, submitText: "Sign Up" },
-            React.createElement(Grid_1.default, { container: true, spacing: 16 },
-                React.createElement(Grid_1.default, { item: true, xs: 6 },
-                    React.createElement(TextField_1.default, { fullWidth: true, required: true, label: constants_1.SignUpFields.firstname.label, name: constants_1.SignUpFields.firstname.name, id: constants_1.SignUpFields.firstname.name, placeholder: constants_1.SignUpFields.firstname.placeholder })),
-                React.createElement(Grid_1.default, { item: true, xs: 6 },
-                    React.createElement(TextField_1.default, { fullWidth: true, required: true, label: constants_1.SignUpFields.lastname.label, name: constants_1.SignUpFields.lastname.name, id: constants_1.SignUpFields.lastname.name, placeholder: constants_1.SignUpFields.lastname.placeholder })),
-                React.createElement(Grid_1.default, { item: true, xs: 12 },
-                    React.createElement(TextField_1.default, { fullWidth: true, required: true, label: constants_1.SignUpFields.email.label, name: constants_1.SignUpFields.email.name, id: constants_1.SignUpFields.email.name, placeholder: constants_1.SignUpFields.email.placeholder, type: "email" })),
-                React.createElement(Grid_1.default, { item: true, xs: 12 }, this.renderPasswordInput()),
-                this.props.renderMembershipOptions && (React.createElement(Grid_1.default, { item: true, xs: 12 },
-                    React.createElement(MembershipSelectForm_1.default, { onSelect: this.updateMembershipSelection, subscriptionOnly: true }),
-                    membershipSelectionError && React.createElement(ErrorMessage_1.default, { error: membershipSelectionError }))),
-                !isRequesting && error && React.createElement(ErrorMessage_1.default, { id: constants_1.signUpPrefix + "-error", error: error })),
-            emailExists && this.renderEmailNotification()));
-    };
-    return SignUpFormComponent;
-}(React.Component));
-exports.default = SignUpFormComponent;
+    }, [openEmailNote, isRequesting, error]);
+    var selectMembership = React.useCallback(function (option, discountId) {
+        setOption({ discountId: discountId, id: option.id });
+    }, [setOption]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid_1.default, { container: true, justify: "center", spacing: 16 },
+            React.createElement(Grid_1.default, { item: true, md: 10, xs: 12 },
+                React.createElement(Grid_1.default, { container: true, justify: "center", spacing: 16 },
+                    React.createElement(Grid_1.default, { item: true, xs: 12 },
+                        React.createElement(Card_1.default, { style: { minWidth: 275 } },
+                            React.createElement(CardContent_1.default, null,
+                                React.createElement(Form_1.default, { id: constants_1.signUpPrefix, loading: isRequesting, title: "Create an Account", onSubmit: submit, submitText: "Sign Up" },
+                                    React.createElement(Grid_1.default, { container: true, spacing: 16 },
+                                        React.createElement(Grid_1.default, { item: true, xs: 6 },
+                                            React.createElement(TextField_1.default, { fullWidth: true, required: true, label: constants_1.SignUpFields.firstname.label, name: constants_1.SignUpFields.firstname.name, id: constants_1.SignUpFields.firstname.name, placeholder: constants_1.SignUpFields.firstname.placeholder })),
+                                        React.createElement(Grid_1.default, { item: true, xs: 6 },
+                                            React.createElement(TextField_1.default, { fullWidth: true, required: true, label: constants_1.SignUpFields.lastname.label, name: constants_1.SignUpFields.lastname.name, id: constants_1.SignUpFields.lastname.name, placeholder: constants_1.SignUpFields.lastname.placeholder })),
+                                        React.createElement(Grid_1.default, { item: true, xs: 12 },
+                                            React.createElement(TextField_1.default, { fullWidth: true, required: true, label: constants_1.SignUpFields.email.label, name: constants_1.SignUpFields.email.name, id: constants_1.SignUpFields.email.name, placeholder: constants_1.SignUpFields.email.placeholder, type: "email" })),
+                                        React.createElement(Grid_1.default, { item: true, xs: 12 },
+                                            React.createElement(TextField_1.default, { fullWidth: true, required: true, label: constants_1.SignUpFields.password.label, name: constants_1.SignUpFields.password.name, id: constants_1.SignUpFields.password.name, placeholder: constants_1.SignUpFields.password.placeholder, type: mask ? 'password' : 'text', InputProps: {
+                                                    endAdornment: (React.createElement(InputAdornment_1.default, { position: "end" },
+                                                        React.createElement(RemoveRedEye_1.default, { style: { cursor: 'pointer' }, onClick: toggleMask }))),
+                                                } })),
+                                        constants_4.billingEnabled && (React.createElement(Grid_1.default, { item: true, xs: 12 },
+                                            React.createElement(MembershipSelectForm_1.default, { onSelect: selectMembership, allowNone: true }))),
+                                        !isRequesting && error && React.createElement(ErrorMessage_1.default, { id: constants_1.signUpPrefix + "-error", error: error })))))),
+                    React.createElement(Grid_1.default, { item: true, xs: 12 },
+                        React.createElement(Button_1.default, { id: "auth-toggle", variant: "outlined", color: "secondary", fullWidth: true, onClick: goToLogin }, "Already a Member? Login"))))),
+        emailNoteOpen && (React.createElement(FormModal_1.default, { isOpen: true, id: "email-exists", title: "Email already exists", onSubmit: goToLogin, submitText: "Login", closeHandler: closeEmailNote },
+            React.createElement(Card_1.default, { style: { minWidth: 275 } },
+                React.createElement(CardContent_1.default, null, "An account with this email already exists.  Please login to continue."))))));
+};
+exports.default = SignUpForm;
 
 
 /***/ }),
@@ -178235,7 +178093,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var constants_1 = __webpack_require__(/*! ui/auth/constants */ "./src/ui/auth/constants.ts");
-var constants_2 = __webpack_require__(/*! ui/checkout/constants */ "./src/ui/checkout/constants.ts");
 var utils_1 = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
 var makerspace_ts_api_client_1 = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
 var handleAuthWithPermissions = function (response, dispatch, ignoreError) {
@@ -178330,7 +178187,6 @@ exports.submitSignUpAction = function (signUpForm) { return function (dispatch)
         switch (_a.label) {
             case 0:
                 dispatch({ type: constants_1.Action.StartAuthRequest });
-                dispatch({ type: constants_2.Action.ResetStagedInvoices });
                 return [4 /*yield*/, makerspace_ts_api_client_1.registerMember(signUpForm)];
             case 1:
                 response = _a.sent();
@@ -178393,10 +178249,8 @@ var Action;
     Action["AuthUserSuccess"] = "AUTH/LOGIN_SUCCESS";
     Action["AuthUserFailure"] = "AUTH/LOGIN_FAILURE";
     Action["LogoutSuccess"] = "AUTH/LOGOUT";
-    Action["StageSignUp"] = "AUTH/STAGE_SIGN_UP";
-    Action["ClearStagedSignUp"] = "AUTH/CLEAR_STAGED_SIGN_UP";
 })(Action = exports.Action || (exports.Action = {}));
-exports.EmailExistsError = "Email already exists";
+exports.EmailExistsError = "Email is already taken";
 exports.loginPrefix = "login-modal";
 exports.LoginFields = {
     email: {
@@ -179595,7 +179449,6 @@ exports.deleteBillingAction = function (invoiceOptionId) { return function (disp
 }); }; };
 var defaultState = {
     entities: {},
-    selectedOption: undefined,
     read: {
         isRequesting: false,
         error: "",
@@ -179653,11 +179506,6 @@ exports.billingReducer = function (state, action) {
         case constants_1.Action.DeleteOptionFailure:
             var deleteError = action.error;
             return __assign(__assign({}, state), { delete: __assign(__assign({}, state.delete), { isRequesting: false, error: deleteError }) });
-        case constants_1.Action.SelectOption:
-            var selectedOption = action.data;
-            return __assign(__assign({}, state), { selectedOption: __assign({}, selectedOption) });
-        case constants_1.Action.ClearSelection:
-            return __assign(__assign({}, state), { selectedOption: undefined });
         default:
             return state;
     }
@@ -179692,8 +179540,6 @@ var Action;
     Action["StartDeleteRequest"] = "BILLING/START_DELETE_REQUEST";
     Action["DeleteOptionSuccess"] = "BILLING/DELETE_OPTION_SUCCESS";
     Action["DeleteOptionFailure"] = "BILLING/DELETE_OPTION_FAILURE";
-    Action["SelectOption"] = "BILLING/SELECT_OPTION";
-    Action["ClearSelection"] = "BILLING/CLEAR_SELECTION";
 })(Action = exports.Action || (exports.Action = {}));
 var formPrefix = "invoice-option-form";
 exports.fields = (_a = {},
@@ -179755,122 +179601,144 @@ exports.fields = (_a = {},
 
 /***/ }),
 
-/***/ "./src/ui/checkout/CheckoutContainer.tsx":
-/*!***********************************************!*\
-  !*** ./src/ui/checkout/CheckoutContainer.tsx ***!
-  \***********************************************/
+/***/ "./src/ui/checkout/CartList.tsx":
+/*!**************************************!*\
+  !*** ./src/ui/checkout/CartList.tsx ***!
+  \**************************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
     };
-})();
+    return __assign.apply(this, arguments);
+};
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-var react_redux_1 = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
-var connected_react_router_1 = __webpack_require__(/*! connected-react-router */ "./node_modules/connected-react-router/esm/index.js");
-var isEmpty_1 = __webpack_require__(/*! lodash-es/isEmpty */ "./node_modules/lodash-es/isEmpty.js");
-var constants_1 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-var actions_1 = __webpack_require__(/*! ui/checkout/actions */ "./src/ui/checkout/actions.ts");
-var CheckoutPage_1 = __webpack_require__(/*! ui/checkout/CheckoutPage */ "./src/ui/checkout/CheckoutPage.tsx");
-var utils_1 = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
-var constants_2 = __webpack_require__(/*! ui/checkout/constants */ "./src/ui/checkout/constants.ts");
-var CheckoutContainer = /** @class */ (function (_super) {
-    __extends(CheckoutContainer, _super);
-    function CheckoutContainer(props) {
-        var _this = _super.call(this, props) || this;
-        _this.submitPayment = function (paymentMethodId) {
-            var invoices = _this.props.invoices;
-            if (!paymentMethodId) {
-                return;
-            }
-            _this.props.submitCheckout(Object.values(invoices), paymentMethodId);
-        };
-        _this.state = {
-            transactionsComplete: false
-        };
-        return _this;
-    }
-    CheckoutContainer.prototype.componentDidMount = function () {
-        // Redirect if there are no invoices to checkout
-        var _a = this.props, userId = _a.userId, invoices = _a.invoices;
-        var redirectPath = userId ? utils_1.buildProfileRouting(userId) : constants_1.Routing.Login;
-        var redirect = invoices && isEmpty_1.default(invoices) ? redirectPath : undefined;
-        if (redirect) {
-            console.warn("Illegal transition to checkout detected. Transitioning");
-            this.props.pushLocation(redirectPath);
-        }
-    };
-    CheckoutContainer.prototype.componentDidUpdate = function (prevProps) {
-        var _this = this;
-        var _a = this.props, isRequesting = _a.isRequesting, error = _a.error, invoices = _a.invoices, transactions = _a.transactions, userId = _a.userId, transactionsLoading = _a.transactionsLoading, transactionsError = _a.transactionsError;
-        var wasRequesting = prevProps.isRequesting, wasTransacting = prevProps.transactionsLoading;
-        if (wasRequesting && !isRequesting && !error) {
-            // If there are no invoices, redirect to profile since there's nothing to do here
-            if (isEmpty_1.default(invoices)) {
-                this.props.pushLocation(utils_1.buildProfileRouting(userId));
-                return;
-            }
-        }
-        if (wasTransacting && !transactionsLoading && isEmpty_1.default(transactionsError) && !isEmpty_1.default(transactions)) {
-            var invoice_1 = Object.values(invoices)[0];
-            // Update state so component unmounts correctly
-            this.setState({ transactionsComplete: true }, function () { return _this.props.pushLocation(constants_1.Routing.Receipt.replace(constants_1.Routing.PathPlaceholder.InvoiceId, invoice_1.id)); });
-        }
-    };
-    CheckoutContainer.prototype.componentWillUnmount = function () {
-        if (!this.state.transactionsComplete) {
-            this.props.resetCheckoutState();
-        }
-    };
-    CheckoutContainer.prototype.render = function () {
-        var _a = this.props, isRequesting = _a.isRequesting, error = _a.error, invoices = _a.invoices, transactionsError = _a.transactionsError;
-        return (React.createElement(CheckoutPage_1.default, { onSubmit: this.submitPayment, isRequesting: isRequesting, error: error || transactionsError, invoices: invoices }));
-    };
-    return CheckoutContainer;
-}(React.Component));
-var mapStateToProps = function (state, _ownProps) {
-    var _a = state.checkout, invoices = _a.invoices, transactions = _a.transactions, isRequesting = _a.isRequesting, error = _a.error;
-    var userId = state.auth.currentUser.id;
-    var transactionsLoading = Object.values(transactions).some(function (transaction) { return transaction.isRequesting; });
-    var transactionsError = Object.entries(transactions).reduce(function (list, _a) {
-        var key = _a[0], error = _a[1].error;
-        if (error) {
-            list[key] = error;
+var use_react_router_1 = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+var Grid_1 = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+var Card_1 = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
+var Button_1 = __webpack_require__(/*! @material-ui/core/Button */ "./node_modules/@material-ui/core/Button/index.js");
+var CardContent_1 = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
+var Typography_1 = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
+var TableContainer_1 = __webpack_require__(/*! ui/common/table/TableContainer */ "./src/ui/common/table/TableContainer.tsx");
+var Table_1 = __webpack_require__(/*! ui/common/table/Table */ "./src/ui/common/table/Table.tsx");
+var numberAsCurrency_1 = __webpack_require__(/*! ui/utils/numberAsCurrency */ "./src/ui/utils/numberAsCurrency.ts");
+var ErrorMessage_1 = __webpack_require__(/*! ui/common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
+var LoadingOverlay_1 = __webpack_require__(/*! ui/common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
+var BillingContextContainer_1 = __webpack_require__(/*! ui/billing/BillingContextContainer */ "./src/ui/billing/BillingContextContainer.tsx");
+var FormModal_1 = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
+var cart_1 = __webpack_require__(/*! ./cart */ "./src/ui/checkout/cart.ts");
+var useModal_1 = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
+var utils_1 = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
+var hooks_1 = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+var constants_1 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
+var useWriteTransaction_1 = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+var makerspace_ts_api_client_1 = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+var getCartId = function (item) { return item.id; };
+var CartList = function (_a) {
+    var paymentMethodId = _a.paymentMethodId;
+    var item = cart_1.useCartState().item;
+    var history = use_react_router_1.default().history;
+    var currentUserId = hooks_1.useAuthState().currentUser.id;
+    var emptyCart = cart_1.useEmptyCart();
+    // Redirect to profile if theres nothing in the cart
+    React.useEffect(function () {
+        !item && history.push(utils_1.buildProfileRouting(currentUserId));
+        return emptyCart;
+    }, []);
+    var discounts = React.useContext(BillingContextContainer_1.BillingContext).discounts;
+    var onSuccess = React.useCallback(function (_a) {
+        var invoiceId = _a.invoiceId;
+        history.push("" + constants_1.Routing.Receipt.replace(constants_1.Routing.PathPlaceholder.InvoiceId, invoiceId));
+    }, [history]);
+    var _b = useWriteTransaction_1.default(makerspace_ts_api_client_1.createTransaction, onSuccess), call = _b.call, isRequesting = _b.isRequesting, error = _b.error, reset = _b.reset;
+    var _c = useModal_1.default(), errorIsOpen = _c.isOpen, openModal = _c.openModal, closeModal = _c.closeModal;
+    var closeErrModal = React.useCallback(function () {
+        reset();
+        closeModal();
+    }, [reset, closeModal]);
+    // Open error modal on error
+    React.useEffect(function () {
+        !isRequesting && error && openModal();
+    }, [isRequesting, error, openModal]);
+    var getFields = React.useCallback(function (withError) { return __spreadArrays([
+        {
+            id: "name",
+            label: "Name",
+            cell: function (row) { return row.name; },
+        }
+    ], withError ? [] : [{
+            id: "description",
+            label: "Description",
+            cell: function (row) {
+                var discount = discounts && (discounts.data || []).find(function (discount) { return discount.id === row.discountId; });
+                return (React.createElement(React.Fragment, null,
+                    React.createElement("div", null, row.description),
+                    discount && (React.createElement(React.Fragment, null,
+                        React.createElement("hr", null),
+                        React.createElement("div", { id: "discount" }, discount.description)))));
+            },
+        }], [
+        {
+            id: "amount",
+            label: "Amount",
+            cell: function (row) { return numberAsCurrency_1.numberAsCurrency(row.amount); },
+        }
+    ], withError ? [{
+            id: "error",
+            label: "Error",
+            cell: function (row) {
+                return React.createElement(ErrorMessage_1.default, { error: error });
+            },
+        }] : []); }, [error]);
+    var submitPayment = React.useCallback(function () {
+        if (!paymentMethodId) {
+            return;
         }
-        return list;
-    }, {});
-    return {
-        invoices: invoices,
-        transactions: transactions,
-        userId: userId,
-        isRequesting: isRequesting,
-        error: error,
-        transactionsLoading: transactionsLoading,
-        // Only set error on this page if all transactions errored out
-        transactionsError: Object.keys(transactionsError).length === Object.keys(transactions).length && transactionsError
-    };
-};
-var mapDispatchToProps = function (dispatch) {
-    return {
-        submitCheckout: function (invoices, paymentMethodId) { return dispatch(actions_1.submitPaymentAction(paymentMethodId, invoices)); },
-        pushLocation: function (location) { return dispatch(connected_react_router_1.push(location)); },
-        resetCheckoutState: function () { return dispatch({ type: constants_2.Action.ResetStagedInvoices }); },
-    };
+        call(__assign(__assign({}, cart_1.isInvoiceSelection(item) ? {
+            invoiceId: item.id
+        } : __assign({ invoiceOptionId: item.id }, item.discountId && { discountId: item.discountId })), { paymentMethodId: paymentMethodId }));
+    }, [call, item, paymentMethodId]);
+    if (!item) {
+        return null;
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Card_1.default, { style: { height: "100%" } },
+            React.createElement(CardContent_1.default, null,
+                React.createElement(Grid_1.default, { container: true, spacing: 16 },
+                    React.createElement(Grid_1.default, { item: true, xs: 12 },
+                        React.createElement(TableContainer_1.default, { id: "checkout-invoices-table", title: "Review Items Before Purchase", data: item ? [item] : [], columns: getFields(false), rowId: getCartId })),
+                    React.createElement(Grid_1.default, { item: true, xs: 12, style: { textAlign: "right" } },
+                        React.createElement(Typography_1.default, { id: "total", variant: "h6", color: "inherit" },
+                            "Total ",
+                            numberAsCurrency_1.numberAsCurrency(item.amount))),
+                    React.createElement(Grid_1.default, { item: true, xs: 12, style: { textAlign: "left" } },
+                        React.createElement(Button_1.default, { id: "submit-payment-button", variant: "contained", disabled: !paymentMethodId, onClick: submitPayment }, "Submit Payment"))),
+                isRequesting && React.createElement(LoadingOverlay_1.default, { id: "checkout-submitting-overlay" }))),
+        errorIsOpen && (React.createElement(FormModal_1.default, { id: "payment-error-modal", title: "Error processing transactions", isOpen: true, onSubmit: closeErrModal, submitText: "Okay" },
+            React.createElement(Grid_1.default, { container: true, spacing: 16 },
+                React.createElement(Grid_1.default, { item: true, xs: 12 },
+                    React.createElement(Typography_1.default, { variant: "body1" }, "There was an error processing one or more transactions. Please review these errors and try again")),
+                React.createElement(Grid_1.default, { item: true, xs: 12 },
+                    React.createElement(Table_1.default, { id: "payment-invoices-table", data: item ? [item] : [], columns: getFields(true), rowId: getCartId })))))));
 };
-exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(CheckoutContainer);
+exports.default = CartList;
 
 
 /***/ }),
@@ -179884,182 +179752,27 @@ exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(Che
 
 "use strict";
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __spreadArrays = (this && this.__spreadArrays) || function () {
-    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
-    for (var r = Array(s), k = 0, i = 0; i < il; i++)
-        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
-            r[k] = a[j];
-    return r;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 var Grid_1 = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-var Dialog_1 = __webpack_require__(/*! @material-ui/core/Dialog */ "./node_modules/@material-ui/core/Dialog/index.js");
 var Card_1 = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
-var Button_1 = __webpack_require__(/*! @material-ui/core/Button */ "./node_modules/@material-ui/core/Button/index.js");
 var CardContent_1 = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
-var Typography_1 = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
-var TableContainer_1 = __webpack_require__(/*! ui/common/table/TableContainer */ "./src/ui/common/table/TableContainer.tsx");
-var Table_1 = __webpack_require__(/*! ui/common/table/Table */ "./src/ui/common/table/Table.tsx");
-var numberAsCurrency_1 = __webpack_require__(/*! ui/utils/numberAsCurrency */ "./src/ui/utils/numberAsCurrency.ts");
 var PaymentMethodsContainer_1 = __webpack_require__(/*! ui/checkout/PaymentMethodsContainer */ "./src/ui/checkout/PaymentMethodsContainer.tsx");
-var ErrorMessage_1 = __webpack_require__(/*! ui/common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
-var LoadingOverlay_1 = __webpack_require__(/*! ui/common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
-var LoginForm_1 = __webpack_require__(/*! ui/auth/LoginForm */ "./src/ui/auth/LoginForm.tsx");
-var BillingContextContainer_1 = __webpack_require__(/*! ui/billing/BillingContextContainer */ "./src/ui/billing/BillingContextContainer.tsx");
-var FormModal_1 = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
-var CheckoutPage = /** @class */ (function (_super) {
-    __extends(CheckoutPage, _super);
-    function CheckoutPage(props) {
-        var _this = _super.call(this, props) || this;
-        _this.setFormRef = function (ref) { return _this.formRef = ref; };
-        _this.getFields = function (errorState) {
-            if (errorState === void 0) { errorState = false; }
-            return __spreadArrays([
-                {
-                    id: "name",
-                    label: "Name",
-                    cell: function (row) { return row.name; },
-                }
-            ], errorState ? [] : [{
-                    id: "description",
-                    label: "Description",
-                    cell: function (row) {
-                        var discounts = row.discountId && _this.props.context.discounts.data;
-                        var discount = discounts && discounts.find(function (discount) { return discount.id === row.discountId; });
-                        return (React.createElement(React.Fragment, null,
-                            React.createElement("div", null, row.description),
-                            discount && (React.createElement(React.Fragment, null,
-                                React.createElement("hr", null),
-                                React.createElement("div", { id: "discount" }, discount.description)))));
-                    },
-                }], [
-                {
-                    id: "amount",
-                    label: "Amount",
-                    cell: function (row) { return numberAsCurrency_1.numberAsCurrency(row.amount); },
-                }
-            ], errorState ? [{
-                    id: "error",
-                    label: "Error",
-                    cell: function (row) {
-                        var error = typeof _this.props.error === 'object' ?
-                            _this.props.error[row.id]
-                            : _this.props.error;
-                        return React.createElement(ErrorMessage_1.default, { error: error });
-                    },
-                }] : []);
-        };
-        _this.closeErrorModal = function () { return _this.setState({ openTransactionErrorModal: false }); };
-        _this.renderErrorModal = function () {
-            var _a = _this.props, invoices = _a.invoices, error = _a.error;
-            return (React.createElement(FormModal_1.default, { formRef: _this.setFormRef, id: "payment-error-modal", title: "Error processing transactions", isOpen: _this.state.openTransactionErrorModal, onSubmit: _this.closeErrorModal, submitText: "Okay" },
-                React.createElement(Grid_1.default, { container: true, spacing: 16 },
-                    React.createElement(Grid_1.default, { item: true, xs: 12 },
-                        React.createElement(Typography_1.default, { variant: "body1" }, "There was an error processing one or more transactions. Please review these errors and try again")),
-                    React.createElement(Grid_1.default, { item: true, xs: 12 },
-                        React.createElement(Table_1.default, { id: "payment-invoices-table", error: typeof error === 'string' && error, data: Object.values(invoices), columns: _this.getFields(true), rowId: _this.rowId })))));
-        };
-        _this.renderTotal = function () {
-            var invoices = _this.props.invoices;
-            var _a = _this.state, total = _a.total, paymentMethodId = _a.paymentMethodId;
-            return (React.createElement(Card_1.default, { style: { height: "100%" } },
-                React.createElement(CardContent_1.default, null,
-                    React.createElement(Grid_1.default, { container: true, spacing: 16 },
-                        React.createElement(Grid_1.default, { item: true, xs: 12 },
-                            React.createElement(TableContainer_1.default, { id: "checkout-invoices-table", title: "Review Items Before Purchase", data: Object.values(invoices), totalItems: Object.values(invoices).length, columns: _this.getFields(), rowId: _this.rowId })),
-                        React.createElement(Grid_1.default, { item: true, xs: 12, style: { textAlign: "right" } },
-                            React.createElement(Typography_1.default, { id: "total", variant: "h6", color: "inherit" },
-                                "Total ",
-                                numberAsCurrency_1.numberAsCurrency(total))),
-                        React.createElement(Grid_1.default, { item: true, xs: 12, style: { textAlign: "left" } },
-                            React.createElement(Button_1.default, { id: "submit-payment-button", variant: "contained", disabled: !paymentMethodId, onClick: _this.submitPayment }, "Submit Payment"))))));
-        };
-        _this.submitPayment = function () {
-            var paymentMethodId = _this.state.paymentMethodId;
-            _this.props.onSubmit(paymentMethodId);
-        };
-        _this.selectPaymentMethod = function (paymentMethodId) {
-            _this.setState({ paymentMethodId: paymentMethodId });
-        };
-        _this.openLoginModal = function () {
-            _this.setState({ openLoginModal: true });
-        };
-        _this.closeLoginModal = function () {
-            _this.setState({ openLoginModal: false });
-        };
-        _this.renderLoginModal = function () {
-            return (React.createElement(Dialog_1.default, { fullWidth: true, open: _this.state.openLoginModal, onClose: _this.closeLoginModal, disableBackdropClick: true },
-                React.createElement(LoginForm_1.default, null)));
-        };
-        _this.rowId = function (row) { return row.id; };
-        // Redirect if there are no invoices to checkout
-        var invoices = props.invoices;
-        _this.state = ({
-            total: invoices && Object.values(invoices).reduce(function (a, b) { return a + Number(b.amount); }, 0),
-            error: false,
-            paymentMethodId: undefined,
-            openLoginModal: false,
-            openTransactionErrorModal: false,
-        });
-        return _this;
-    }
-    CheckoutPage.prototype.componentDidUpdate = function (prevProps) {
-        var _a = this.props, isRequesting = _a.isRequesting, error = _a.error;
-        var wasRequesting = prevProps.isRequesting;
-        var paymentMethodId = this.state.paymentMethodId;
-        if (wasRequesting && !isRequesting) {
-            // Open error modal if error exists after submitting payment
-            if (error && paymentMethodId) {
-                this.setState({ error: !!error, openTransactionErrorModal: true });
-                return;
-            }
-        }
-    };
-    CheckoutPage.prototype.render = function () {
-        var _a = this.props, isRequesting = _a.isRequesting, error = _a.error;
-        return (React.createElement(Grid_1.default, { container: true, spacing: 16 },
-            isRequesting && React.createElement(LoadingOverlay_1.default, { id: "checkout-submitting-overlay" }),
-            React.createElement(Grid_1.default, { item: true, sm: 5, xs: 12 },
-                React.createElement(Grid_1.default, { container: true, spacing: 16 },
-                    React.createElement(Grid_1.default, { item: true, xs: 12 },
-                        React.createElement(Card_1.default, null,
-                            React.createElement(CardContent_1.default, null,
-                                React.createElement(PaymentMethodsContainer_1.default, { onPaymentMethodChange: this.selectPaymentMethod }),
-                                React.createElement("p", null, "*The payment method used when creating a subscription will be the default payment method used for subscription payments unless changed through Settings.")))))),
-            React.createElement(Grid_1.default, { item: true, sm: 7, xs: 12 },
-                this.renderTotal(),
-                !isRequesting && error && React.createElement(ErrorMessage_1.default, { id: "checkout-submitting-error", error: typeof error === 'string' && error })),
-            this.renderLoginModal(),
-            this.renderErrorModal()));
-    };
-    return CheckoutPage;
-}(React.Component));
-exports.default = (function (props) { return (React.createElement(BillingContextContainer_1.BillingContext.Consumer, null, function (context) { return React.createElement(CheckoutPage, __assign({}, props, { context: context })); })); });
+var CartList_1 = __webpack_require__(/*! ./CartList */ "./src/ui/checkout/CartList.tsx");
+var CheckoutPage = function () {
+    var _a = React.useState(), paymentMethodId = _a[0], setPaymentMethodId = _a[1];
+    return (React.createElement(Grid_1.default, { container: true, spacing: 16 },
+        React.createElement(Grid_1.default, { item: true, sm: 5, xs: 12 },
+            React.createElement(Grid_1.default, { container: true, spacing: 16 },
+                React.createElement(Grid_1.default, { item: true, xs: 12 },
+                    React.createElement(Card_1.default, null,
+                        React.createElement(CardContent_1.default, null,
+                            React.createElement(PaymentMethodsContainer_1.default, { onPaymentMethodChange: setPaymentMethodId }),
+                            React.createElement("p", null, "*The payment method used when creating a subscription will be the default payment method used for subscription payments unless changed through Settings.")))))),
+        React.createElement(Grid_1.default, { item: true, sm: 7, xs: 12 },
+            React.createElement(CartList_1.default, { paymentMethodId: paymentMethodId }))));
+};
+exports.default = CheckoutPage;
 
 
 /***/ }),
@@ -180140,10 +179853,33 @@ var Grid_1 = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@
 //@ts-ignore
 var Braintree = __webpack_require__(/*! braintree-web */ "./node_modules/braintree-web/dist/browser/index.js");
 var Form_1 = __webpack_require__(/*! ui/common/Form */ "./src/ui/common/Form.tsx");
-var constants_1 = __webpack_require__(/*! ui/checkout/constants */ "./src/ui/checkout/constants.ts");
 var ErrorMessage_1 = __webpack_require__(/*! ui/common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
 var HostedInput_1 = __webpack_require__(/*! ui/checkout/HostedInput */ "./src/ui/checkout/HostedInput.tsx");
 var makerspace_ts_api_client_1 = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+var formPrefix = "credit-card-form";
+var CreditCardFields = {
+    number: {
+        label: "Credit or debit card number",
+        name: formPrefix + "-cardNumber",
+        placeholder: "4111 1111 1111 1111",
+        validate: function (val) { return !!val; }
+    },
+    cvv: {
+        label: "Security code",
+        name: formPrefix + "-csv",
+        placeholder: "123"
+    },
+    expirationDate: {
+        label: "Expiration date",
+        name: formPrefix + "-expirationDate",
+        placeholder: "MM/YYYY"
+    },
+    postalCode: {
+        label: "Zipcode",
+        name: formPrefix + "-zipcode",
+        placeholder: "90210"
+    }
+};
 var CreditCardForm = /** @class */ (function (_super) {
     __extends(CreditCardForm, _super);
     function CreditCardForm(props) {
@@ -180183,7 +179919,7 @@ var CreditCardForm = /** @class */ (function (_super) {
                         return [4 /*yield*/, Braintree.hostedFields.create({
                                 client: braintreeInstance,
                                 styles: {},
-                                fields: Object.entries(constants_1.CreditCardFields).reduce(function (fields, _a) {
+                                fields: Object.entries(CreditCardFields).reduce(function (fields, _a) {
                                     var key = _a[0], field = _a[1];
                                     fields[key] = {
                                         selector: "#" + field.name,
@@ -180272,21 +180008,21 @@ var CreditCardForm = /** @class */ (function (_super) {
             React.createElement(Form_1.default, { ref: this.setFormRef, onSubmit: this.requestPaymentMethod, onCancel: this.props.closeHandler, id: "credit-card-form", title: "Enter your credit or debit card information" },
                 React.createElement(Grid_1.default, { container: true, spacing: 8 },
                     React.createElement(Grid_1.default, { item: true, xs: 12 },
-                        React.createElement(HostedInput_1.default, { label: constants_1.CreditCardFields.number.label, id: constants_1.CreditCardFields.number.name }),
+                        React.createElement(HostedInput_1.default, { label: CreditCardFields.number.label, id: CreditCardFields.number.name }),
                         inputErrors["number"] &&
                             React.createElement(ErrorMessage_1.default, { error: inputErrors["number"] }))),
                 React.createElement(Grid_1.default, { container: true, spacing: 8 },
                     React.createElement(Grid_1.default, { item: true, xs: 6 },
-                        React.createElement(HostedInput_1.default, { label: constants_1.CreditCardFields.expirationDate.label, id: constants_1.CreditCardFields.expirationDate.name }),
+                        React.createElement(HostedInput_1.default, { label: CreditCardFields.expirationDate.label, id: CreditCardFields.expirationDate.name }),
                         inputErrors["expirationDate"] &&
                             React.createElement(ErrorMessage_1.default, { error: inputErrors["expirationDate"] })),
                     React.createElement(Grid_1.default, { item: true, xs: 6 },
-                        React.createElement(HostedInput_1.default, { label: constants_1.CreditCardFields.cvv.label, id: constants_1.CreditCardFields.cvv.name }),
+                        React.createElement(HostedInput_1.default, { label: CreditCardFields.cvv.label, id: CreditCardFields.cvv.name }),
                         inputErrors["cvv"] &&
                             React.createElement(ErrorMessage_1.default, { error: inputErrors["cvv"] }))),
                 React.createElement(Grid_1.default, { container: true, spacing: 8 },
                     React.createElement(Grid_1.default, { item: true, xs: 12 },
-                        React.createElement(HostedInput_1.default, { label: constants_1.CreditCardFields.postalCode.label, id: constants_1.CreditCardFields.postalCode.name }),
+                        React.createElement(HostedInput_1.default, { label: CreditCardFields.postalCode.label, id: CreditCardFields.postalCode.name }),
                         inputErrors["postalCode"] &&
                             React.createElement(ErrorMessage_1.default, { error: inputErrors["postalCode"] }))),
                 error && React.createElement(ErrorMessage_1.default, { error: error, id: "credit-card-error" }))));
@@ -180965,250 +180701,135 @@ exports.default = PaypalButton;
 /*!*************************************!*\
   !*** ./src/ui/checkout/Receipt.tsx ***!
   \*************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-var use_react_router_1 = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
-var Grid_1 = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-var Card_1 = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
-var CardContent_1 = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
-var Typography_1 = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
-var utils_1 = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
-var hooks_1 = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-var ButtonRow_1 = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
-var LoadingOverlay_1 = __webpack_require__(/*! ../common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
-var buildReceiptUrl = function (id) { return ( false || "") + "/api/billing/receipts/" + id; };
-var receiptContainerId = "receipt-container";
-var Receipt = function () {
-    var userId = hooks_1.useAuthState().currentUser.id;
-    var _a = use_react_router_1.default(), history = _a.history, invoiceId = _a.match.params.invoiceId;
-    var goToProfile = React.useCallback(function () { return history.push(utils_1.buildProfileRouting(userId)); }, [history, userId]);
-    var printReceipt = React.useCallback(function () {
-        window.frames[receiptContainerId].focus();
-        window.frames[receiptContainerId].print();
-    }, [window.frames]);
-    var _b = React.useState(true), loading = _b[0], setLoading = _b[1];
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Grid_1.default, { container: true, spacing: 16 },
-            React.createElement(Grid_1.default, { item: true, sm: 6, xs: 12 },
-                React.createElement(Typography_1.default, { variant: "h4" }, "Thank you for your purchase!"),
-                React.createElement(Typography_1.default, { variant: "subheading" }, "Details regarding your purchase can be found below.")),
-            React.createElement(Grid_1.default, { item: true, sm: 6, xs: 12 },
-                React.createElement(ButtonRow_1.ActionButton, { id: "return-to-profile", variant: "outlined", style: { float: "right" }, color: "primary", label: "Return to profile", onClick: goToProfile }),
-                React.createElement(ButtonRow_1.ActionButton, { label: "Print Receipt", style: { float: "right" }, color: "primary", variant: "contained", onClick: printReceipt }))),
-        React.createElement(Card_1.default, { style: { height: "75vh" } },
-            React.createElement(CardContent_1.default, { style: { height: "100%" } },
-                React.createElement(Grid_1.default, { container: true, spacing: 16, style: { height: "100%" } },
-                    React.createElement(Grid_1.default, { item: true, xs: 12, style: { height: "100%" } },
-                        loading && React.createElement(LoadingOverlay_1.default, { id: "receipt-loading" }),
-                        React.createElement("iframe", { id: receiptContainerId, name: receiptContainerId, src: buildReceiptUrl(invoiceId), style: { height: "100%", width: "100%" }, onLoad: function () { return setLoading(false); }, frameBorder: 0 })))))));
-};
-exports.default = Receipt;
-
-
-/***/ }),
-
-/***/ "./src/ui/checkout/actions.ts":
-/*!************************************!*\
-  !*** ./src/ui/checkout/actions.ts ***!
-  \************************************/
-/*! no static exports found */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-var __generator = (this && this.__generator) || function (thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var omit_1 = __webpack_require__(/*! lodash-es/omit */ "./node_modules/lodash-es/omit.js");
-var makerspace_ts_api_client_1 = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-var isObject_1 = __webpack_require__(/*! ui/utils/isObject */ "./src/ui/utils/isObject.ts");
-var constants_1 = __webpack_require__(/*! ui/checkout/constants */ "./src/ui/checkout/constants.ts");
-exports.submitPaymentAction = function (paymentMethodId, invoices) { return function (dispatch) { return __awaiter(void 0, void 0, void 0, function () {
-    return __generator(this, function (_a) {
-        switch (_a.label) {
-            case 0:
-                dispatch({ type: constants_1.Action.StartAsyncRequest });
-                return [4 /*yield*/, Promise.all(invoices.map(function (invoice) { return __awaiter(void 0, void 0, void 0, function () {
-                        var invoiceId, result;
-                        return __generator(this, function (_a) {
-                            switch (_a.label) {
-                                case 0:
-                                    invoiceId = invoice.id;
-                                    dispatch({ type: constants_1.Action.StartTransactionRequest, data: invoiceId });
-                                    return [4 /*yield*/, makerspace_ts_api_client_1.createTransaction({ paymentMethodId: paymentMethodId, invoiceId: invoiceId })];
-                                case 1:
-                                    result = _a.sent();
-                                    if (makerspace_ts_api_client_1.isApiErrorResponse(result)) {
-                                        dispatch({
-                                            type: constants_1.Action.FinishTransactionFailure,
-                                            error: result.error.message,
-                                            id: invoiceId
-                                        });
-                                    }
-                                    else {
-                                        dispatch({
-                                            type: constants_1.Action.FinishTransactionSuccess, data: __assign(__assign({}, result.data), { invoice: invoice })
-                                        });
-                                    }
-                                    return [2 /*return*/];
-                            }
-                        });
-                    }); }))];
-            case 1:
-                _a.sent();
-                dispatch({ type: constants_1.Action.StopAsyncRequest });
-                return [2 /*return*/];
-        }
-    });
-}); }; };
-var defaultState = {
-    invoices: {},
-    transactions: {},
-    isRequesting: false,
-    error: ""
-};
-exports.checkoutReducer = function (state, action) {
-    var _a, _b, _c;
-    if (state === void 0) { state = defaultState; }
-    var invoiceId;
-    switch (action.type) {
-        case constants_1.Action.StartAsyncRequest:
-            return __assign(__assign({}, state), { isRequesting: true });
-        case constants_1.Action.StopAsyncRequest:
-            return __assign(__assign({}, state), { isRequesting: false });
-        case constants_1.Action.StageInvoicesForPayment:
-            var invoices = action.data;
-            // Can accept array or collection of invoices to stage
-            if (Array.isArray(invoices)) {
-                var newInvoices_1 = {};
-                invoices.forEach(function (invoice) {
-                    newInvoices_1[invoice.id] = invoice;
-                });
-                return __assign(__assign({}, state), { invoices: __assign(__assign({}, state.invoices), newInvoices_1) });
-            }
-            else if (isObject_1.default(invoices)) {
-                return __assign(__assign({}, state), { invoices: __assign(__assign({}, state.invoices), invoices) });
-            }
-        case constants_1.Action.ResetStagedInvoice:
-            invoiceId = action.data;
-            return __assign(__assign({}, state), { invoices: omit_1.default(state.invoices, invoiceId) });
-        case constants_1.Action.ResetStagedInvoices:
-            return __assign(__assign({}, state), { invoices: defaultState.invoices, transactions: defaultState.transactions });
-        case constants_1.Action.StartTransactionRequest:
-            invoiceId = action.data;
-            return __assign(__assign({}, state), { transactions: __assign(__assign({}, state.transactions), (_a = {}, _a[invoiceId] = __assign(__assign({}, state.transactions[invoiceId]), { isRequesting: true }), _a)) });
-        case constants_1.Action.FinishTransactionSuccess:
-            var transaction = action.data;
-            return __assign(__assign({}, state), { transactions: __assign(__assign({}, state.transactions), (_b = {}, _b[transaction.invoice.id] = __assign(__assign({}, transaction), { isRequesting: false, error: "" }), _b)) });
-        case constants_1.Action.FinishTransactionFailure:
-            var id = action.id, error = action.error;
-            return __assign(__assign({}, state), { transactions: __assign(__assign({}, state.transactions), (_c = {}, _c[id] = {
-                    isRequesting: false,
-                    error: error,
-                }, _c)) });
-        default:
-            return state;
-    }
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+var use_react_router_1 = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+var Grid_1 = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+var Card_1 = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
+var CardContent_1 = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
+var Typography_1 = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
+var utils_1 = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
+var hooks_1 = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+var ButtonRow_1 = __webpack_require__(/*! ../common/ButtonRow */ "./src/ui/common/ButtonRow.tsx");
+var LoadingOverlay_1 = __webpack_require__(/*! ../common/LoadingOverlay */ "./src/ui/common/LoadingOverlay.tsx");
+var buildReceiptUrl = function (id) { return ( false || "") + "/api/billing/receipts/" + id; };
+var receiptContainerId = "receipt-container";
+var Receipt = function () {
+    var userId = hooks_1.useAuthState().currentUser.id;
+    var _a = use_react_router_1.default(), history = _a.history, invoiceId = _a.match.params.invoiceId;
+    var goToProfile = React.useCallback(function () { return history.push(utils_1.buildProfileRouting(userId)); }, [history, userId]);
+    var printReceipt = React.useCallback(function () {
+        window.frames[receiptContainerId].focus();
+        window.frames[receiptContainerId].print();
+    }, [window.frames]);
+    var _b = React.useState(true), loading = _b[0], setLoading = _b[1];
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Grid_1.default, { container: true, spacing: 16 },
+            React.createElement(Grid_1.default, { item: true, sm: 6, xs: 12 },
+                React.createElement(Typography_1.default, { variant: "h4" }, "Thank you for your purchase!"),
+                React.createElement(Typography_1.default, { variant: "subheading" }, "Details regarding your purchase can be found below.")),
+            React.createElement(Grid_1.default, { item: true, sm: 6, xs: 12 },
+                React.createElement(ButtonRow_1.ActionButton, { id: "return-to-profile", variant: "outlined", style: { float: "right" }, color: "primary", label: "Return to profile", onClick: goToProfile }),
+                React.createElement(ButtonRow_1.ActionButton, { label: "Print Receipt", style: { float: "right" }, color: "primary", variant: "contained", onClick: printReceipt }))),
+        React.createElement(Card_1.default, { style: { height: "75vh" } },
+            React.createElement(CardContent_1.default, { style: { height: "100%" } },
+                React.createElement(Grid_1.default, { container: true, spacing: 16, style: { height: "100%" } },
+                    React.createElement(Grid_1.default, { item: true, xs: 12, style: { height: "100%" } },
+                        loading && React.createElement(LoadingOverlay_1.default, { id: "receipt-loading" }),
+                        React.createElement("iframe", { id: receiptContainerId, name: receiptContainerId, src: buildReceiptUrl(invoiceId), style: { height: "100%", width: "100%" }, onLoad: function () { return setLoading(false); }, frameBorder: 0 })))))));
 };
+exports.default = Receipt;
 
 
 /***/ }),
 
-/***/ "./src/ui/checkout/constants.ts":
-/*!**************************************!*\
-  !*** ./src/ui/checkout/constants.ts ***!
-  \**************************************/
+/***/ "./src/ui/checkout/cart.ts":
+/*!*********************************!*\
+  !*** ./src/ui/checkout/cart.ts ***!
+  \*********************************/
 /*! no static exports found */
 /***/ (function(module, exports, __webpack_require__) {
 
 "use strict";
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var Action;
-(function (Action) {
-    Action["StartAsyncRequest"] = "CHECKOUT/START_ASYNC_REQUEST";
-    Action["StopAsyncRequest"] = "CHECKOUT/STOP_ASYNC_REQUEST";
-    Action["GetClientTokenSuccess"] = "CHECKOUT/GET_CLIENT_TOKEN_SUCCESS";
-    Action["GetClientTokenFailure"] = "CHECKOUT/GET_CLIENT_TOKEN_FAILURE";
-    Action["StartTransactionRequest"] = "CHECKOUT/START_TRANSACTION";
-    Action["FinishTransactionFailure"] = "CHECKOUT/FINISH_TRANSACTION_FAILURE";
-    Action["FinishTransactionSuccess"] = "CHECKOUT/FINISH_TRANSACTION_SUCCESS";
-    Action["StageInvoicesForPayment"] = "CHECKOUT/STAGE_INVOICES_PAYMENT";
-    Action["ResetStagedInvoices"] = "CHECKOUT/RESET_STAGED_INVOICES";
-    Action["ResetStagedInvoice"] = "CHECKOUT/RESET_STAGED_INVOICE";
-})(Action = exports.Action || (exports.Action = {}));
-var formPrefix = "credit-card-form";
-exports.CreditCardFields = {
-    number: {
-        label: "Credit or debit card number",
-        name: formPrefix + "-cardNumber",
-        placeholder: "4111 1111 1111 1111",
-        validate: function (val) { return !!val; }
-    },
-    cvv: {
-        label: "Security code",
-        name: formPrefix + "-csv",
-        placeholder: "123"
-    },
-    expirationDate: {
-        label: "Expiration date",
-        name: formPrefix + "-expirationDate",
-        placeholder: "MM/YYYY"
-    },
-    postalCode: {
-        label: "Zipcode",
-        name: formPrefix + "-zipcode",
-        placeholder: "90210"
+var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+var react_redux_1 = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
+var CartAction;
+(function (CartAction) {
+    CartAction["AddToCart"] = "CART/ADD";
+    CartAction["RemoveFromCart"] = "CART/REMOVE";
+    CartAction["EmptyCart"] = "CART/EMPTY";
+})(CartAction = exports.CartAction || (exports.CartAction = {}));
+exports.isInvoiceSelection = function (item) { return item.hasOwnProperty("dueDate"); };
+var defaultState = {
+    item: undefined
+};
+var dispatchAction = function (dispatch) { return function (type, data) {
+    dispatch({ type: type, data: data });
+}; };
+exports.useEmptyCart = function () {
+    var dispatch = react_redux_1.useDispatch();
+    return function () { return dispatchAction(dispatch)(CartAction.EmptyCart); };
+};
+exports.useAddToCart = function () {
+    var dispatch = react_redux_1.useDispatch();
+    return function (item) { return dispatchAction(dispatch)(CartAction.AddToCart, item); };
+};
+exports.useRemoveFromCart = function () {
+    var dispatch = react_redux_1.useDispatch();
+    return function (item) { return dispatchAction(dispatch)(CartAction.RemoveFromCart, item); };
+};
+exports.useCartState = function () {
+    var getState = React.useCallback(function (state) { return state.cart; }, []);
+    return react_redux_1.useSelector(getState, react_redux_1.shallowEqual);
+};
+exports.cartReducer = function (state, action) {
+    if (state === void 0) { state = defaultState; }
+    switch (action.type) {
+        case CartAction.AddToCart:
+            return {
+                item: action.data
+            };
+        case CartAction.RemoveFromCart:
+            return {
+                item: {}
+            };
+        // TODO: Handle multiple itmes
+        // case CartAction.AddToCart:
+        //   return {
+        //     items: [...state.items, action.data]
+        //   };
+        // case CartAction.RemoveFromCart:
+        //   const identifer = action.data;
+        //   const newItems = state.items.filter(item => {
+        //     if (typeof identifer === "string") {
+        //       return item.id === identifer;
+        //     } else {
+        //       return item === identifer;
+        //     }
+        //   });
+        //   return { items: newItems };
+        case CartAction.EmptyCart:
+            return __assign({}, defaultState);
+        default:
+            return state;
     }
 };
 
@@ -182466,9 +182087,9 @@ var StatefulTable = function (_a) {
     }, [pageNum, setOrder, setOrderBy]);
     var onPageChange = React.useCallback(function (newPage) { return setPageNum(newPage); }, [setPageNum]);
     var onSelect = React.useCallback(function (id, selected) {
-        setSelectedIds(function (currentIds) {
-            var updatedIds = currentIds.slice();
-            var existingIndex = currentIds.indexOf(id);
+        if (Array.isArray(selectedIds)) {
+            var updatedIds = selectedIds.slice();
+            var existingIndex = selectedIds.indexOf(id);
             var alreadySelected = existingIndex > -1;
             if (selected && alreadySelected) {
                 return;
@@ -182479,25 +182100,29 @@ var StatefulTable = function (_a) {
             else {
                 updatedIds.push(id);
             }
-            return updatedIds;
-        });
-    }, [setSelectedIds]);
+            return setSelectedIds(updatedIds);
+        }
+        else {
+            return setSelectedIds(selected ? id : undefined);
+        }
+    }, [setSelectedIds, selectedIds]);
+    // SelectAll only works with lists of IDs
     var onSelectAll = React.useCallback(function () {
-        setSelectedIds(function (currIds) {
+        if (Array.isArray(selectedIds)) {
             var allIds = data.map(rowId);
-            if (currIds.length === allIds.length) {
-                return [];
+            if (selectedIds.length === allIds.length) {
+                setSelectedIds([]);
             }
             else {
-                return allIds;
+                setSelectedIds(allIds);
             }
-        });
+        }
     }, [setSelectedIds, data]);
     var onSearchEnter = React.useCallback(function (searchTerm) {
         setSearch(searchTerm);
         setPageNum(0);
     }, [setSearch, setPageNum]);
-    return (React.createElement(TableContainer_1.default, { id: id, title: title, loading: loading, data: data, error: error, totalItems: totalItems, selectedIds: selectedIds, pageNum: pageNum, columns: columns, order: order, orderBy: orderBy, onSort: onSort, rowId: rowId, onPageChange: onPageChange, onSelect: setSelectedIds && onSelect, onSelectAll: setSelectedIds && onSelectAll, onSearchEnter: renderSearch && onSearchEnter }));
+    return (React.createElement(TableContainer_1.default, { id: id, title: title, loading: loading, data: data, error: error, totalItems: totalItems, selectedIds: Array.isArray(selectedIds) ? selectedIds : [selectedIds], pageNum: pageNum, columns: columns, order: order, orderBy: orderBy, onSort: onSort, rowId: rowId, onPageChange: onPageChange, onSelect: setSelectedIds && onSelect, onSelectAll: Array.isArray(selectedIds) && setSelectedIds && onSelectAll, onSearchEnter: renderSearch && onSearchEnter }));
 };
 function default_1(props) {
     return React.createElement(StatefulTable, __assign({}, props));
@@ -184636,60 +184261,24 @@ exports.default = InvoiceForm;
 
 "use strict";
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-var react_redux_1 = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
-var connected_react_router_1 = __webpack_require__(/*! connected-react-router */ "./node_modules/connected-react-router/esm/index.js");
+var use_react_router_1 = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
 var constants_1 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-var constants_2 = __webpack_require__(/*! ui/checkout/constants */ "./src/ui/checkout/constants.ts");
+var cart_1 = __webpack_require__(/*! ui/checkout/cart */ "./src/ui/checkout/cart.ts");
 var InvoicesTable_1 = __webpack_require__(/*! ./InvoicesTable */ "./src/ui/invoice/InvoicesTable.tsx");
-var InvoicesListComponent = /** @class */ (function (_super) {
-    __extends(InvoicesListComponent, _super);
-    function InvoicesListComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.goToCheckout = function (selectedInvoices) {
-            var _a = _this.props, resetStagedInvoices = _a.resetStagedInvoices, stageInvoices = _a.stageInvoices, goToCheckout = _a.goToCheckout;
-            var mappedInvoices = selectedInvoices.reduce(function (mapped, invoice) {
-                mapped[invoice.id] = invoice;
-                return mapped;
-            }, {});
-            resetStagedInvoices();
-            stageInvoices(mappedInvoices);
-            goToCheckout();
-        };
-        return _this;
-    }
-    InvoicesListComponent.prototype.render = function () {
-        return (React.createElement(InvoicesTable_1.default, { stageInvoices: this.goToCheckout }));
-    };
-    return InvoicesListComponent;
-}(React.Component));
-var mapDispatchToProps = function (dispatch) {
-    return {
-        resetStagedInvoices: function () { return dispatch({
-            type: constants_2.Action.ResetStagedInvoices
-        }); },
-        stageInvoices: function (invoices) { return dispatch({
-            type: constants_2.Action.StageInvoicesForPayment,
-            data: invoices
-        }); },
-        goToCheckout: function () { return dispatch(connected_react_router_1.push(constants_1.Routing.Checkout)); },
-    };
+var InvoicesList = function () {
+    var history = use_react_router_1.default().history;
+    var resetCart = cart_1.useEmptyCart();
+    var addToCart = cart_1.useAddToCart();
+    var goToCheckout = React.useCallback(function (selectedInvoice) {
+        resetCart();
+        addToCart(selectedInvoice);
+        history.push(constants_1.Routing.Checkout);
+    }, [resetCart, addToCart, history]);
+    return React.createElement(InvoicesTable_1.default, { stageInvoice: goToCheckout });
 };
-exports.default = react_redux_1.connect(null, mapDispatchToProps)(InvoicesListComponent);
+exports.default = InvoicesList;
 
 
 /***/ }),
@@ -184801,46 +184390,37 @@ var getFields = function (memberId, isAdmin, onSuccess) { return __spreadArrays(
     }
 ]); };
 var InvoicesTable = function (_a) {
-    var stageInvoices = _a.stageInvoices;
+    var stageInvoice = _a.stageInvoice;
     var memberId = use_react_router_1.default().match.params.memberId;
     var _b = hooks_1.useAuthState().currentUser, isAdmin = _b.isAdmin, currentUserId = _b.id;
     var _c = StatefulTable_1.useQueryState(), queryParams = _c[0], setQueryState = _c[1];
-    var _d = React.useState([]), selectedIds = _d[0], setSelectedIds = _d[1];
+    var _d = React.useState(), selectedInvoice = _d[0], setSelectedInvoice = _d[1];
     var refreshMember = useReadTransaction_1.default(makerspace_ts_api_client_1.getMember, memberId).refresh;
     var _e = useReadTransaction_1.default(isAdmin ? makerspace_ts_api_client_1.adminListInvoices : makerspace_ts_api_client_1.listInvoices, __assign({ resourceId: memberId }, queryParams)), isRequesting = _e.isRequesting, error = _e.error, _f = _e.data, data = _f === void 0 ? [] : _f, response = _e.response, refresh = _e.refresh;
     React.useEffect(function () {
         if (Array.isArray(data) && data.length) {
-            setSelectedIds(data.reduce(function (selected, invoice) {
-                if (invoice.memberId === currentUserId && utils_1.isInvoicePayable(invoice)) {
-                    selected.push(invoice.id);
-                }
-                return selected;
-            }, []));
+            var newSelection = data.find(function (invoice) { return (invoice.memberId === currentUserId && utils_1.isInvoicePayable(invoice)); });
+            setSelectedInvoice(newSelection);
         }
-    }, [JSON.stringify(data), setSelectedIds]);
+    }, [JSON.stringify(data), setSelectedInvoice]);
+    var setSelected = React.useCallback(function (id) {
+        setSelectedInvoice(data.find(function (invoice) { return invoice.id === id; }));
+    }, [setSelectedInvoice, data]);
     var onSuccess = React.useCallback(function () {
         refreshMember();
         refresh();
     }, [refresh, refreshMember]);
     var rowId = React.useCallback(function (invoice) { return invoice.id; }, []);
     var fields = getFields(memberId, isAdmin, onSuccess);
-    var selectedInvoices = React.useMemo(function () {
-        return data.reduce(function (selectedInvoice, invoice) {
-            if (selectedIds.includes(invoice.id)) {
-                selectedInvoice.push(invoice);
-            }
-            return selectedInvoice;
-        }, []);
-    }, [data, selectedIds]);
     var viewingOwnInvoices = memberId === currentUserId;
-    var payNow = viewingOwnInvoices && selectedInvoices.length && selectedInvoices.every(function (invoice) { return utils_1.isInvoicePayable(invoice); });
-    var goToCheckout = React.useCallback(function () { return stageInvoices(selectedInvoices); }, [selectedInvoices, stageInvoices]);
+    var payNow = viewingOwnInvoices && utils_1.isInvoicePayable(selectedInvoice);
+    var goToCheckout = React.useCallback(function () { return stageInvoice(selectedInvoice); }, [selectedInvoice, stageInvoice]);
     return (React.createElement(React.Fragment, null,
         isAdmin && (React.createElement(React.Fragment, null,
             React.createElement(CreateInvoiceModal_1.default, { memberId: memberId, onSuccess: onSuccess }),
-            React.createElement(DeleteInvoiceModal_1.default, { invoice: selectedInvoices.length === 1 && selectedInvoices[0], onSuccess: onSuccess }))),
+            React.createElement(DeleteInvoiceModal_1.default, { invoice: selectedInvoice, onSuccess: onSuccess }))),
         viewingOwnInvoices && (React.createElement(ButtonRow_1.ActionButton, { id: "invoices-list-payNow", style: { float: "right" }, variant: "contained", color: "primary", disabled: !payNow, onClick: goToCheckout, label: "Pay Selected Dues" })),
-        React.createElement(StatefulTable_1.default, { id: "invoices-table", title: "Dues", loading: isRequesting, data: data, error: error, queryParams: queryParams, setQuery: setQueryState, columns: fields, rowId: rowId, totalItems: extractTotalItems_1.default(response), selectedIds: selectedIds, setSelectedIds: setSelectedIds })));
+        React.createElement(StatefulTable_1.default, { id: "invoices-table", title: "Dues", loading: isRequesting, data: data, error: error, queryParams: queryParams, setQuery: setQueryState, columns: fields, rowId: rowId, totalItems: extractTotalItems_1.default(response), selectedIds: selectedInvoice && selectedInvoice.id, setSelectedIds: setSelected })));
 };
 exports.default = InvoicesTable;
 
@@ -186702,6 +186282,54 @@ var ChangePaymentMethodModal = function (_a) {
 exports.default = ChangePaymentMethodModal;
 
 
+/***/ }),
+
+/***/ "./src/ui/membership/DuplicateInvoiceModal.tsx":
+/*!*****************************************************!*\
+  !*** ./src/ui/membership/DuplicateInvoiceModal.tsx ***!
+  \*****************************************************/
+/*! no static exports found */
+/***/ (function(module, exports, __webpack_require__) {
+
+"use strict";
+
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+var use_react_router_1 = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+var Grid_1 = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+var makerspace_ts_api_client_1 = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+var useReadTransaction_1 = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
+var utils_1 = __webpack_require__(/*! ../invoice/utils */ "./src/ui/invoice/utils.ts");
+var FormModal_1 = __webpack_require__(/*! ../common/FormModal */ "./src/ui/common/FormModal.tsx");
+var utils_2 = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
+var hooks_1 = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+var DuplicateInvoiceModal = function (_a) {
+    var type = _a.type;
+    var _b = useReadTransaction_1.default(makerspace_ts_api_client_1.listInvoices).data, invoices = _b === void 0 ? [] : _b;
+    var currentUserId = hooks_1.useAuthState().currentUser.id;
+    var _c = React.useState(), outstandingInvoice = _c[0], setOutstandingInvoice = _c[1];
+    var history = use_react_router_1.default().history;
+    var goToProfile = React.useCallback(function () { return history.push(utils_2.buildProfileRouting(currentUserId)); }, [history, currentUserId]);
+    React.useEffect(function () {
+        var outstandingInvoiceOfType = invoices.find(function (invoice) { return utils_1.isInvoicePayable(invoice) && invoice.resourceClass === type; });
+        setOutstandingInvoice(outstandingInvoiceOfType);
+    }, [invoices, setOutstandingInvoice, type]);
+    if (!outstandingInvoice) {
+        return null;
+    }
+    return (React.createElement(FormModal_1.default, { id: "outstanding-invoice", onSubmit: goToProfile, closeHandler: function () { return setOutstandingInvoice(undefined); }, cancelText: "Ignore", submitText: "View Dues", title: "Existing Dues Found", isOpen: true },
+        React.createElement(Grid_1.default, { container: true, spacing: 16 },
+            React.createElement(Grid_1.default, { 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.createElement(Grid_1.default, { item: true, xs: 12 },
+                "If you're having trouble with your dues, please don't hesitate to ",
+                React.createElement("a", { href: "mailto:contact@manchestermakerspace.org" }, "contact us"),
+                "."))));
+};
+exports.default = DuplicateInvoiceModal;
+
+
 /***/ }),
 
 /***/ "./src/ui/membership/MembershipSelectForm.tsx":
@@ -186713,139 +186341,114 @@ exports.default = ChangePaymentMethodModal;
 
 "use strict";
 
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = __webpack_require__(/*! react */ "./node_modules/react/index.js");
-var react_redux_1 = __webpack_require__(/*! react-redux */ "./node_modules/react-redux/es/index.js");
-var isUndefined_1 = __webpack_require__(/*! lodash-es/isUndefined */ "./node_modules/lodash-es/isUndefined.js");
+var use_react_router_1 = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
 var Button_1 = __webpack_require__(/*! @material-ui/core/Button */ "./node_modules/@material-ui/core/Button/index.js");
 var FormControlLabel_1 = __webpack_require__(/*! @material-ui/core/FormControlLabel */ "./node_modules/@material-ui/core/FormControlLabel/index.js");
 var Checkbox_1 = __webpack_require__(/*! @material-ui/core/Checkbox */ "./node_modules/@material-ui/core/Checkbox/index.js");
+var makerspace_ts_api_client_1 = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
 var invoice_1 = __webpack_require__(/*! app/entities/invoice */ "./src/app/entities/invoice.ts");
 var ErrorMessage_1 = __webpack_require__(/*! ui/common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
 var TableContainer_1 = __webpack_require__(/*! ui/common/table/TableContainer */ "./src/ui/common/table/TableContainer.tsx");
 var numberAsCurrency_1 = __webpack_require__(/*! ui/utils/numberAsCurrency */ "./src/ui/utils/numberAsCurrency.ts");
-var actions_1 = __webpack_require__(/*! ui/billing/actions */ "./src/ui/billing/actions.ts");
-var constants_1 = __webpack_require__(/*! ui/billing/constants */ "./src/ui/billing/constants.ts");
-var MembershipSelectComponent = /** @class */ (function (_super) {
-    __extends(MembershipSelectComponent, _super);
-    function MembershipSelectComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.selectMembershipOption = function (event) {
-            var discountId = _this.props.discountId;
-            var optionId = event.currentTarget.id;
-            var option = _this.getOption(optionId);
-            var optionDiscount;
-            if (discountId) {
-                // Only want to update discount if already selected
-                optionDiscount = option.discountId;
-            }
-            _this.props.selectMembershipOption(optionId, optionDiscount);
-            _this.props.onSelect && _this.props.onSelect(optionId, optionDiscount);
-        };
-        _this.getOption = function (id) { return _this.props.membershipOptions[id]; };
-        _this.rowId = function (row) { return row.id; };
-        _this.membershipColumns = [
-            {
-                id: "name",
-                label: "Name",
-                cell: function (row) { return row.name; }
-            },
-            {
-                id: "description",
-                label: "Description",
-                cell: function (row) { return row.description; }
-            },
-            {
-                id: "amount",
-                label: "Amount",
-                cell: function (row) { return numberAsCurrency_1.numberAsCurrency(row.amount); }
-            },
-            {
-                id: "select",
-                label: "",
-                cell: function (row) {
-                    var selected = _this.props.membershipOptionId === row.id;
-                    var variant = selected ? "contained" : "outlined";
-                    var label = selected ? "Selected" : "Select";
-                    return (React.createElement(Button_1.default, { id: row.id, variant: variant, color: "primary", onClick: _this.selectMembershipOption }, label));
-                }
-            }
-        ];
-        _this.toggleDiscount = function (_event, checked) {
-            var _a = _this.props, membershipOptionId = _a.membershipOptionId, membershipOptions = _a.membershipOptions, selectMembershipOption = _a.selectMembershipOption;
-            var discountId;
-            if (checked) {
-                // Apply discount
-                if (membershipOptionId) {
-                    // If option is already selected, find related discount and apply
-                    var membershipOption = membershipOptions[membershipOptionId];
-                    discountId = membershipOption.discountId;
-                }
-                else {
-                    // Otherwise just make it truthy to be updated when membership is actually selected
-                    discountId = "apply";
-                }
-            }
-            selectMembershipOption(membershipOptionId, discountId);
-        };
-        _this.byAmount = function (a, b) { return Number(a.amount) - Number(b.amount); };
-        return _this;
-    }
-    MembershipSelectComponent.prototype.componentDidMount = function () {
-        this.props.getMembershipOptions();
-    };
-    MembershipSelectComponent.prototype.render = function () {
-        var _a = this.props, membershipOptions = _a.membershipOptions, invoiceOptionsError = _a.invoiceOptionsError, invoiceOptionsLoading = _a.invoiceOptionsLoading, discountId = _a.discountId;
-        var normalizedError = (invoiceOptionsError && (React.createElement(React.Fragment, null,
-            "Error reading membership options: ",
-            invoiceOptionsError,
-            ". Email",
-            " ",
-            React.createElement("a", { href: "mailto: contact@manchestermakerspace.org" }, "contact@manchestermakerspace.org"),
-            " if your desired membership option is not present")));
-        return (React.createElement(React.Fragment, null,
-            React.createElement(TableContainer_1.default, { id: "membership-select-table", title: isUndefined_1.default(this.props.title) && "Select a Membership", data: Object.values(membershipOptions).sort(this.byAmount), columns: this.membershipColumns, rowId: this.rowId, loading: invoiceOptionsLoading }),
-            React.createElement(FormControlLabel_1.default, { control: React.createElement(Checkbox_1.default, { name: "discount-select", value: "discount-select", checked: !!discountId, onChange: this.toggleDiscount, color: "default" }), label: "Apply 10% Discount for all student, senior (+65) and military. Proof of applicable affiliation may be required during orientation." }),
-            React.createElement(ErrorMessage_1.default, { error: normalizedError })));
-    };
-    return MembershipSelectComponent;
-}(React.Component));
-var mapStateToProps = function (state, _ownProps) {
-    var _a = state.billing, membershipOptions = _a.entities, selectedOption = _a.selectedOption, _b = _a.read, invoiceOptionsLoading = _b.isRequesting, invoiceOptionsError = _b.error;
-    var discountId = selectedOption && selectedOption.discountId;
-    var membershipOptionId = selectedOption && selectedOption.id;
-    return {
-        membershipOptions: membershipOptions,
-        invoiceOptionsLoading: invoiceOptionsLoading,
-        invoiceOptionsError: invoiceOptionsError,
-        membershipOptionId: membershipOptionId,
-        discountId: discountId,
-    };
-};
-var mapDispatchToProps = function (dispatch, ownProps) {
-    var subscriptionOnly = ownProps.subscriptionOnly;
-    return {
-        getMembershipOptions: function () { return dispatch(actions_1.readOptionsAction({ subscriptionOnly: subscriptionOnly, types: [invoice_1.InvoiceableResource.Membership] })); },
-        selectMembershipOption: function (membershipOptionId, discountId) { return dispatch({
-            type: constants_1.Action.SelectOption,
-            data: { id: membershipOptionId, discountId: discountId }
-        }); }
-    };
+var useReadTransaction_1 = __webpack_require__(/*! ../hooks/useReadTransaction */ "./src/ui/hooks/useReadTransaction.ts");
+var DuplicateInvoiceModal_1 = __webpack_require__(/*! ./DuplicateInvoiceModal */ "./src/ui/membership/DuplicateInvoiceModal.tsx");
+exports.invoiceOptionParam = "optionId";
+exports.discountParam = "discountId";
+var byAmount = function (a, b) { return Number(a.amount) - Number(b.amount); };
+var MembershipSelect = function (_a) {
+    var onSelect = _a.onSelect, allowNone = _a.allowNone, title = _a.title;
+    var _b = use_react_router_1.default(), history = _b.history, search = _b.location.search;
+    var _c = React.useState(), selectedOption = _c[0], setSelectedOption = _c[1];
+    var searchParams = React.useMemo(function () { return new URLSearchParams(search); }, [search]);
+    var _d = React.useMemo(function () {
+        var membershipOptionId = searchParams.get(exports.invoiceOptionParam);
+        var discountId = searchParams.get(exports.discountParam);
+        return { membershipOptionId: membershipOptionId, discountId: discountId };
+    }, [search, searchParams]), membershipOptionId = _d.membershipOptionId, discountId = _d.discountId;
+    var _e = useReadTransaction_1.default(makerspace_ts_api_client_1.listInvoiceOptions, { types: [invoice_1.InvoiceableResource.Membership] }), isRequesting = _e.isRequesting, error = _e.error, _f = _e.data, options = _f === void 0 ? [] : _f;
+    // Select bookmarked option on load
+    React.useEffect(function () {
+        if (options.length) {
+            var option = (options || []).find(function (option) { return option.id === membershipOptionId; });
+            setSelectedOption(option);
+        }
+    }, [membershipOptionId, setSelectedOption, options]);
+    var allOptions = React.useMemo(function () {
+        return options.sort(byAmount)
+            .concat(allowNone ? [{
+                id: "none",
+                name: "None",
+                description: "Paid with cash or select an option later",
+                amount: "0",
+                resourceClass: undefined,
+                quantity: 0,
+                disabled: false,
+                operation: undefined,
+            }] : []);
+    }, [allowNone, options]);
+    var updateSelection = React.useCallback(function (optionId, discountId) {
+        var option = (options || []).find(function (option) { return option.id === optionId; });
+        setSelectedOption(option);
+        optionId ? searchParams.set(exports.invoiceOptionParam, optionId) : searchParams.delete(exports.invoiceOptionParam);
+        discountId ? searchParams.set(exports.discountParam, discountId) : searchParams.delete(exports.discountParam);
+        history.push({
+            search: searchParams.toString()
+        });
+        onSelect && onSelect(option, discountId);
+    }, [onSelect, options, history, searchParams]);
+    // Add option and discount IDs to query params
+    var selectMembershipOption = React.useCallback(function (event) {
+        var optionId = event.currentTarget.id;
+        var option = (options || []).find(function (option) { return option.id === optionId; });
+        updateSelection(optionId, discountId ? option.discountId : undefined);
+    }, [updateSelection, discountId, options]);
+    // Add or remove discount ID from query params
+    var toggleDiscount = React.useCallback(function (_event, checked) {
+        updateSelection(membershipOptionId, checked ? (membershipOptionId || "apply") : undefined);
+    }, [updateSelection, membershipOptionId]);
+    var fields = React.useMemo(function () { return [
+        {
+            id: "name",
+            label: "Name",
+            cell: function (row) { return row.name; }
+        },
+        {
+            id: "description",
+            label: "Description",
+            cell: function (row) { return row.description; }
+        },
+        {
+            id: "amount",
+            label: "Amount",
+            cell: function (row) { return numberAsCurrency_1.numberAsCurrency(row.amount); }
+        },
+        {
+            id: "select",
+            label: "",
+            cell: function (row) {
+                var selected = membershipOptionId === row.id;
+                var variant = selected ? "contained" : "outlined";
+                var label = selected ? "Selected" : "Select";
+                return (React.createElement(Button_1.default, { id: row.id, variant: variant, color: "primary", onClick: selectMembershipOption }, label));
+            }
+        }
+    ]; }, [selectMembershipOption, membershipOptionId]);
+    var normalizedError = (error && (React.createElement(React.Fragment, null,
+        "Error reading membership options: ",
+        error,
+        ". Email",
+        " ",
+        React.createElement("a", { href: "mailto: contact@manchestermakerspace.org" }, "contact@manchestermakerspace.org"),
+        " if your desired membership option is not present")));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(DuplicateInvoiceModal_1.default, { type: selectedOption && selectedOption.resourceClass }),
+        React.createElement(TableContainer_1.default, { id: "membership-select-table", title: typeof title === undefined && "Select a Membership", data: allOptions, columns: fields, rowId: function (row) { return row.id; }, loading: isRequesting }),
+        React.createElement(FormControlLabel_1.default, { control: React.createElement(Checkbox_1.default, { name: "discount-select", value: "discount-select", checked: !!discountId, onChange: toggleDiscount, color: "default" }), label: "Apply 10% Discount for all student, senior (+65) and military. Proof of applicable affiliation may be required during orientation." }),
+        React.createElement(ErrorMessage_1.default, { error: normalizedError })));
 };
-exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(MembershipSelectComponent);
+exports.default = MembershipSelect;
 
 
 /***/ }),
@@ -186859,6 +186462,17 @@ exports.default = react_redux_1.connect(mapStateToProps, mapDispatchToProps)(Mem
 
 "use strict";
 
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
     function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
     return new (P || (P = Promise))(function (resolve, reject) {
@@ -186908,42 +186522,40 @@ var MemberStatusLabel_1 = __webpack_require__(/*! ui/member/MemberStatusLabel */
 var constants_1 = __webpack_require__(/*! ui/membership/constants */ "./src/ui/membership/constants.ts");
 var constants_2 = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
 var FormModal_1 = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
-var makerspace_ts_api_client_1 = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
 var useModal_1 = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
-var hooks_1 = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-var useWriteTransaction_1 = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
-var constants_3 = __webpack_require__(/*! ../checkout/constants */ "./src/ui/checkout/constants.ts");
+var cart_1 = __webpack_require__(/*! ui/checkout/cart */ "./src/ui/checkout/cart.ts");
 /**
  * Component for when a member is viewing membership details but they don't have a subscription yet
  */
 var NoSubscriptionDetails = function (_a) {
     var member = _a.member;
     var _b = useModal_1.default(), isOpen = _b.isOpen, openModal = _b.openModal, closeModal = _b.closeModal;
-    var selectedOption = hooks_1.useBillingState()[0].selectedOption;
-    var _c = React.useState(selectedOption), option = _c[0], setOption = _c[1];
-    var _d = hooks_1.useCheckoutState(), _ = _d[0], dispatch = _d[1];
+    var _c = React.useState(), option = _c[0], setOption = _c[1];
+    var _d = React.useState(), error = _d[0], setError = _d[1];
     var history = use_react_router_1.default().history;
-    var _e = useWriteTransaction_1.default(makerspace_ts_api_client_1.createInvoice, function (_a) {
-        var response = _a.response;
-        dispatch({
-            type: constants_3.Action.StageInvoicesForPayment,
-            data: [response.data]
-        });
-        history.push(constants_2.Routing.Checkout);
-    }), call = _e.call, isRequesting = _e.isRequesting, error = _e.error;
-    var onSelect = React.useCallback(function (id, discountId) {
-        setOption({ id: id, discountId: discountId });
+    var resetCart = cart_1.useEmptyCart();
+    var addToCart = cart_1.useAddToCart();
+    var onSelect = React.useCallback(function (option, discountId) {
+        setOption(__assign(__assign({}, option), discountId && { discountId: discountId }));
+        setError("");
     }, [setOption]);
     var onSubmit = React.useCallback(function () { return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
-            call(option);
+            if (option) {
+                resetCart();
+                addToCart(option);
+                history.push(constants_2.Routing.Checkout);
+            }
+            else {
+                setError("Select an option to continue");
+            }
             return [2 /*return*/];
         });
-    }); }, [option, call]);
+    }); }, [option]);
     var details = constants_1.getDetailsForMember(member);
     return (React.createElement(React.Fragment, null,
-        isOpen && (React.createElement(FormModal_1.default, { id: "select-membership", fullScreen: true, isOpen: isOpen, closeHandler: closeModal, onSubmit: onSubmit, loading: isRequesting, error: error },
-            React.createElement(MembershipSelectForm_1.default, { subscriptionOnly: true, onSelect: onSelect }))),
+        isOpen && (React.createElement(FormModal_1.default, { id: "select-membership", fullScreen: true, isOpen: isOpen, closeHandler: closeModal, onSubmit: onSubmit, error: error },
+            React.createElement(MembershipSelectForm_1.default, { allowNone: false, onSelect: onSelect }))),
         React.createElement(Grid_1.default, { container: true, spacing: 16 },
             React.createElement(Grid_1.default, { item: true, xs: 12 },
                 React.createElement(KeyValueItem_1.default, { label: "Membership Expiration" },
@@ -187142,27 +186754,28 @@ var actions_3 = __webpack_require__(/*! ui/rentals/actions */ "./src/ui/rentals/
 var actions_4 = __webpack_require__(/*! ui/billing/actions */ "./src/ui/billing/actions.ts");
 var actions_5 = __webpack_require__(/*! ui/subscriptions/actions */ "./src/ui/subscriptions/actions.ts");
 var actions_6 = __webpack_require__(/*! ui/member/actions */ "./src/ui/member/actions.ts");
-var actions_7 = __webpack_require__(/*! ui/checkout/actions */ "./src/ui/checkout/actions.ts");
-var actions_8 = __webpack_require__(/*! ui/earnedMemberships/actions */ "./src/ui/earnedMemberships/actions.ts");
-var actions_9 = __webpack_require__(/*! ui/transactions/actions */ "./src/ui/transactions/actions.ts");
+var actions_7 = __webpack_require__(/*! ui/earnedMemberships/actions */ "./src/ui/earnedMemberships/actions.ts");
+var actions_8 = __webpack_require__(/*! ui/transactions/actions */ "./src/ui/transactions/actions.ts");
+var cart_1 = __webpack_require__(/*! ./checkout/cart */ "./src/ui/checkout/cart.ts");
 exports.getRootReducer = function (history) { return redux_1.combineReducers({
     router: connected_react_router_1.connectRouter(history),
     base: baseReducer,
     auth: actions_1.authReducer,
+    cart: cart_1.cartReducer,
     members: actions_2.membersReducer,
     member: actions_6.memberReducer,
     rentals: actions_3.rentalsReducer,
     billing: actions_4.billingReducer,
     subscriptions: actions_5.subscriptionsReducer,
-    checkout: actions_7.checkoutReducer,
-    earnedMemberships: actions_8.earnedMembershipsReducer,
-    transactions: actions_9.transactionsReducer,
+    earnedMemberships: actions_7.earnedMembershipsReducer,
+    transactions: actions_8.transactionsReducer,
 }); };
 var TransactionAction;
 (function (TransactionAction) {
     TransactionAction["Start"] = "start";
     TransactionAction["Success"] = "success";
     TransactionAction["Failure"] = "failure";
+    TransactionAction["Reset"] = "reset";
 })(TransactionAction = exports.TransactionAction || (exports.TransactionAction = {}));
 var baseReducer = function (state, action) {
     var _a, _b, _c;
@@ -187181,6 +186794,8 @@ var baseReducer = function (state, action) {
             var error = action.error;
             key = action.key;
             return __assign(__assign({}, state), (_c = {}, _c[key] = __assign(__assign({}, state[key]), { error: error, isRequesting: false }), _c));
+        case TransactionAction.Reset:
+            return __assign({}, state);
         default:
             return state;
     }
@@ -187245,16 +186860,6 @@ exports.useAuthState = function () {
     var getState = React.useCallback(function (state) { return state.auth; }, []);
     return react_redux_1.useSelector(getState, react_redux_1.shallowEqual);
 };
-exports.useBillingState = function () {
-    var dispatch = react_redux_1.useDispatch();
-    var getState = React.useCallback(function (state) { return state.billing; }, []);
-    return [react_redux_1.useSelector(getState, react_redux_1.shallowEqual), dispatch];
-};
-exports.useCheckoutState = function () {
-    var dispatch = react_redux_1.useDispatch();
-    var getState = React.useCallback(function (state) { return state.checkout; }, []);
-    return [react_redux_1.useSelector(getState, react_redux_1.shallowEqual), dispatch];
-};
 exports.useApiState = function (reducerKey) {
     var dispatch = react_redux_1.useDispatch();
     var dispatchApi = React.useCallback(function (action) {