79aa5a5d7f
# Pull Request Template ## Description This PR will replace the usage of `alertMixin` from the code base with the `useAlert` composable. Fixes https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert ## Type of change - [x] Breaking change (fix or feature that would cause existing functionality not to work as expected) ## How Has This Been Tested? Please refer this issue description https://linear.app/chatwoot/issue/CW-3462/replace-alertmixin-usage-with-usealert ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [x] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules --------- Co-authored-by: Sojan Jose <sojan@pepalo.com>
89 lines
2.1 KiB
Vue
89 lines
2.1 KiB
Vue
<template>
|
|
<banner
|
|
v-if="shouldShowBanner"
|
|
color-scheme="alert"
|
|
:banner-message="bannerMessage"
|
|
:action-button-label="actionButtonMessage"
|
|
has-action-button
|
|
@click="routeToBilling"
|
|
/>
|
|
</template>
|
|
|
|
<script>
|
|
import Banner from 'dashboard/components/ui/Banner.vue';
|
|
import { mapGetters } from 'vuex';
|
|
import accountMixin from 'dashboard/mixins/account';
|
|
import { differenceInDays } from 'date-fns';
|
|
|
|
export default {
|
|
components: { Banner },
|
|
mixins: [accountMixin],
|
|
data() {
|
|
return { conversationMeta: {} };
|
|
},
|
|
computed: {
|
|
...mapGetters({
|
|
isOnChatwootCloud: 'globalConfig/isOnChatwootCloud',
|
|
getAccount: 'accounts/getAccount',
|
|
}),
|
|
bannerMessage() {
|
|
return this.$t('GENERAL_SETTINGS.LIMITS_UPGRADE');
|
|
},
|
|
actionButtonMessage() {
|
|
return this.$t('GENERAL_SETTINGS.OPEN_BILLING');
|
|
},
|
|
shouldShowBanner() {
|
|
if (!this.isOnChatwootCloud) {
|
|
return false;
|
|
}
|
|
|
|
if (this.isTrialAccount()) {
|
|
return false;
|
|
}
|
|
|
|
return this.isLimitExceeded();
|
|
},
|
|
},
|
|
mounted() {
|
|
if (this.isOnChatwootCloud) {
|
|
this.fetchLimits();
|
|
}
|
|
},
|
|
methods: {
|
|
fetchLimits() {
|
|
this.$store.dispatch('accounts/limits');
|
|
},
|
|
routeToBilling() {
|
|
this.$router.push({
|
|
name: 'billing_settings_index',
|
|
params: { accountId: this.accountId },
|
|
});
|
|
},
|
|
isTrialAccount() {
|
|
// check if account is less than 15 days old
|
|
const account = this.getAccount(this.accountId);
|
|
if (!account) return false;
|
|
|
|
const createdAt = new Date(account.created_at);
|
|
|
|
const diffDays = differenceInDays(new Date(), createdAt);
|
|
|
|
return diffDays <= 15;
|
|
},
|
|
isLimitExceeded() {
|
|
const account = this.getAccount(this.accountId);
|
|
if (!account) return false;
|
|
|
|
const { limits } = account;
|
|
if (!limits) return false;
|
|
|
|
const { conversation, non_web_inboxes: nonWebInboxes } = limits;
|
|
return this.testLimit(conversation) || this.testLimit(nonWebInboxes);
|
|
},
|
|
testLimit({ allowed, consumed }) {
|
|
return consumed > allowed;
|
|
},
|
|
},
|
|
};
|
|
</script>
|