@frontegg/redux-store 4.16.1 → 4.19.0

package/subscriptions/index.js

@@ -18,6 +18,10 @@ function createModuleCaseReducers() {
             prepare: function (payload) { return ({ payload: payload }); },
             reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), { error: action.payload, loading: false })); },
         },
+        setState: {
+            prepare: function (payload) { return ({ payload: payload }); },
+            reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), action.payload)); },
+        },
     };
 }
 function createKeyCaseReducer(key, setState) {
@@ -48,7 +52,7 @@ var _a$6 = toolkit.createSlice({
             prepare: function (payload) { return ({ payload: payload }); },
             reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), { plans: action.payload })); },
         } }),
-}), sliceActions$1 = _a$6.actions, reducer$6 = _a$6.reducer, name$6 = _a$6.name;
+}), sliceActions$1 = _a$6.actions, reducer$7 = _a$6.reducer, name$6 = _a$6.name;
 var actions$7 = tslib.__assign({ loadPlans: toolkit.createAction(name$6 + "/loadPlans") }, sliceActions$1);
 
 exports.PaymentProvider = void 0;
@@ -88,7 +92,7 @@ var _a$5 = toolkit.createSlice({
     name: constants.subscriptionsStoreName + "/config",
     initialState: configInitialState,
     reducers: reducers$5,
-}), configActions = _a$5.actions, reducer$5 = _a$5.reducer, name$5 = _a$5.name;
+}), configActions = _a$5.actions, reducer$6 = _a$5.reducer, name$5 = _a$5.name;
 var actions$6 = tslib.__assign({ loadPaymentConfiguration: toolkit.createAction(name$5 + "/loadPaymentConfiguration") }, configActions);
 
 var initialBillingInformationState = {
@@ -112,38 +116,45 @@ var _a$4 = toolkit.createSlice({
     name: constants.subscriptionsStoreName + "/billing/information",
     initialState: initialBillingInformationState,
     reducers: reducers$4,
-}), reducer$4 = _a$4.reducer, overviewActions = _a$4.actions, name$4 = _a$4.name;
+}), reducer$5 = _a$4.reducer, overviewActions = _a$4.actions, name$4 = _a$4.name;
 var actions$5 = tslib.__assign({ loadBillingInformation: toolkit.createAction(name$4 + "/loadBillingInformation"), cancelSubscription: toolkit.createAction(name$4 + "/cancelSubscription"), renewSubscription: toolkit.createAction(name$4 + "/renewSubscription") }, overviewActions);
 
 var initialPaymentMethodState = {
     loading: false,
     error: null,
 };
-var reducers$3 = tslib.__assign(tslib.__assign({}, createModuleCaseReducers()), { setPaymentMethod: {
+var reducers$3 = tslib.__assign(tslib.__assign({}, createModuleCaseReducers()), { setState: {
         prepare: function (payload) { return ({ payload: payload }); },
-        reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), { paymentMethod: action.payload })); },
+        reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), action.payload)); },
     } });
 var _a$3 = toolkit.createSlice({
     name: constants.subscriptionsStoreName + "/billing/payment",
     initialState: initialPaymentMethodState,
     reducers: reducers$3,
-}), reducer$3 = _a$3.reducer, paymentActions = _a$3.actions, name$3 = _a$3.name;
-var actions$4 = tslib.__assign({ loadPaymentMethod: toolkit.createAction(name$3 + "/loadPaymentMethod"), updatePaymentMethodBillingDetails: toolkit.createAction(name$3 + "/updatePaymentMethodBillingDetails", function (payload) { return ({ payload: payload }); }) }, paymentActions);
+}), reducer$4 = _a$3.reducer, paymentActions = _a$3.actions, name$3 = _a$3.name;
+var actions$4 = tslib.__assign({ loadPaymentMethod: toolkit.createAction(name$3 + "/loadPaymentMethod"), submitPaymentMethod: toolkit.createAction(name$3 + "/submitPaymentMethod"), submitPaymentMethodError: toolkit.createAction(name$3 + "/submitPaymentMethodError"), submitPaymentMethodSuccess: toolkit.createAction(name$3 + "/submitPaymentMethodSuccess"), updatePaymentMethodBillingDetails: toolkit.createAction(name$3 + "/updateBillingDetails", function (payload) { return ({ payload: payload }); }) }, paymentActions);
 
 var initialInvoicesState = {
     loading: false,
     error: null,
     invoices: [],
+    invoiceDownload: {
+        loading: false,
+        error: null
+    }
 };
 var reducers$2 = tslib.__assign(tslib.__assign({}, createModuleCaseReducers()), { setInvoices: {
         prepare: function (payload) { return ({ payload: payload }); },
         reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), { invoices: action.payload })); },
