feat: Allow SaaS users to manage subscription within the dashboard (#5059)

app/javascript/dashboard/store/modules/accounts.js

@@ -1,9 +1,8 @@
-/* eslint no-console: 0 */
-/* eslint no-param-reassign: 0 */
-/* eslint no-shadow: 0 */
 import * as MutationHelpers from 'shared/helpers/vuex/mutationHelpers';
 import * as types from '../mutation-types';
 import AccountAPI from '../../api/account';
+import EnterpriseAccountAPI from '../../api/enterprise/account';
+import { throwErrorMessage } from '../utils/api';
 
 const state = {
   records: [],
@@ -11,6 +10,7 @@ const state = {
     isFetching: false,
     isFetchingItem: false,
     isUpdating: false,
+    isCheckoutInProcess: false,
   },
 };
 
@@ -60,6 +60,29 @@ export const actions = {
       throw error;
     }
   },
+
+  checkout: async ({ commit }) => {
+    commit(types.default.SET_ACCOUNT_UI_FLAG, { isCheckoutInProcess: true });
+    try {
+      const response = await EnterpriseAccountAPI.checkout();
+      window.location = response.data.redirect_url;
+    } catch (error) {
+      throwErrorMessage(error);
+    } finally {
+      commit(types.default.SET_ACCOUNT_UI_FLAG, { isCheckoutInProcess: false });
+    }
+  },
+
+  subscription: async ({ commit }) => {
+    commit(types.default.SET_ACCOUNT_UI_FLAG, { isCheckoutInProcess: true });
+    try {
+      await EnterpriseAccountAPI.subscription();
+    } catch (error) {
+      throwErrorMessage(error);
+    } finally {
+      commit(types.default.SET_ACCOUNT_UI_FLAG, { isCheckoutInProcess: false });
+    }
+  },
 };
 
 export const mutations = {