From 45d6c56d498a0459a37a6e0d841fc6a423951a44 Mon Sep 17 00:00:00 2001 From: NaderRNA Date: Tue, 1 Oct 2024 15:32:45 +1000 Subject: [PATCH] working user tracking --- webapp/src/components/LoadingBar.tsx | 43 +++++++++++++----- webapp/src/components/ProgressBar.tsx | 64 ++++++++++++++------------- webapp/src/pages/billing.tsx | 58 +++++++++++++++++------- webapp/webapp.code-workspace | 3 +- 4 files changed, 109 insertions(+), 59 deletions(-) diff --git a/webapp/src/components/LoadingBar.tsx b/webapp/src/components/LoadingBar.tsx index a68f9b069..2917dba64 100644 --- a/webapp/src/components/LoadingBar.tsx +++ b/webapp/src/components/LoadingBar.tsx @@ -1,17 +1,36 @@ +import ButtonSpinner from 'components/ButtonSpinner'; +import React from 'react'; -interface ProgressBarProps { - percentFilled: number; +interface LoadingBarProps { + total?: number; + success?: number; + failure?: number; + text?: string; } -const ProgressBar: React.FC = function ({ +const LoadingBar: React.FC = function ({ + total = null, + success = 0, + failure = 0, + text = 'Embedding' }) { + const successPercentage = (total != null ? (success / total) * 100 : 0) || 0; + const failurePercentage = (total != null ? (failure / total) * 100 : 0) || 0; + return ( +
+
+ {text} ({successPercentage.toFixed(1)}%) + +
+
+ + +
+
+ ); +}; - - return ( -
-
- -
-
- ) -} \ No newline at end of file +export default LoadingBar; diff --git a/webapp/src/components/ProgressBar.tsx b/webapp/src/components/ProgressBar.tsx index 2917dba64..873402a60 100644 --- a/webapp/src/components/ProgressBar.tsx +++ b/webapp/src/components/ProgressBar.tsx @@ -1,36 +1,40 @@ -import ButtonSpinner from 'components/ButtonSpinner'; import React from 'react'; -interface LoadingBarProps { - total?: number; - success?: number; - failure?: number; - text?: string; +interface ProgressBarProps { + max: number; + filled: number; + text: string; + numberText?: string; } -const LoadingBar: React.FC = function ({ - total = null, - success = 0, - failure = 0, - text = 'Embedding' +const ProgressBar: React.FC = function ({ + max, + filled, + text, + numberText = text }) { - const successPercentage = (total != null ? (success / total) * 100 : 0) || 0; - const failurePercentage = (total != null ? (failure / total) * 100 : 0) || 0; - return ( -
-
- {text} ({successPercentage.toFixed(1)}%) - -
-
- - -
-
- ); -}; + const percentage = filled/max * 100 -export default LoadingBar; + + return ( +
+
+

Status

+

{text}

+ +
+ ) +} + +export default ProgressBar; \ No newline at end of file diff --git a/webapp/src/pages/billing.tsx b/webapp/src/pages/billing.tsx index 7bf86eee2..251409b05 100644 --- a/webapp/src/pages/billing.tsx +++ b/webapp/src/pages/billing.tsx @@ -1,6 +1,5 @@ import * as API from '@api'; import { loadStripe } from '@stripe/stripe-js'; -import ButtonSpinner from 'components/ButtonSpinner'; import ConfirmModal from 'components/ConfirmModal'; import ErrorAlert from 'components/ErrorAlert'; import InfoAlert from 'components/InfoAlert'; @@ -10,15 +9,14 @@ import StripeCheckoutModal from 'components/StripeCheckoutModal'; import SubscriptionCard from 'components/SubscriptionCard'; import { useAccountContext } from 'context/account'; import Head from 'next/head'; -import Link from 'next/link'; import { useRouter } from 'next/router'; import { usePostHog } from 'posthog-js/react'; import React, { useEffect, useState } from 'react'; import { toast } from 'react-toastify'; -import { SubscriptionPlan, subscriptionPlans as plans } from 'struct/billing'; +import { SubscriptionPlan, subscriptionPlans as plans, pricingMatrix } from 'struct/billing'; +import ProgressBar from 'components/ProgressBar'; //DEVNOTE: see "src/lib/vectorproxy/client.ts" and "getVectorStorageForTeam", create an API route for this to get the used vector storage for this team. Once that's been retrieved use the stripe object to get the total avaiable storage and calculate the percentage -import stripe from '../lib/stripe'; const tabs = [ { name: 'Billing', href: '#billing' }, @@ -67,12 +65,15 @@ export default function Billing(props) { totalAvailable: 0, totalUsed: 0 }); - //all teams with corresponding user limit data - //custom functions (code tools), on a team level - //note you can only see the billing screen when on your own org (can use your own stripe permissions to get the addons) - //get plan using the account and use the matrix to get the total vectorGB available, then add the addons - //get plan using the account and use the matrix to get total amount of users in the org, add the addons - //need to create progressbar component + const [users, setUsers] = useState({ + totalAvailable: 0, + totalUsed: 0 + }) + const [ codeTools, setCodeTools ] = useState({ + totalAvailable: 0, + totalUsed: 0 + }); //getTools + function getPayload() { return { @@ -83,11 +84,6 @@ export default function Billing(props) { }; } - //get each user in the org to determine the usage of members - //get each team in the org to determine the - - console.log("usageState: ", usageState); - console.log("accountContext", accountContext); // TODO: move this to a lib (IF its useful in other files) const stripeMethods = [API.getPortalLink]; function createApiCallHandler(apiMethod) { @@ -118,7 +114,19 @@ export default function Billing(props) { API.getAccount({ resourceSlug }, dispatch, setError, router); } } + + async function fetchOrg(slug) { + await API.getOrg({ resourceSlug: slug }, setUsageState, setError, router); + } + + async function refreshOrg(slug) { + fetchOrg(slug); + refreshAccountContext(); + } + useEffect(() => { + refreshOrg(accountContext?.account?.currentTeam); + }, []); useEffect(() => { API.checkStripeReady( @@ -141,6 +149,9 @@ export default function Billing(props) { }, [resourceSlug]); + + console.log("UsageState", usageState); + useEffect(() => { const timeout = setTimeout(() => { refreshAccountContext(); @@ -174,6 +185,16 @@ ${missingEnvs.join('\n')}`} const payload = getPayload(); + //set the state of all the usage variable + if(usageState){ + const { members, org } = usageState; + let totalAvailable = pricingMatrix[stripePlan]?.users + stripeAddons?.users + const newState = { + totalAvailable: totalAvailable, + totalUsed: members?.length + } + } + return ( <> @@ -353,7 +374,12 @@ ${missingEnvs.join('\n')}`}

View Usage

- +
)} diff --git a/webapp/webapp.code-workspace b/webapp/webapp.code-workspace index 876a1499c..61e510d26 100644 --- a/webapp/webapp.code-workspace +++ b/webapp/webapp.code-workspace @@ -4,5 +4,6 @@ "path": "." } ], - "settings": {} + "settings": { + } } \ No newline at end of file