+    }, setInvoiceDownloadState: {
+        prepare: function (payload) { return ({ payload: payload }); },
+        reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), { invoiceDownload: tslib.__assign(tslib.__assign({}, state.invoiceDownload), action.payload) })); },
     } });
 var _a$2 = toolkit.createSlice({
     name: constants.subscriptionsStoreName + "/billing/invoices",
     initialState: initialInvoicesState,
     reducers: reducers$2,
-}), reducer$2 = _a$2.reducer, sliceActions = _a$2.actions, name$2 = _a$2.name;
+}), reducer$3 = _a$2.reducer, sliceActions = _a$2.actions, name$2 = _a$2.name;
 var actions$3 = tslib.__assign({ loadInvoices: toolkit.createAction(name$2 + "/loadInvoices"), downloadInvoice: toolkit.createAction(name$2 + "/downloadInvoice", function (payload) { return ({ payload: payload }); }) }, sliceActions);
 
 var billingInitialState = {
@@ -157,9 +168,9 @@ var billingActions = {
     paymentMethod: actions$4,
 };
 var billingReducer = toolkit.combineReducers({
-    invoices: reducer$2,
-    information: reducer$4,
-    paymentMethod: reducer$3,
+    invoices: reducer$3,
+    information: reducer$5,
+    paymentMethod: reducer$4,
 });
 
 exports.CheckoutStatus = void 0;
@@ -184,7 +195,6 @@ var checkoutInitialState = {
     error: null,
     status: exports.CheckoutStatus.SELECTION,
     checkoutPlanId: null,
-    checkoutClientSecret: null,
 };
 var reducers$1 = tslib.__assign(tslib.__assign({}, createModuleCaseReducers()), { setStatus: {
         prepare: function (payload) { return ({ payload: payload }); },
@@ -192,53 +202,65 @@ var reducers$1 = tslib.__assign(tslib.__assign({}, createModuleCaseReducers()),
     }, selectPlan: {
         prepare: function (payload) { return ({ payload: payload }); },
         reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), { checkoutPlanId: action.payload })); },
-    }, setStripeClientSecret: {
-        prepare: function (payload) { return ({ payload: payload }); },
-        reducer: function (state, action) {
-            state.checkoutClientSecret = action.payload;
-        },
     } });
 var _a$1 = toolkit.createSlice({
     name: constants.subscriptionsStoreName + "/checkout",
     initialState: checkoutInitialState,
     reducers: reducers$1,
-}), checkoutActions = _a$1.actions, reducer$1 = _a$1.reducer, name$1 = _a$1.name;
-var actions$2 = tslib.__assign({ loadCheckoutSecret: toolkit.createAction(name$1 + "/loadCheckoutSecret"), checkoutPlan: toolkit.createAction(name$1 + "/checkoutPlan", function (payload) { return ({ payload: payload }); }), resetCheckout: toolkit.createAction(name$1 + "/resetCheckout"), confirmCheckout: toolkit.createAction(name$1 + "/confirmCheckout"), cancelCheckout: toolkit.createAction(name$1 + "/cancelCheckout"), submitCheckout: toolkit.createAction(name$1 + "/submitCheckout"), errorCheckout: toolkit.createAction(name$1 + "/errorCheckout", function (payload) { return ({ payload: payload, }); }), checkoutEvent: toolkit.createAction(name$1 + "/checkoutEvent", function (payload) { return ({ payload: payload, }); }) }, checkoutActions);
+}), checkoutActions = _a$1.actions, reducer$2 = _a$1.reducer, name$1 = _a$1.name;
+var actions$2 = tslib.__assign({ checkoutPlan: toolkit.createAction(name$1 + "/checkoutPlan", function (payload) { return ({ payload: payload }); }), resetCheckout: toolkit.createAction(name$1 + "/resetCheckout"), confirmCheckout: toolkit.createAction(name$1 + "/confirmCheckout", function (payload) { return ({ payload: payload, }); }), cancelCheckout: toolkit.createAction(name$1 + "/cancelCheckout"), submitCheckout: toolkit.createAction(name$1 + "/submitCheckout"), errorCheckout: toolkit.createAction(name$1 + "/errorCheckout", function (payload) { return ({ payload: payload, }); }), checkoutEvent: toolkit.createAction(name$1 + "/checkoutEvent", function (payload) { return ({ payload: payload, }); }) }, checkoutActions);
+
+var initialSubscriptionStripeState = {
+    loading: false,
+    error: null,
+    cardSetupIntentSecret: null,
+};
+var reducers = tslib.__assign(tslib.__assign({}, createModuleCaseReducers()), { setStripeState: {
+        prepare: function (payload) { return ({ payload: payload }); },
+        reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), action.payload)); },
+    } });
+var _a = toolkit.createSlice({
+    name: constants.subscriptionsStoreName + "/stripe",
+    initialState: initialSubscriptionStripeState,
+    reducers: reducers,
+}), reducer$1 = _a.reducer, reducerActions = _a.actions, name = _a.name;
+var actions$1 = tslib.__assign({ loadCustomer: toolkit.createAction(name + "/loadCustomer"), createCardSetupIntentSecret: toolkit.createAction(name + "/createCardSetupIntentSecret") }, reducerActions);
 
 var initialState = {
     config: configInitialState,
     plans: plansInitialState,
     checkout: checkoutInitialState,
     billing: billingInitialState,
+    stripe: initialSubscriptionStripeState,
 };
