diff --git a/app/javascript/dashboard/App.vue b/app/javascript/dashboard/App.vue
index 203ccec30..839047671 100644
--- a/app/javascript/dashboard/App.vue
+++ b/app/javascript/dashboard/App.vue
@@ -6,6 +6,10 @@
:class="{ 'app-rtl--wrapper': isRTLView }"
>
+
+
+
+
@@ -25,6 +29,8 @@ import AddAccountModal from '../dashboard/components/layout/sidebarComponents/Ad
import LoadingState from './components/widgets/LoadingState.vue';
import NetworkNotification from './components/NetworkNotification';
import UpdateBanner from './components/app/UpdateBanner.vue';
+import UpgradeBanner from './components/app/UpgradeBanner.vue';
+import PaymentPendingBanner from './components/app/PaymentPendingBanner.vue';
import vueActionCable from './helper/actionCable';
import WootSnackbarBox from './components/SnackbarContainer';
import rtlMixin from 'shared/mixins/rtlMixin';
@@ -41,7 +47,9 @@ export default {
LoadingState,
NetworkNotification,
UpdateBanner,
+ PaymentPendingBanner,
WootSnackbarBox,
+ UpgradeBanner,
},
mixins: [rtlMixin],
@@ -59,6 +67,7 @@ export default {
currentUser: 'getCurrentUser',
globalConfig: 'globalConfig/get',
authUIFlags: 'getAuthUIFlags',
+ accountUIFlags: 'accounts/getUIFlags',
currentAccountId: 'getCurrentAccountId',
}),
hasAccounts() {
diff --git a/app/javascript/dashboard/api/enterprise/account.js b/app/javascript/dashboard/api/enterprise/account.js
index bc0d51dfc..bb95335ad 100644
--- a/app/javascript/dashboard/api/enterprise/account.js
+++ b/app/javascript/dashboard/api/enterprise/account.js
@@ -13,6 +13,10 @@ class EnterpriseAccountAPI extends ApiClient {
subscription() {
return axios.post(`${this.url}subscription`);
}
+
+ getLimits() {
+ return axios.get(`${this.url}limits`);
+ }
}
export default new EnterpriseAccountAPI();
diff --git a/app/javascript/dashboard/components/app/PaymentPendingBanner.vue b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
new file mode 100644
index 000000000..91df49926
--- /dev/null
+++ b/app/javascript/dashboard/components/app/PaymentPendingBanner.vue
@@ -0,0 +1,84 @@
+
+
+
+
+
diff --git a/app/javascript/dashboard/components/app/UpgradeBanner.vue b/app/javascript/dashboard/components/app/UpgradeBanner.vue
new file mode 100644
index 000000000..825f17807
--- /dev/null
+++ b/app/javascript/dashboard/components/app/UpgradeBanner.vue
@@ -0,0 +1,89 @@
+
+
+
+
+
diff --git a/app/javascript/dashboard/components/ui/Banner.vue b/app/javascript/dashboard/components/ui/Banner.vue
index 5c406e1f4..59129d6f4 100644
--- a/app/javascript/dashboard/components/ui/Banner.vue
+++ b/app/javascript/dashboard/components/ui/Banner.vue
@@ -75,7 +75,7 @@ export default {
},
computed: {
bannerClasses() {
- const classList = [this.colorScheme, `banner-align-${this.align}`];
+ const classList = [this.colorScheme];
if (this.hasActionButton || this.hasCloseButton) {
classList.push('has-button');
diff --git a/app/javascript/dashboard/i18n/locale/en/generalSettings.json b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
index 7ed6d8925..f5af885a9 100644
--- a/app/javascript/dashboard/i18n/locale/en/generalSettings.json
+++ b/app/javascript/dashboard/i18n/locale/en/generalSettings.json
@@ -48,7 +48,10 @@
}
},
"UPDATE_CHATWOOT": "An update %{latestChatwootVersion} for Chatwoot is available. Please update your instance.",
- "LEARN_MORE": "Learn more"
+ "LEARN_MORE": "Learn more",
+ "PAYMENT_PENDING": "Your payment is pending. Please update your payment information to continue using Chatwoot",
+ "LIMITS_UPGRADE": "Your account has exceeded the usage limits, please upgrade your plan to continue using Chatwoot",
+ "OPEN_BILLING": "Open billing"
},
"FORMS": {
"MULTISELECT": {
diff --git a/app/javascript/dashboard/store/modules/accounts.js b/app/javascript/dashboard/store/modules/accounts.js
index 80fad32a1..a2224f70b 100644
--- a/app/javascript/dashboard/store/modules/accounts.js
+++ b/app/javascript/dashboard/store/modules/accounts.js
@@ -97,6 +97,15 @@ export const actions = {
commit(types.default.SET_ACCOUNT_UI_FLAG, { isCheckoutInProcess: false });
}
},
+
+ limits: async ({ commit }) => {
+ try {
+ const response = await EnterpriseAccountAPI.getLimits();
+ commit(types.default.SET_ACCOUNT_LIMITS, response.data);
+ } catch (error) {
+ // silent error
+ }
+ },
};
export const mutations = {
@@ -108,6 +117,7 @@ export const mutations = {
},
[types.default.ADD_ACCOUNT]: MutationHelpers.setSingleRecord,
[types.default.EDIT_ACCOUNT]: MutationHelpers.update,
+ [types.default.SET_ACCOUNT_LIMITS]: MutationHelpers.updateAttributes,
};
export default {
diff --git a/app/javascript/dashboard/store/mutation-types.js b/app/javascript/dashboard/store/mutation-types.js
index 905b62b2e..554288ad1 100644
--- a/app/javascript/dashboard/store/mutation-types.js
+++ b/app/javascript/dashboard/store/mutation-types.js
@@ -65,6 +65,7 @@ export default {
// Agent
SET_ACCOUNT_UI_FLAG: 'SET_ACCOUNT_UI_FLAG',
+ SET_ACCOUNT_LIMITS: 'SET_ACCOUNT_LIMITS',
SET_ACCOUNTS: 'SET_ACCOUNTS',
ADD_ACCOUNT: 'ADD_ACCOUNT',
EDIT_ACCOUNT: 'EDIT_ACCOUNT',