Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Show alerts when the limit is reached in accounts (#7323)
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
- Loading branch information
1 parent
e8a27be
commit 86b2896
Showing
8 changed files
with
202 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
84 changes: 84 additions & 0 deletions
84
app/javascript/dashboard/components/app/PaymentPendingBanner.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,84 @@ | ||
<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 adminMixin from 'dashboard/mixins/isAdmin'; | ||
import accountMixin from 'dashboard/mixins/account'; | ||
const EMPTY_SUBSCRIPTION_INFO = { | ||
status: null, | ||
endsOn: null, | ||
}; | ||
export default { | ||
components: { Banner }, | ||
mixins: [adminMixin, accountMixin], | ||
computed: { | ||
...mapGetters({ | ||
isOnChatwootCloud: 'globalConfig/isOnChatwootCloud', | ||
getAccount: 'accounts/getAccount', | ||
}), | ||
bannerMessage() { | ||
return this.$t('GENERAL_SETTINGS.PAYMENT_PENDING'); | ||
}, | ||
actionButtonMessage() { | ||
return this.$t('GENERAL_SETTINGS.OPEN_BILLING'); | ||
}, | ||
shouldShowBanner() { | ||
if (!this.isOnChatwootCloud) { | ||
return false; | ||
} | ||
if (!this.isAdmin) { | ||
return false; | ||
} | ||
return this.isPaymentPending(); | ||
}, | ||
}, | ||
methods: { | ||
routeToBilling() { | ||
this.$router.push({ | ||
name: 'billing_settings_index', | ||
params: { accountId: this.accountId }, | ||
}); | ||
}, | ||
isPaymentPending() { | ||
const { status, endsOn } = this.getSubscriptionInfo(); | ||
if (status && endsOn) { | ||
const now = new Date(); | ||
if (status === 'past_due' && endsOn < now) { | ||
return true; | ||
} | ||
} | ||
return false; | ||
}, | ||
getSubscriptionInfo() { | ||
const account = this.getAccount(this.accountId); | ||
if (!account) return EMPTY_SUBSCRIPTION_INFO; | ||
const { custom_attributes: subscription } = account; | ||
if (!subscription) return EMPTY_SUBSCRIPTION_INFO; | ||
const { | ||
subscription_status: status, | ||
subscription_ends_on: endsOn, | ||
} = subscription; | ||
return { status, endsOn: new Date(endsOn) }; | ||
}, | ||
}, | ||
}; | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
<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 adminMixin from 'dashboard/mixins/isAdmin'; | ||
import accountMixin from 'dashboard/mixins/account'; | ||
import { differenceInDays } from 'date-fns'; | ||
export default { | ||
components: { Banner }, | ||
mixins: [adminMixin, 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters