makerspace-react-rails 0.7.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e309b7fcef47c2447fdcdbc33bfd980a7b9dbb0fce2baecd0e70e8a5803d3892
-  data.tar.gz: d9e92409c628eb6d2f3fa768fa25dd70200dc924510b476f6e559a588493dbfc
+  metadata.gz: 7a4050e159dcbc05f8ed8c25e6618748174cc594e84469b2efd8f08356622381
+  data.tar.gz: d86dd0039e0dea934472bbf76f0ac49a94bc443ac2a385a7d0816313aecbe260
 SHA512:
-  metadata.gz: 349c3e993ff4470bc9804f4c36e3a6e6ab8a59a351b033615fd6518b290f4a2d1b0d0c9963d49f3ae28fb90299ffa030e4674fd9fe5690134fb03208b0b56b78
-  data.tar.gz: 509e8851d69c94412dad5cd2f641c7287344c6f3391eb94abdad03bd8c200c04994cf0fb952b230856e4dddcd2dadc8097972d93712069082b3570142704ae37
+  metadata.gz: 1d799987bbca40babc3027632c3d6e49034fa34f248d1721e96cc36a6b9f0fea529af532e5c7c0877e19c3a5caf6e33f8f27597b1044349226c1b1fb0b71ef4c
+  data.tar.gz: cb9095578f7c004b50e1abad7941a13da61c60afa720c262285d5c669c8b7bab172f52928e7667db20e2cacc54d039635a2504c9f171114e380bfd9df339baac

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

@@ -1,7 +1,7 @@
 module Makerspace
   module React
     module Rails
-      VERSION = "0.7.0"
+      VERSION = "0.8.0"
     end
   end
 end

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

@@ -190517,12 +190517,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var ui_common_FormModal__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
 /* harmony import */ var _cart__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ./cart */ "./src/ui/checkout/cart.ts");
 /* harmony import */ var _hooks_useModal__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ../hooks/useModal */ "./src/ui/hooks/useModal.ts");
-/* harmony import */ var _member_utils__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
-/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
-/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
-/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
-/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_19___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_19__);
+/* harmony import */ var app_constants__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__(/*! app/constants */ "./src/app/constants.ts");
+/* harmony import */ var _hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! ../hooks/useWriteTransaction */ "./src/ui/hooks/useWriteTransaction.ts");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! makerspace-ts-api-client */ "./node_modules/makerspace-ts-api-client/dist/apiClient.js");
+/* harmony import */ var makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_17___default = /*#__PURE__*/__webpack_require__.n(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_17__);
+/* harmony import */ var ui_checkout_SubscriptionAuthorizationModal__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__(/*! ui/checkout/SubscriptionAuthorizationModal */ "./src/ui/checkout/SubscriptionAuthorizationModal.tsx");
+/* harmony import */ var _PaymentMethod__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__(/*! ./PaymentMethod */ "./src/ui/checkout/PaymentMethod.tsx");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -190565,7 +190565,7 @@ const renderAmount = item => {
 };
 
 const CartList = ({
-  paymentMethodId
+  paymentMethod
 }) => {
   const {
     item
@@ -190574,16 +190574,10 @@ const CartList = ({
     history
   } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
   const {
-    currentUser: {
-      id: currentUserId
-    }
-  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_16__["useAuthState"])();
-  const emptyCart = Object(_cart__WEBPACK_IMPORTED_MODULE_13__["useEmptyCart"])(); // Redirect to profile if theres nothing in the cart
-
-  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
-    !item && history.push(Object(_member_utils__WEBPACK_IMPORTED_MODULE_15__["buildProfileRouting"])(currentUserId));
-    return emptyCart;
-  }, []);
+    isOpen: subscriptionAuthOpen,
+    openModal: openSubscriptionAuth,
+    closeModal: closeSubscriptionAuth
+  } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_14__["default"])();
   const onSuccess = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](({
     response: {
       data: transaction
@@ -190592,7 +190586,7 @@ const CartList = ({
     const invoiceId = transaction && transaction.invoice.id;
 
     if (invoiceId) {
-      history.push(`${app_constants__WEBPACK_IMPORTED_MODULE_17__["Routing"].Receipt.replace(app_constants__WEBPACK_IMPORTED_MODULE_17__["Routing"].PathPlaceholder.InvoiceId, invoiceId)}`);
+      history.push(`${app_constants__WEBPACK_IMPORTED_MODULE_15__["Routing"].Receipt.replace(app_constants__WEBPACK_IMPORTED_MODULE_15__["Routing"].PathPlaceholder.InvoiceId, invoiceId)}`);
     }
   }, [history]);
   const {
@@ -190600,7 +190594,7 @@ const CartList = ({
     isRequesting,
     error,
     reset
-  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_18__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_19__["createTransaction"], onSuccess);
+  } = Object(_hooks_useWriteTransaction__WEBPACK_IMPORTED_MODULE_16__["default"])(makerspace_ts_api_client__WEBPACK_IMPORTED_MODULE_17__["createTransaction"], onSuccess);
   const {
     isOpen: errorIsOpen,
     openModal,
@@ -190613,7 +190607,7 @@ const CartList = ({
 
   react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
     !isRequesting && error && openModal();
-  }, [isRequesting, error, openModal]);
+  }, [isRequesting, error]);
   const getFields = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](withError => [{
     id: "name",
     label: "Name",
@@ -190638,7 +190632,7 @@ const CartList = ({
     }
   }] : [])], [error]);
   const submitPayment = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
-    if (!paymentMethodId) {
+    if (!paymentMethod) {
       return;
     }
 
@@ -190650,10 +190644,14 @@ const CartList = ({
       }, item.discountId && {
         discountId: item.discountId
       }), {
-        paymentMethodId
+        paymentMethodId: paymentMethod.id
       })
     });
-  }, [call, item, paymentMethodId]);
+  }, [call, item, paymentMethod]);
+  const onSubscriptionAuthConfirm = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    submitPayment();
+    closeSubscriptionAuth();
+  }, [closeSubscriptionAuth, submitPayment]);
 
   if (!item) {
     return null;
@@ -190686,6 +190684,12 @@ const CartList = ({
     variant: "h6",
     color: "inherit"
   }, "Total ", renderAmount(item))), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    item: true,
+    xs: 12,
+    style: {
+      marginBottom: "1rem"
+    }
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_PaymentMethod__WEBPACK_IMPORTED_MODULE_19__["default"], paymentMethod)), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
     item: true,
     xs: 12,
     style: {
@@ -190694,8 +190698,9 @@ const CartList = ({
   }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_4___default.a, {
     id: "submit-payment-button",
     variant: "contained",
-    disabled: !paymentMethodId,
-    onClick: submitPayment
+    color: "primary",
+    disabled: !paymentMethod,
+    onClick: item.planId ? openSubscriptionAuth : submitPayment
   }, "Submit Payment"))), isRequesting && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_LoadingOverlay__WEBPACK_IMPORTED_MODULE_11__["default"], {
     id: "checkout-submitting-overlay"
   }))), errorIsOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_FormModal__WEBPACK_IMPORTED_MODULE_12__["default"], {
@@ -190720,7 +190725,10 @@ const CartList = ({
     data: item ? [item] : [],
     columns: getFields(true),
     rowId: getCartId
-  })))));
+  })))), subscriptionAuthOpen && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_checkout_SubscriptionAuthorizationModal__WEBPACK_IMPORTED_MODULE_18__["default"], {
+    onConfirm: onSubscriptionAuthConfirm,
+    item: item
+  }));
 };
 
 /* harmony default export */ __webpack_exports__["default"] = (CartList);
