diff --git a/packages/web/src/components/UsageDataInformation/index.ee.jsx b/packages/web/src/components/UsageDataInformation/index.ee.jsx
index 502bb1df..9b737f59 100644
--- a/packages/web/src/components/UsageDataInformation/index.ee.jsx
+++ b/packages/web/src/components/UsageDataInformation/index.ee.jsx
@@ -18,11 +18,15 @@ import * as URLS from 'config/urls';
import useBillingAndUsageData from 'hooks/useBillingAndUsageData.ee';
import useFormatMessage from 'hooks/useFormatMessage';
import usePlanAndUsage from 'hooks/usePlanAndUsage';
+import useSubscription from 'hooks/useSubscription.ee';
+import useUserTrial from 'hooks/useUserTrial.ee';
+import { useQueryClient } from '@tanstack/react-query';
+import useCurrentUser from 'hooks/useCurrentUser';
const capitalize = (str) => str[0].toUpperCase() + str.slice(1, str.length);
function BillingCard(props) {
- const { name, title = '', action } = props;
+ const { name, title = '', action, text } = props;
return (
-
+
);
}
function Action(props) {
- const { action } = props;
+ const { action, text } = props;
if (!action) return ;
- const { text, type } = action;
-
- if (type === 'link') {
- if (action.src.startsWith('http')) {
- return (
-
- );
- } else {
- return (
-
- );
- }
- }
-
- if (type === 'text') {
+ if (action.startsWith('http')) {
return (
-
+
+
+ );
+ } else if (action.startsWith('/')) {
+ return (
+
);
}
- return ;
+ return (
+
+ {text}
+
+ );
}
+
export default function UsageDataInformation() {
const formatMessage = useFormatMessage();
const billingAndUsageData = useBillingAndUsageData();
+ const queryClient = useQueryClient();
const { data } = usePlanAndUsage();
const planAndUsage = data?.data;
+ const { data: currentUser } = useCurrentUser();
+ const currentUserId = currentUser?.data?.id;
+ const trial = useUserTrial();
+ const subscriptionData = useSubscription();
+ const subscription = subscriptionData?.data;
+ let billingInfo;
+
+ React.useEffect(() => {
+ queryClient.invalidateQueries({
+ queryKey: ['planAndUsage', currentUserId],
+ });
+ }, [subscription, queryClient, currentUserId]);
+
+ if (trial.hasTrial) {
+ billingInfo = {
+ monthlyQuota: {
+ title: formatMessage('usageDataInformation.freeTrial'),
+ action: '/settings/billing/upgrade',
+ text: 'Upgrade plan',
+ },
+ nextBillAmount: {
+ title: '---',
+ action: null,
+ text: null,
+ },
+ nextBillDate: {
+ title: '---',
+ action: null,
+ text: null,
+ },
+ };
+ } else {
+ billingInfo = {
+ monthlyQuota: {
+ title: planAndUsage?.plan?.limit,
+ action: subscription?.cancelUrl,
+ text: formatMessage('usageDataInformation.cancelPlan'),
+ },
+ nextBillAmount: {
+ title: `€${subscription?.nextBillAmount}`,
+ action: subscription?.updateUrl,
+ text: formatMessage('usageDataInformation.updatePaymentMethod'),
+ },
+ nextBillDate: {
+ title: subscription?.nextBillDate,
+ action: formatMessage('usageDataInformation.monthlyPayment'),
+ text: formatMessage('usageDataInformation.monthlyPayment'),
+ },
+ };
+ }
return (
@@ -106,11 +154,8 @@ export default function UsageDataInformation() {
{formatMessage('usageDataInformation.subscriptionPlan')}
- {billingAndUsageData?.subscription?.status && (
-
+ {subscription?.status && (
+
)}
@@ -127,26 +172,27 @@ export default function UsageDataInformation() {
@@ -193,7 +239,7 @@ export default function UsageDataInformation() {
{/* free plan has `null` status so that we can show the upgrade button */}
- {billingAndUsageData?.subscription?.status === null && (
+ {subscription?.status === null && (