-var actions$1 = {
+var actions = {
     config: actions$6,
     billing: billingActions,
     plans: actions$7,
     checkout: actions$2,
+    stripe: actions$1,
 };
 var reducer = toolkit.combineReducers({
-    config: reducer$5,
+    config: reducer$6,
     billing: billingReducer,
-    plans: reducer$6,
-    checkout: reducer$1,
+    plans: reducer$7,
+    checkout: reducer$2,
+    stripe: reducer$1,
 });
 
-var initialSubscriptionStripeState = {
-    loading: false,
-    error: null,
-};
-var reducers = tslib.__assign(tslib.__assign({}, createModuleCaseReducers()), { setStripeState: {
-        prepare: function (payload) { return ({ payload: payload }); },
-        reducer: function (state, action) { return (tslib.__assign(tslib.__assign({}, state), action.payload)); },
-    } });
-var _a = toolkit.createSlice({
-    name: constants.subscriptionsStoreName + "/stripe",
-    initialState: initialSubscriptionStripeState,
-    reducers: reducers,
-}); _a.reducer; var reducerActions = _a.actions, name = _a.name;
-var actions = tslib.__assign({ loadCustomer: toolkit.createAction(name + "/loadCustomer") }, reducerActions);
-
+function subscriptionStripeSagas() {
+    return tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, effects.takeEvery(actions$1.loadCustomer, loadStripeCustomer)];
+            case 1:
+                _a.sent();
+                return [4 /*yield*/, effects.takeEvery(actions$1.createCardSetupIntentSecret, createCardSetupIntentSecret)];
+            case 2:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}
 function loadStripeCustomer() {
     var profile, response, e_1;
     return tslib.__generator(this, function (_a) {
@@ -250,11 +272,11 @@ function loadStripeCustomer() {
             case 1:
                 profile = _a.sent();
                 if (!(!profile || !profile.id)) return [3 /*break*/, 3];
-                return [4 /*yield*/, effects.put(actions.setError('Not authorized'))];
+                return [4 /*yield*/, effects.put(actions$1.setError('Not authorized'))];
             case 2:
                 _a.sent();
                 return [2 /*return*/];
-            case 3: return [4 /*yield*/, effects.put(actions.setLoading(true))];
+            case 3: return [4 /*yield*/, effects.put(actions$1.setLoading(true))];
             case 4:
                 _a.sent();
                 _a.label = 5;
@@ -268,7 +290,7 @@ function loadStripeCustomer() {
             case 7:
                 _a.sent();
                 _a.label = 8;
-            case 8: return [4 /*yield*/, effects.put(actions.setLoading(false))];
+            case 8: return [4 /*yield*/, effects.put(actions$1.setLoading(false))];
             case 9:
                 _a.sent();
                 return [3 /*break*/, 15];
@@ -279,7 +301,7 @@ function loadStripeCustomer() {
             case 11:
                 _a.sent();
                 return [3 /*break*/, 14];
-            case 12: return [4 /*yield*/, effects.put(actions.setError(e_1.message))];
+            case 12: return [4 /*yield*/, effects.put(actions$1.setError(e_1.message))];
             case 13:
                 _a.sent();
                 _a.label = 14;
@@ -303,13 +325,50 @@ function createCustomer(profile) {
                 return [3 /*break*/, 4];
             case 2:
                 e_2 = _a.sent();
-                return [4 /*yield*/, effects.put(actions.setError(e_2.message))];
+                return [4 /*yield*/, effects.put(actions$1.setError(e_2.message))];
             case 3:
                 _a.sent();
                 return [3 /*break*/, 4];
             case 4: return [2 /*return*/];
         }
     });
+}
+function createCardSetupIntentSecret(_a) {
+    var setupIntentSecret, e_3;
+    var payload = _a.payload;
+    return tslib.__generator(this, function (_b) {
+        switch (_b.label) {
+            case 0: return [4 /*yield*/, effects.put(actions$1.setStripeState({
+                    loading: true,
+                    error: null,
+                    cardSetupIntentSecret: null
+                }))];
+            case 1:
+                _b.sent();
+                _b.label = 2;
+            case 2:
+                _b.trys.push([2, 5, , 7]);
+                return [4 /*yield*/, effects.call(restApi.api.subscriptions.createStripePaymentMethodSetupIntentSecret, {
+                        paymentMethodId: payload || undefined
+                    })];
+            case 3:
+                setupIntentSecret = (_b.sent()).setupIntentSecret;
+                return [4 /*yield*/, effects.put(actions$1.setStripeState({
+                        cardSetupIntentSecret: setupIntentSecret,
+                        loading: false
+                    }))];
+            case 4:
+                _b.sent();
+                return [3 /*break*/, 7];
+            case 5:
+                e_3 = _b.sent();
+                return [4 /*yield*/, effects.put(actions$1.setError(e_3.message))];
+            case 6:
+                _b.sent();
+                return [3 /*break*/, 7];
+            case 7: return [2 /*return*/];
+        }
+    });
 }
 
 function toPrice(amount) {
@@ -472,7 +531,7 @@ function cancelSubscription() {
                 _b.sent();
                 return [2 /*return*/];
             case 3:
-                _a = overview.subscription, subscriptionId = _a.id, cancellation = _a.cancellation, status = _a.status;
+                _a = overview.subscription || {}, subscriptionId = _a.id, cancellation = _a.cancellation, status = _a.status;
                 isCancellable = !cancellation && status === exports.SubscriptionStatus.ACTIVE;
                 if (!isCancellable) return [3 /*break*/, 11];
                 _b.label = 4;
@@ -509,7 +568,7 @@ function renewSubscription() {
     var overview, _a, subscriptionId, cancellation, renewable, e_5;
     return tslib.__generator(this, function (_b) {
         switch (_b.label) {
-            case 0: return [4 /*yield*/, effects.select(function (state) { return state.subscriptions.billing.overview; })];
+            case 0: return [4 /*yield*/, effects.select(function (state) { return state.subscriptions.billing.information; })];
             case 1:
                 overview = _b.sent();
                 if (!overview.subscription) {
@@ -521,8 +580,8 @@ function renewSubscription() {
                 _b.sent();
                 return [2 /*return*/];
             case 3:
-                _a = overview.subscription, subscriptionId = _a.id, cancellation = _a.cancellation;
-                renewable = cancellation && cancellation.policy === exports.SubscriptionCancellationPolicy.AT_PERIOD_END;
+                _a = overview.subscription || {}, subscriptionId = _a.id, cancellation = _a.cancellation;
+                renewable = (cancellation === null || cancellation === void 0 ? void 0 : cancellation.policy) === exports.SubscriptionCancellationPolicy.AT_PERIOD_END;
                 if (!renewable) return [3 /*break*/, 11];
                 _b.label = 4;
             case 4:
@@ -573,11 +632,20 @@ function subscriptionsPaymentMethodSagas() {
             case 0: return [4 /*yield*/, effects.takeEvery(actions$4.loadPaymentMethod, loadPaymentMethod)];
             case 1:
                 _a.sent();
-                return [4 /*yield*/, effects.takeEvery(actions$4.updatePaymentMethodBillingDetails, updatePaymentMethodBillingDetails)];
+                return [4 /*yield*/, effects.takeEvery(actions$4.submitPaymentMethod, submitPaymentMethod)];
             case 2:
                 _a.sent();
-                return [4 /*yield*/, effects.takeEvery(actions$2.checkoutEvent, checkoutEvent$1)];
+                return [4 /*yield*/, effects.takeEvery(actions$4.submitPaymentMethodError, submitPaymentMethodError)];
             case 3:
+                _a.sent();
+                return [4 /*yield*/, effects.takeEvery(actions$4.submitPaymentMethodSuccess, submitPaymentMethodSuccess)];
+            case 4:
+                _a.sent();
+                return [4 /*yield*/, effects.takeEvery(actions$4.updatePaymentMethodBillingDetails, updateBillingDetails)];
+            case 5:
+                _a.sent();
+                return [4 /*yield*/, effects.takeEvery(actions$2.checkoutEvent, checkoutEvent$1)];
+            case 6:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -592,27 +660,31 @@ function loadPaymentMethod() {
                 _a.sent();
                 _a.label = 2;
             case 2:
-                _a.trys.push([2, 6, , 8]);
+                _a.trys.push([2, 8, , 10]);
                 return [4 /*yield*/, effects.call(restApi.api.subscriptions.getPaymentMethods)];
             case 3:
                 paymentMethods = _a.sent();
                 paymentMethod = paymentMethods[0];
                 if (!paymentMethod) return [3 /*break*/, 5];
-                return [4 /*yield*/, effects.put(actions$4.setPaymentMethod(tslib.__assign({}, paymentMethod)))];
+                return [4 /*yield*/, effects.put(actions$4.setState({
+                        paymentMethod: paymentMethod,
+                        loading: false,
+                    }))];
             case 4:
                 _a.sent();
-                _a.label = 5;
-            case 5: return [3 /*break*/, 8];
+                return [3 /*break*/, 7];
+            case 5: return [4 /*yield*/, effects.put(actions$4.setLoading(false))];
             case 6:
+                _a.sent();
+                _a.label = 7;
+            case 7: return [3 /*break*/, 10];
+            case 8:
                 e_1 = _a.sent();
                 return [4 /*yield*/, effects.put(actions$4.setError(e_1.message))];
-            case 7:
-                _a.sent();
-                return [3 /*break*/, 8];
-            case 8: return [4 /*yield*/, effects.put(actions$4.setLoading(false))];
             case 9:
                 _a.sent();
-                return [2 /*return*/];
+                return [3 /*break*/, 10];
+            case 10: return [2 /*return*/];
         }
     });
 }
@@ -630,7 +702,7 @@ function checkoutEvent$1(_a) {
         }
     });
 }
-function updatePaymentMethodBillingDetails(_a) {
+function updateBillingDetails(_a) {
     var id, email, address, callback, e_2;
     var payload = _a.payload;
     return tslib.__generator(this, function (_b) {
@@ -663,6 +735,37 @@ function updatePaymentMethodBillingDetails(_a) {
                 return [2 /*return*/];
         }
     });
+}
+function submitPaymentMethod() {
+    return tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, effects.put(actions$4.setLoading(true))];
+            case 1:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
+}
+function submitPaymentMethodError(_a) {
+    var error = _a.payload;
+    return tslib.__generator(this, function (_b) {
+        switch (_b.label) {
+            case 0: return [4 /*yield*/, effects.put(actions$4.setError(error))];
+            case 1:
+                _b.sent();
+                return [2 /*return*/];
+        }
+    });
+}
+function submitPaymentMethodSuccess() {
+    return tslib.__generator(this, function (_a) {
+        switch (_a.label) {
+            case 0: return [4 /*yield*/, effects.put(actions$4.loadPaymentMethod())];
+            case 1:
+                _a.sent();
+                return [2 /*return*/];
+        }
+    });
 }
 
 function subscriptionInvoicesSagas() {
@@ -761,7 +864,7 @@ function downloadInvoice(_a) {
     var payload = _a.payload;
     return tslib.__generator(this, function (_b) {
         switch (_b.label) {
-            case 0: return [4 /*yield*/, effects.put(actions$3.setLoading(true))];
+            case 0: return [4 /*yield*/, effects.put(actions$3.setInvoiceDownloadState({ loading: true, error: null }))];
             case 1:
                 _b.sent();
                 _b.label = 2;
@@ -770,13 +873,13 @@ function downloadInvoice(_a) {
                 return [4 /*yield*/, effects.call(restApi.api.subscriptions.getSubscriptionInvoicePdf, payload.invoiceId, payload.filename)];
             case 3:
                 _b.sent();
-                return [4 /*yield*/, effects.put(actions$3.setLoading(false))];
+                return [4 /*yield*/, effects.put(actions$3.setInvoiceDownloadState({ loading: false, error: null }))];
             case 4:
                 _b.sent();
                 return [3 /*break*/, 7];
             case 5:
                 e_2 = _b.sent();
-                return [4 /*yield*/, effects.put(actions$3.setError(e_2.message))];
+                return [4 /*yield*/, effects.put(actions$3.setInvoiceDownloadState({ loading: false, error: e_2.message || null }))];
             case 6:
                 _b.sent();
                 return [3 /*break*/, 7];
@@ -817,26 +920,23 @@ function billingSagas() {
 function checkoutSagas() {
     return tslib.__generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, effects.takeEvery(actions$2.loadCheckoutSecret, loadCheckoutSecret)];
+            case 0: return [4 /*yield*/, effects.takeEvery(actions$2.checkoutPlan, checkoutPlan)];
             case 1:
-                _a.sent();
-                return [4 /*yield*/, effects.takeEvery(actions$2.checkoutPlan, checkoutPlan)];
-            case 2:
                 _a.sent();
                 return [4 /*yield*/, effects.takeEvery(actions$2.resetCheckout, resetCheckout)];
-            case 3:
+            case 2:
                 _a.sent();
                 return [4 /*yield*/, effects.takeEvery(actions$2.confirmCheckout, confirmPlan)];
-            case 4:
+            case 3:
                 _a.sent();
                 return [4 /*yield*/, effects.takeEvery(actions$2.cancelCheckout, cancelPlan)];
-            case 5:
+            case 4:
                 _a.sent();
                 return [4 /*yield*/, effects.takeEvery(actions$2.submitCheckout, submitCheckout)];
-            case 6:
+            case 5:
                 _a.sent();
                 return [4 /*yield*/, effects.takeEvery(actions$2.errorCheckout, errorCheckout)];
-            case 7:
+            case 6:
                 _a.sent();
                 return [2 /*return*/];
         }
@@ -846,20 +946,13 @@ function checkoutPlan(_a) {
     var planId = _a.payload;
     return tslib.__generator(this, function (_b) {
         switch (_b.label) {
-            case 0: return [4 /*yield*/, effects.put(actions$2.setError(null))];
+            case 0: return [4 /*yield*/, effects.put(actions$2.setState({
+                    checkoutPlanId: planId,
+                    loading: false,
+                    error: null,
+                    status: exports.CheckoutStatus.CHECKOUT,
+                }))];
             case 1:
-                _b.sent();
-                return [4 /*yield*/, effects.put(actions$2.setLoading(true))];
-            case 2:
-                _b.sent();
-                return [4 /*yield*/, effects.put(actions$2.selectPlan(planId))];
-            case 3:
-                _b.sent();
-                return [4 /*yield*/, effects.put(actions$2.setStatus(exports.CheckoutStatus.CHECKOUT))];
-            case 4:
-                _b.sent();
-                return [4 /*yield*/, effects.put(actions$2.setLoading(false))];
-            case 5:
                 _b.sent();
                 return [2 /*return*/];
         }
@@ -868,115 +961,114 @@ function checkoutPlan(_a) {
 function resetCheckout() {
     return tslib.__generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, effects.put(actions$2.selectPlan(null))];
+            case 0: return [4 /*yield*/, effects.put(actions$2.setState({
+                    checkoutPlanId: null,
+                    loading: false,
+                    status: exports.CheckoutStatus.SELECTION,
+                }))];
             case 1:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setStatus(exports.CheckoutStatus.SELECTION))];
-            case 2:
                 _a.sent();
                 return [2 /*return*/];
         }
     });
 }
-function confirmPlan() {
-    var checkout;
-    return tslib.__generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, effects.select(function (state) { return state.subscriptions.checkout; })];
+function confirmPlan(_a) {
+    var _b, subscription, status, checkoutPlanId, subscriptionId, subscriptionItemId, e_1;
+    var _c;
+    var paymentMethodId = _a.payload;
+    return tslib.__generator(this, function (_d) {
+        switch (_d.label) {
+            case 0: return [4 /*yield*/, effects.select(function (_a) {
+                    var _b = _a.subscriptions, information = _b.billing.information, checkout = _b.checkout;
+                    return ({
+                        subscription: information.subscription,
+                        status: checkout.status,
+                        checkoutPlanId: checkout.checkoutPlanId,
+                    });
+                })];
             case 1:
-                checkout = _a.sent();
-                if (!(checkout.status === exports.CheckoutStatus.CHECKOUT)) return [3 /*break*/, 8];
-                return [4 /*yield*/, effects.put(actions$2.setError(null))];
+                _b = _d.sent(), subscription = _b.subscription, status = _b.status, checkoutPlanId = _b.checkoutPlanId;
+                subscriptionId = subscription === null || subscription === void 0 ? void 0 : subscription.id;
+                subscriptionItemId = (_c = subscription === null || subscription === void 0 ? void 0 : subscription.items[0]) === null || _c === void 0 ? void 0 : _c.id;
+                if (!(!checkoutPlanId || !subscriptionId || !subscriptionItemId)) return [3 /*break*/, 3];
+                return [4 /*yield*/, effects.put(actions$2.setState({
+                        loading: false,
+                        status: exports.CheckoutStatus.ERROR,
+                    }))];
             case 2:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setLoading(true))];
+                _d.sent();
+                return [2 /*return*/];
             case 3:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.selectPlan(null))];
+                if (!(status === exports.CheckoutStatus.CHECKOUT)) return [3 /*break*/, 12];
+                return [4 /*yield*/, effects.put(actions$2.setState({
+                        loading: true,
+                        error: null,
+                    }))];
             case 4:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setStatus(exports.CheckoutStatus.CONFIRM))];
+                _d.sent();
+                _d.label = 5;
             case 5:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setLoading(false))];
+                _d.trys.push([5, 9, , 12]);
+                return [4 /*yield*/, effects.call(restApi.api.subscriptions.updateSubscription, subscriptionId, {
+                        paymentMethodId: paymentMethodId,
+                        items: [
+                            {
+                                id: subscriptionItemId,
+                                planId: checkoutPlanId,
+                            },
+                        ],
+                    })];
             case 6:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.checkoutEvent(exports.CheckoutEvent.CONFIRMED))];
+                _d.sent();
+                return [4 /*yield*/, effects.put(actions$2.setState({
+                        checkoutPlanId: null,
+                        loading: false,
+                        status: exports.CheckoutStatus.CONFIRM,
+                    }))];
             case 7:
-                _a.sent();
-                _a.label = 8;
-            case 8: return [2 /*return*/];
+                _d.sent();
+                return [4 /*yield*/, effects.put(actions$2.checkoutEvent(exports.CheckoutEvent.CONFIRMED))];
+            case 8:
+                _d.sent();
+                return [3 /*break*/, 12];
+            case 9:
+                e_1 = _d.sent();
+                return [4 /*yield*/, effects.put(actions$2.setState({
+                        loading: false,
+                        error: e_1.message,
+                        status: exports.CheckoutStatus.ERROR,
+                    }))];
+            case 10:
+                _d.sent();
+                return [4 /*yield*/, effects.put(actions$2.checkoutEvent(exports.CheckoutEvent.ERROR))];
+            case 11:
+                _d.sent();
+                return [3 /*break*/, 12];
+            case 12: return [2 /*return*/];
         }
     });
 }
 function cancelPlan() {
-    var checkout;
+    var status;
     return tslib.__generator(this, function (_a) {
         switch (_a.label) {
             case 0: return [4 /*yield*/, effects.select(function (state) { return state.subscriptions.checkout; })];
             case 1:
-                checkout = _a.sent();
-                if (!(checkout.status === exports.CheckoutStatus.CHECKOUT)) return [3 /*break*/, 8];
-                return [4 /*yield*/, effects.put(actions$2.setError(null))];
+                status = (_a.sent()).status;
+                if (!(status === exports.CheckoutStatus.CHECKOUT)) return [3 /*break*/, 4];
+                return [4 /*yield*/, effects.put(actions$2.setState({
+                        checkoutPlanId: null,
+                        loading: false,
+                        error: null,
+                        status: exports.CheckoutStatus.CANCEL,
+                    }))];
             case 2:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setLoading(true))];
-            case 3:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.selectPlan(null))];
-            case 4:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setStatus(exports.CheckoutStatus.CANCEL))];
-            case 5:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setLoading(false))];
-            case 6:
                 _a.sent();
                 return [4 /*yield*/, effects.put(actions$2.checkoutEvent(exports.CheckoutEvent.CANCEL))];