@@ -190738,14 +190746,34 @@ const CartList = ({
 __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
 /* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
-/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1__);
-/* harmony import */ var _material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
-/* harmony import */ var _material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2__);
-/* harmony import */ var _material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
-/* harmony import */ var _material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3__);
-/* harmony import */ var ui_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ui/checkout/PaymentMethodsContainer */ "./src/ui/checkout/PaymentMethodsContainer.tsx");
-/* harmony import */ var _CartList__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./CartList */ "./src/ui/checkout/CartList.tsx");
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(use_react_router__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _material_ui_core_Card__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core/Card */ "./node_modules/@material-ui/core/Card/index.js");
+/* harmony import */ var _material_ui_core_Card__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/CardContent */ "./node_modules/@material-ui/core/CardContent/index.js");
+/* harmony import */ var _material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _material_ui_core_Stepper__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/Stepper */ "./node_modules/@material-ui/core/Stepper/index.js");
+/* harmony import */ var _material_ui_core_Stepper__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Stepper__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var _material_ui_core_Step__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @material-ui/core/Step */ "./node_modules/@material-ui/core/Step/index.js");
+/* harmony import */ var _material_ui_core_Step__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Step__WEBPACK_IMPORTED_MODULE_6__);
+/* harmony import */ var _material_ui_core_Button__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @material-ui/core/Button */ "./node_modules/@material-ui/core/Button/index.js");
+/* harmony import */ var _material_ui_core_Button__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_7__);
+/* harmony import */ var _material_ui_core_StepLabel__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @material-ui/core/StepLabel */ "./node_modules/@material-ui/core/StepLabel/index.js");
+/* harmony import */ var _material_ui_core_StepLabel__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_StepLabel__WEBPACK_IMPORTED_MODULE_8__);
+/* harmony import */ var ui_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ui/checkout/PaymentMethodsContainer */ "./src/ui/checkout/PaymentMethodsContainer.tsx");
+/* harmony import */ var _CartList__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./CartList */ "./src/ui/checkout/CartList.tsx");
+/* harmony import */ var ui_common_ErrorMessage__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(/*! ui/common/ErrorMessage */ "./src/ui/common/ErrorMessage.tsx");
+/* harmony import */ var _member_utils__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__(/*! ../member/utils */ "./src/ui/member/utils.ts");
+/* harmony import */ var _reducer_hooks__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__(/*! ../reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var ui_checkout_cart__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__(/*! ui/checkout/cart */ "./src/ui/checkout/cart.ts");
+
+
+
+
+
+
 
 
 
@@ -190753,30 +190781,85 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
+
+const steps = ["Select a payment method", "Review and confirm purchase"];
+
 const CheckoutPage = () => {
-  const [paymentMethodId, setPaymentMethodId] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
-  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
+  const {
+    item
+  } = Object(ui_checkout_cart__WEBPACK_IMPORTED_MODULE_14__["useCartState"])();
+  const emptyCart = Object(ui_checkout_cart__WEBPACK_IMPORTED_MODULE_14__["useEmptyCart"])();
+  const {
+    history
+  } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
+  const {
+    currentUser: {
+      id: currentUserId
+    }
+  } = Object(_reducer_hooks__WEBPACK_IMPORTED_MODULE_13__["useAuthState"])(); // Redirect to profile if theres nothing in the cart
+
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
+    !item && history.push(Object(_member_utils__WEBPACK_IMPORTED_MODULE_12__["buildProfileRouting"])(currentUserId));
+    return emptyCart;
+  }, []);
+  const [paymentMethod, setPaymentMethod] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const [activeStep, setActiveStep] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](0);
+  const [paymentMethodError, setPaymentMethodError] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const onSelect = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](paymentMethod => {
+    setPaymentMethod(paymentMethod);
+    setPaymentMethodError(undefined);
+  }, []);
+  const onNext = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    if (!paymentMethod) {
+      setPaymentMethodError("Please select a payment method");
+      return;
+    }
+
+    setActiveStep(1);
+  }, [paymentMethod]);
+  const onBack = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    setActiveStep(0);
+  }, []);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
     container: true,
+    justify: "center",
     spacing: 16
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
     item: true,
-    sm: 5,
+    sm: 10,
     xs: 12
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
-    container: true,
-    spacing: 16
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Stepper__WEBPACK_IMPORTED_MODULE_5___default.a, {
+    activeStep: activeStep,
+    alternativeLabel: true
+  }, steps.map((label, index) => react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Step__WEBPACK_IMPORTED_MODULE_6___default.a, {
+    key: label,
+    onClick: () => setActiveStep(index)
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_StepLabel__WEBPACK_IMPORTED_MODULE_8___default.a, null, label))))), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
     item: true,
+    sm: 10,
     xs: 12
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_2___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_3___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_4__["default"], {
-    onPaymentMethodChange: setPaymentMethodId
-  }), react__WEBPACK_IMPORTED_MODULE_0__["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__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
+  }, activeStep === 0 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Card__WEBPACK_IMPORTED_MODULE_3___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_CardContent__WEBPACK_IMPORTED_MODULE_4___default.a, null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_9__["default"], {
+    paymentMethodToken: paymentMethod && paymentMethod.id,
+    onPaymentMethodChange: onSelect
+  }), react__WEBPACK_IMPORTED_MODULE_0__["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."), paymentMethodError && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_ErrorMessage__WEBPACK_IMPORTED_MODULE_11__["default"], {
+    error: paymentMethodError
+  }))), activeStep === 1 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_CartList__WEBPACK_IMPORTED_MODULE_10__["default"], {
+    paymentMethod: paymentMethod
+  })), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
     item: true,
-    sm: 7,
+    sm: 10,
     xs: 12
-  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_CartList__WEBPACK_IMPORTED_MODULE_5__["default"], {
-    paymentMethodId: paymentMethodId
-  })));
+  }, activeStep === 1 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_7___default.a, {
+    variant: "contained",
+    onClick: onBack,
+    id: "checkout-page-back"
+  }, "Back"), activeStep === 0 && react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Button__WEBPACK_IMPORTED_MODULE_7___default.a, {
+    variant: "contained",
+    color: "primary",
+    onClick: onNext,
+    id: "checkout-page-next"
+  }, "Next")));
 };
 
 /* harmony default export */ __webpack_exports__["default"] = (CheckoutPage);
@@ -191452,21 +191535,25 @@ class PaymentMethodsContainer extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
       openAddPayment: false
     }));
 
+    _defineProperty(this, "paymentMethodFromNonce", nonce => this.state.paymentMethods.find(method => method.id === nonce));
+
     _defineProperty(this, "onAddSuccess", nonce => {
-      this.props.onPaymentMethodChange && this.props.onPaymentMethodChange(nonce);
+      const selectedPaymentMethod = this.paymentMethodFromNonce(nonce);
       this.setState({
         selectedPaymentMethodId: nonce
       });
       this.fetchPaymentMethods();
       this.closeAddPaymentMethod();
+      this.props.onPaymentMethodChange && this.props.onPaymentMethodChange(selectedPaymentMethod);
     });
 
     _defineProperty(this, "selectPaymentMethod", event => {
       const selectedPaymentMethodId = event.currentTarget.value;
-      this.props.onPaymentMethodChange && this.props.onPaymentMethodChange(selectedPaymentMethodId);
       this.setState({
         selectedPaymentMethodId
       });
+      const selectedPaymentMethod = this.paymentMethodFromNonce(selectedPaymentMethodId);
+      this.props.onPaymentMethodChange && this.props.onPaymentMethodChange(selectedPaymentMethod);
     });
 
     _defineProperty(this, "renderDeletePaymentModal", () => {
@@ -191475,10 +191562,9 @@ class PaymentMethodsContainer extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
         isDeleting,
         error,
         openDeleteModal,
-        paymentMethods,
         selectedPaymentMethodId
       } = this.state;
-      const selectedPaymentMethod = paymentMethods.find(method => method.id === selectedPaymentMethodId);
+      const selectedPaymentMethod = this.paymentMethodFromNonce(selectedPaymentMethodId);
 
       if (!selectedPaymentMethod) {
         return;
@@ -191654,7 +191740,7 @@ class PaymentMethodsContainer extends react__WEBPACK_IMPORTED_MODULE_0__["Compon
       variant: "body1",
       color: "inherit",
       id: "none-found"
-    }, "No payment methods found.  Click \"Add New Payment Method\" to add one.")), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_ErrorMessage__WEBPACK_IMPORTED_MODULE_10__["default"], {
+    }, "No payment methods found. Click \"Add New Payment Method\" to add one.")), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_ErrorMessage__WEBPACK_IMPORTED_MODULE_10__["default"], {
       id: `get-payment-methods-error`,
       error: !isRequesting && error
     }), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_1___default.a, {
@@ -191946,6 +192032,112 @@ const Receipt = () => {
 
 /***/ }),
 
