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',