-            case 7:
-                _a.sent();
-                _a.label = 8;
-            case 8: return [2 /*return*/];
-        }
-    });
-}
-function loadCheckoutSecret() {
-    var config, checkoutPlanId, response, e_1;
-    return tslib.__generator(this, function (_a) {
-        switch (_a.label) {
-            case 0: return [4 /*yield*/, effects.select(function (state) { return state.subscriptions.config; })];
-            case 1:
-                config = (_a.sent()).config;
-                if (!(config.paymentProvider === exports.PaymentProvider.STRIPE)) return [3 /*break*/, 10];
-                return [4 /*yield*/, effects.put(actions$2.setLoading(true))];
-            case 2:
-                _a.sent();
-                return [4 /*yield*/, effects.select(function (state) { return state.subscriptions.checkout; })];
             case 3:
-                checkoutPlanId = (_a.sent()).checkoutPlanId;
-                if (!checkoutPlanId) return [3 /*break*/, 10];
-                _a.label = 4;
-            case 4:
-                _a.trys.push([4, 8, , 10]);
-                return [4 /*yield*/, effects.call(restApi.api.subscriptions.createSubscription, {
-                        stripePlanId: checkoutPlanId,
-                    })];
-            case 5:
-                response = _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setStripeClientSecret(response.subscriptionSecret))];
-            case 6:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setLoading(false))];
-            case 7:
                 _a.sent();
