feat(sdk): add tokens screen (#533)

* feat: add tokens page

* feat: add tokens route to the router

* feat: add tokens route to sidebar

* feat: implement balance api to token screen

* chore: show loading in headers

* refactor: move getFormattedNumberString to utils

* chore: show toast if api fetch fails

Author: rsbh

sdks/js/packages/core/react/assets/coin.svg

@@ -36,6 +36,7 @@ import { SkeletonTheme } from 'react-loading-skeleton';
 import { InviteTeamMembers } from './teams/members/invite';
 import { DeleteDomain } from './domain/delete';
 import Billing from './billing';
+import Tokens from './tokens';
 import { EditBillingAddress } from './billing/address/edit';
 import Plans from './plans';
 import ConfirmPlanChange from './plans/confirm-change';
@@ -44,10 +45,14 @@ interface OrganizationProfileProps {
   organizationId: string;
   defaultRoute?: string;
   tempShowBilling?: boolean;
+  tempShowTokens?: boolean;
 }
 
 const routerContext = new RouterContext<
-  Pick<OrganizationProfileProps, 'organizationId' | 'tempShowBilling'>
+  Pick<
+    OrganizationProfileProps,
+    'organizationId' | 'tempShowBilling' | 'tempShowTokens'
+  >
 >();
 
 const RootRouter = () => {
@@ -246,6 +251,12 @@ const planDowngradeRoute = new Route({
   component: ConfirmPlanChange
 });
 
+const tokensRoute = new Route({
+  getParentRoute: () => rootRoute,
+  path: '/tokens',
+  component: Tokens
+});
+
 const routeTree = rootRoute.addChildren([
   indexRoute.addChildren([deleteOrgRoute]),
   securityRoute,
@@ -262,18 +273,20 @@ const routeTree = rootRoute.addChildren([
   profileRoute,
   preferencesRoute,
   billingRoute.addChildren([editBillingAddressRoute]),
-  plansRoute.addChildren([planDowngradeRoute])
+  plansRoute.addChildren([planDowngradeRoute]),
+  tokensRoute
 ]);
 
 const router = new Router({
   routeTree,
-  context: { organizationId: '', tempShowBilling: false }
+  context: { organizationId: '', tempShowBilling: false, tempShowTokens: false }
 });
 
 export const OrganizationProfile = ({
   organizationId,
   defaultRoute = '/',
-  tempShowBilling = false
+  tempShowBilling = false,
+  tempShowTokens = false
 }: OrganizationProfileProps) => {
   const memoryHistory = createMemoryHistory({
     initialEntries: [defaultRoute]
@@ -282,7 +295,7 @@ export const OrganizationProfile = ({
   const memoryRouter = new Router({
     routeTree,
     history: memoryHistory,
-    context: { organizationId, tempShowBilling }
+    context: { organizationId, tempShowBilling, tempShowTokens }
   });
 
   return <RouterProvider router={memoryRouter} />;

sdks/js/packages/core/react/components/organization/profile.tsx

@@ -7,6 +7,7 @@ export type NavigationItemsTypes = {
 
 interface getOrganizationNavItemsOptions {
   tempShowBilling?: boolean;
+  tempShowTokens?: boolean;
   canSeeBilling?: boolean;
 }
 
@@ -44,6 +45,11 @@ export const getOrganizationNavItems = (
       to: '/billing',
       show: options?.tempShowBilling && options?.canSeeBilling
     },
+    {
+      name: 'Tokens',
+      to: '/tokens',
+      show: options?.tempShowTokens
+    },
     {
       name: 'Plans',
       to: '/plans',

sdks/js/packages/core/react/components/organization/sidebar/helpers.ts

@@ -21,7 +21,7 @@ import styles from './sidebar.module.css';
 export const Sidebar = () => {
   const [search, setSearch] = useState('');
   const routerState = useRouterState();
-  const { organizationId, tempShowBilling } = useRouterContext({
+  const { organizationId, tempShowBilling, tempShowTokens } = useRouterContext({
     from: '__root__'
   });
 
@@ -62,9 +62,10 @@ export const Sidebar = () => {
     () =>
       getOrganizationNavItems({
         tempShowBilling: tempShowBilling,
-        canSeeBilling: canSeeBilling
+        canSeeBilling: canSeeBilling,
+        tempShowTokens: tempShowTokens
       }),
-    [tempShowBilling, canSeeBilling]
+    [tempShowBilling, canSeeBilling, tempShowTokens]
   );
 
   return (

sdks/js/packages/core/react/components/organization/sidebar/index.tsx

@@ -0,0 +1,131 @@
+import { Flex, Image, Text } from '@raystack/apsara';
+import { styles } from '../styles';
+import Skeleton from 'react-loading-skeleton';
+import tokenStyles from './token.module.css';
+import { useFrontier } from '~/react/contexts/FrontierContext';
+import { useEffect, useState } from 'react';
+import coin from '~/react/assets/coin.svg';
+import { getFormattedNumberString } from '~/react/utils';
+import { toast } from 'sonner';
+
+interface TokenHeaderProps {
+  billingSupportEmail?: string;
+  isLoading?: boolean;
+}
+
+const TokensHeader = ({ billingSupportEmail, isLoading }: TokenHeaderProps) => {
+  return (
+    <Flex direction="column" gap="small">
+      {isLoading ? (
+        <Skeleton containerClassName={tokenStyles.flex1} />
+      ) : (
+        <Text size={6}>Tokens</Text>
+      )}
+      {isLoading ? (
+        <Skeleton containerClassName={tokenStyles.flex1} />
+      ) : (
+        <Text size={4} style={{ color: 'var(--foreground-muted)' }}>
+          Oversee your billing and invoices.
+          {billingSupportEmail ? (
+            <>
+              {' '}
+              For more details, contact{' '}
+              <a
+                href={`mailto:${billingSupportEmail}`}
+                target="_blank"
+                style={{ fontWeight: 400, color: 'var(--foreground-accent)' }}
+              >
+                {billingSupportEmail}
+              </a>
+            </>
+          ) : null}
+        </Text>
+      )}
+    </Flex>
+  );
+};
+
+interface BalancePanelProps {
+  balance: number;
+  isLoading: boolean;
+}
+
+function BalancePanel({ balance, isLoading }: BalancePanelProps) {
+  const formattedBalance = getFormattedNumberString(balance);
+  return (
+    <Flex className={tokenStyles.balancePanel}>
+      <Flex className={tokenStyles.balanceTokenBox}>
+        {/* @ts-ignore */}
+        <Image src={coin} alt="coin" className={tokenStyles.coinIcon} />
+        <Flex direction={'column'} gap={'extra-small'}>
+          <Text weight={500} style={{ color: 'var(--foreground-muted)' }}>
+            Available tokens
+          </Text>
+          {isLoading ? (
+            <Skeleton style={{ height: '24px' }} />
+          ) : (
+            <Text size={9} weight={600}>
+              {formattedBalance}
+            </Text>
+          )}
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}
+
+export default function Tokens() {
+  const {
+    config,
+    client,
+    activeOrganization,
+    billingAccount,
+    isActiveOrganizationLoading,
+    isBillingAccountLoading
+  } = useFrontier();
+  const [tokenBalance, setTokenBalance] = useState(0);
+  const [isTokensLoading, setIsTokensLoading] = useState(false);
+
+  useEffect(() => {
+    async function getBalance(orgId: string, billingAccountId: string) {
+      try {
+        setIsTokensLoading(true);
+        const resp = await client?.frontierServiceGetBillingBalance(
+          orgId,
+          billingAccountId
+        );
+        const tokens = resp?.data?.balance?.amount || '0';
+        setTokenBalance(Number(tokens));
+      } catch (err: any) {
+        console.error(err);
+        toast.error('Unable to fetch balance');
+      } finally {
+        setIsTokensLoading(false);
+      }
+    }
+
+    if (activeOrganization?.id && billingAccount?.id) {
+      getBalance(activeOrganization?.id, billingAccount?.id);
+    }
+  }, [activeOrganization?.id, billingAccount?.id, client]);
+
+  const isLoading =
+    isActiveOrganizationLoading || isBillingAccountLoading || isTokensLoading;
+
+  return (
+    <Flex direction="column" style={{ width: '100%' }}>
+      <Flex style={styles.header}>
+        <Text size={6}>Tokens</Text>
+      </Flex>
+      <Flex direction="column" gap="large" style={styles.container}>
+        <Flex direction="column" gap={'large'}>
+          <TokensHeader
+            billingSupportEmail={config.billing?.supportEmail}
+            isLoading={isLoading}
+          />
+          <BalancePanel balance={tokenBalance} isLoading={isLoading} />
+        </Flex>
+      </Flex>
+    </Flex>
+  );
+}

sdks/js/packages/core/react/components/organization/tokens/index.tsx

@@ -0,0 +1,18 @@
+.flex1 {
+  flex: 1;
+}
+
+.coinIcon {
+  height: 48px;
+  width: 48px;
+}
+
+.balancePanel {
+  padding: var(--pd-16);
+  border-radius: var(--br-4);
+  border: 1px solid var(--border-base);
+}
+
+.balanceTokenBox {
+  gap: 12px;
+}

sdks/js/packages/core/react/components/organization/tokens/token.module.css

@@ -70,3 +70,16 @@ export const getPlanChangeAction = (
     };
   }
 };
+
+export function getFormattedNumberString(num: Number = 0) {
+  const numString = num.toString();
+  const length = numString.length;
+
+  return numString.split('').reduce((acc, val, i) => {
+    const diff = length - i;
+    if (diff % 3 === 0 && diff < length) {
+      return acc + ',' + val;
+    }
+    return acc + val;
+  }, '');
+}