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 && (