-                return [3 /*break*/, 10];
-            case 8:
-                e_1 = _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setError(e_1.message))];
-            case 9:
-                _a.sent();
-                return [3 /*break*/, 10];
-            case 10: return [2 /*return*/];
+                _a.label = 4;
+            case 4: return [2 /*return*/];
         }
     });
 }
@@ -984,24 +1076,24 @@ function loadCheckoutSecret() {
  * Based on payment provider type
  */
 function submitCheckout() {
-    var config;
+    var paymentProvider;
     return tslib.__generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, effects.select(function (state) { return state.subscriptions.config; })];
+            case 0: return [4 /*yield*/, effects.select(function (state) { return state.subscriptions.config.config; })];
             case 1:
-                config = (_a.sent()).config;
-                if (!(config.paymentProvider === exports.PaymentProvider.STRIPE)) return [3 /*break*/, 5];
-                return [4 /*yield*/, effects.put(actions$2.setError(null))];
+                paymentProvider = (_a.sent()).paymentProvider;
+                if (!(paymentProvider === exports.PaymentProvider.STRIPE)) return [3 /*break*/, 4];
+                return [4 /*yield*/, effects.put(actions$2.setState({
+                        loading: true,
+                        error: null,
+                    }))];
             case 2:
-                _a.sent();
-                return [4 /*yield*/, effects.put(actions$2.setLoading(true))];
-            case 3:
                 _a.sent();
                 return [4 /*yield*/, effects.put(actions$2.checkoutEvent(exports.CheckoutEvent.SUBMITTED))];
-            case 4:
+            case 3:
                 _a.sent();
-                _a.label = 5;
-            case 5: return [2 /*return*/];
+                _a.label = 4;
+            case 4: return [2 /*return*/];
         }
     });
 }