+/***/ "./src/ui/checkout/SubscriptionAuthorizationModal.tsx":
+/*!************************************************************!*\
+  !*** ./src/ui/checkout/SubscriptionAuthorizationModal.tsx ***!
+  \************************************************************/
+/*! exports provided: default */
+/***/ (function(module, __webpack_exports__, __webpack_require__) {
+
+"use strict";
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "./node_modules/react/index.js");
+/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! use-react-router */ "./node_modules/use-react-router/use-react-router.js");
+/* harmony import */ var use_react_router__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(use_react_router__WEBPACK_IMPORTED_MODULE_1__);
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @material-ui/core/Grid */ "./node_modules/@material-ui/core/Grid/index.js");
+/* harmony import */ var _material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2__);
+/* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @material-ui/core/Typography */ "./node_modules/@material-ui/core/Typography/index.js");
+/* harmony import */ var _material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3__);
+/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @material-ui/core/Checkbox */ "./node_modules/@material-ui/core/Checkbox/index.js");
+/* harmony import */ var _material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_4__);
+/* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @material-ui/core/FormControlLabel */ "./node_modules/@material-ui/core/FormControlLabel/index.js");
+/* harmony import */ var _material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_5__);
+/* harmony import */ var ui_common_FormModal__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ui/common/FormModal */ "./src/ui/common/FormModal.tsx");
+/* harmony import */ var ui_reducer_hooks__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ui/reducer/hooks */ "./src/ui/reducer/hooks.ts");
+/* harmony import */ var ui_member_utils__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ui/member/utils */ "./src/ui/member/utils.ts");
+
+
+
+
+
+
+
+
+
+const checkboxField = {
+  id: "authorization-agreement-checkbox",
+  name: "authorization-agreement-checkbox",
+  error: "You must accept to continue",
+  label: "I agree",
+  validate: val => !!val
+};
+
+const SubscriptionAuthorizationModal = ({
+  onConfirm,
+  item
+}) => {
+  const {
+    currentUser
+  } = Object(ui_reducer_hooks__WEBPACK_IMPORTED_MODULE_7__["useAuthState"])();
+  const {
+    history
+  } = use_react_router__WEBPACK_IMPORTED_MODULE_1___default()();
+  const onSubmit = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](async form => {
+    await form.simpleValidate({
+      [checkboxField.id]: checkboxField
+    });
+
+    if (!form.isValid()) {
+      return;
+    }
+
+    onConfirm();
+  }, []);
+  const redirect = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](() => {
+    history.push(Object(ui_member_utils__WEBPACK_IMPORTED_MODULE_8__["buildProfileRouting"])(currentUser.id));
+  }, [history, currentUser]);
+  return react__WEBPACK_IMPORTED_MODULE_0__["createElement"](ui_common_FormModal__WEBPACK_IMPORTED_MODULE_6__["default"], {
+    id: "authorization-agreement",
+    title: "Recurring Payment Authorization",
+    isOpen: true,
+    onSubmit: onSubmit,
+    closeHandler: redirect,
+    cancelText: "Cancel Payment",
+    submitText: "Confirm"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    container: true,
+    spacing: 16
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Grid__WEBPACK_IMPORTED_MODULE_2___default.a, {
+    item: true,
+    xs: 12
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    variant: "body1"
+  }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("strong", null, "How recurring payments work:")), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("div", null, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    variant: "body1"
+  }, "You authorize regularly scheduled charges to your selected payment method. You will be charged the subscription amount each billing period. A receipt will be emailed to you and each charge will appear on your statement. You agree that no prior notification will be provided unless the date or amount changes, in which case you will receive notice from us at least 10 days prior to the payment being collected.")), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("br", null), react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("br", null), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Typography__WEBPACK_IMPORTED_MODULE_3___default.a, {
+    variant: "body1",
+    style: {
+      padding: "1rem",
+      border: "1px solid black",
+      borderRadius: "3px"
+    }
+  }, "I, ", currentUser.firstname, " ", currentUser.lastname, ", authorize Manchester Makerspace to charge $", item.amount, " ", "to the payment method I have selected every ", item.quantity, " month(s). I understand that this authorization will remain in effect until I notify Manchester Makerspace of cancellation in writing or electronically through ", react__WEBPACK_IMPORTED_MODULE_0__["createElement"]("a", {
+    href: `${Object(ui_member_utils__WEBPACK_IMPORTED_MODULE_8__["buildProfileRouting"])(currentUser.id)}/settings`
+  }, "Subscription Settings"), "."), react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_FormControlLabel__WEBPACK_IMPORTED_MODULE_5___default.a, {
+    control: react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_material_ui_core_Checkbox__WEBPACK_IMPORTED_MODULE_4___default.a, {
+      id: checkboxField.id,
+      name: checkboxField.name,
+      color: "primary"
+    }),
+    label: checkboxField.label
+  }))));
+};
+
+/* harmony default export */ __webpack_exports__["default"] = (SubscriptionAuthorizationModal);
+
+/***/ }),
+
 /***/ "./src/ui/checkout/cart.ts":
 /*!*********************************!*\
   !*** ./src/ui/checkout/cart.ts ***!
@@ -198639,7 +198831,10 @@ const ChangePaymentMethodModal = ({
     openModal,
     closeModal
   } = Object(_hooks_useModal__WEBPACK_IMPORTED_MODULE_5__["default"])();
-  const [paymentMethodId, setPaymentMethodId] = react__WEBPACK_IMPORTED_MODULE_0__["useState"]();
+  const [paymentMethodId, setPaymentMethodId] = react__WEBPACK_IMPORTED_MODULE_0__["useState"](paymentMethodToken);
+  react__WEBPACK_IMPORTED_MODULE_0__["useEffect"](() => {
+    setPaymentMethodId(paymentMethodToken);
+  }, [paymentMethodToken]);
   const {
     isRequesting,
     error,
@@ -198655,6 +198850,9 @@ const ChangePaymentMethodModal = ({
       }
     });
   }, [call, subscriptionId, paymentMethodId]);
+  const setPaymentMethod = react__WEBPACK_IMPORTED_MODULE_0__["useCallback"](pm => {
+    setPaymentMethodId(pm.id);
+  }, []);
 
   if (!subscriptionId) {
     return null;
@@ -198675,9 +198873,9 @@ const ChangePaymentMethodModal = ({
     loading: isRequesting,
     error: error
   }, react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_checkout_PaymentMethodsContainer__WEBPACK_IMPORTED_MODULE_6__["default"], {
-    onPaymentMethodChange: setPaymentMethodId,
+    onPaymentMethodChange: setPaymentMethod,
     title: "Select or add a new payment method",
-    paymentMethodToken: paymentMethodToken
+    paymentMethodToken: paymentMethodId
   })));
 };