@@ -1009,14 +1101,15 @@ function errorCheckout(_a) {
     var payload = _a.payload;
     return tslib.__generator(this, function (_b) {
         switch (_b.label) {
-            case 0: return [4 /*yield*/, effects.put(actions$2.setStatus(exports.CheckoutStatus.ERROR))];
+            case 0: return [4 /*yield*/, effects.put(actions$2.setState({
+                    loading: false,
+                    error: payload,
+                    status: exports.CheckoutStatus.ERROR,
+                }))];
             case 1:
-                _b.sent();
-                return [4 /*yield*/, effects.put(actions$2.setError(payload))];
-            case 2:
                 _b.sent();
                 return [4 /*yield*/, effects.put(actions$2.checkoutEvent(exports.CheckoutEvent.ERROR))];
-            case 3:
+            case 2:
                 _b.sent();
                 return [2 /*return*/];
         }
@@ -1152,7 +1245,7 @@ function loadStripePaymentConfiguration() {
 function sagas() {
     return tslib.__generator(this, function (_a) {
         switch (_a.label) {
-            case 0: return [4 /*yield*/, effects.all([effects.call(billingSagas), effects.call(checkoutSagas), effects.call(plansSagas), effects.call(configSagas)])];
+            case 0: return [4 /*yield*/, effects.all([effects.call(billingSagas), effects.call(checkoutSagas), effects.call(plansSagas), effects.call(configSagas), effects.call(subscriptionStripeSagas)])];
             case 1:
                 _a.sent();
                 return [2 /*return*/];
@@ -1171,14 +1264,14 @@ exports.PaymentMethodType = void 0;
 var subscriptionsStore = {
     sagas: sagas,
     reducer: reducer,
-    actions: actions$1,
+    actions: actions,
     initialState: initialState,
     storeName: constants.subscriptionsStoreName,
 };
 
 exports.subscriptionsStoreName = constants.subscriptionsStoreName;
 exports['default'] = subscriptionsStore;
-exports.subscriptionActions = actions$1;
+exports.subscriptionActions = actions;
 exports.subscriptionInitialState = initialState;
 exports.subscriptionReducers = reducer;
 exports.subscriptionSagas = sagas;