feat: plans page revamp

web/apps/admin/src/utils/helper.ts

@@ -1,22 +1,22 @@
-import dayjs from "dayjs";
-import type { TableColumnMetadata } from "~/types/types";
-import { DEFAULT_DATE_FORMAT } from "./constants";
-import { BillingAccount_Address } from "@raystack/proton/frontier";
+import dayjs from 'dayjs';
+import type { TableColumnMetadata } from '~/types/types';
+import { DEFAULT_DATE_FORMAT } from './constants';
+import { BillingAccount_Address } from '@raystack/proton/frontier';
 
 const currencySymbolMap: Record<string, string> = {
-  usd: "$",
-  inr: "₹",
+  usd: '$',
+  inr: '₹'
 } as const;
 
 const currencyDecimalMap: Record<string, number> = {
   usd: 2,
-  inr: 2,
+  inr: 2
 } as const;
 const DEFAULT_DECIMAL = 0;
 
 export const getCurrencyValue = (
-  value: string = "",
-  currency: string = "usd",
+  value: string = '',
+  currency: string = 'usd'
 ) => {
   const symbol =
     (currency?.toLowerCase() && currencySymbolMap[currency?.toLowerCase()]) ||
@@ -28,15 +28,15 @@ export const getCurrencyValue = (
   const calculatedValue = (
     parseInt(value) / Math.pow(10, currencyDecimal)
   ).toFixed(currencyDecimal);
-  const [intValue, decimalValue] = calculatedValue.toString().split(".");
+  const [intValue, decimalValue] = calculatedValue.toString().split('.');
   return [intValue, decimalValue, symbol];
 };
 
 export function reduceByKey(data: Record<string, any>[], key: string) {
   return data.reduce((acc, value) => {
     return {
       ...acc,
-      [value[key]]: value,
+      [value[key]]: value
     };
   }, {});
 }
@@ -52,16 +52,16 @@ export const keyToColumnMetaObject = (key: any) =>
  * @desc returns date string - Eg, June 13, 2025. return '-' if the date in the argument is invalid.
  */
 export const getFormattedDateString = (date: string) =>
-  date ? dayjs(date).format(DEFAULT_DATE_FORMAT) : "-";
+  date ? dayjs(date).format(DEFAULT_DATE_FORMAT) : '-';
 
-export const converBillingAddressToString = (
-  address?: BillingAccount_Address,
+export const convertBillingAddressToString = (
+  address?: BillingAccount_Address
 ) => {
-  if (!address) return "";
+  if (!address) return '';
   const { line1, line2, city, state, country, postalCode } = address;
   return [line1, line2, city, state, country, postalCode]
     .filter(v => v)
-    .join(", ");
+    .join(', ');
 };
 
 /**
@@ -70,12 +70,12 @@ export const converBillingAddressToString = (
  * @param filename - The name of the file to download
  */
 export const downloadFile = (data: File | Blob, filename: string) => {
-  const link = document.createElement("a");
+  const link = document.createElement('a');
   const downloadUrl = window.URL.createObjectURL(
-    data instanceof Blob ? data : new Blob([data]),
+    data instanceof Blob ? data : new Blob([data])
   );
   link.href = downloadUrl;
-  link.setAttribute("download", filename);
+  link.setAttribute('download', filename);
   document.body.appendChild(link);
   link.click();
   link.parentNode?.removeChild(link);
@@ -91,7 +91,7 @@ export const downloadFile = (data: File | Blob, filename: string) => {
 export const exportCsvFromStream = async <T>(
   streamingMethod: (request: T) => AsyncIterable<{ data?: Uint8Array }>,
   request: T,
-  filename: string,
+  filename: string
 ) => {
   const chunks: Uint8Array[] = [];
 
@@ -103,17 +103,17 @@ export const exportCsvFromStream = async <T>(
 
   // BlobPart is a DOM global type; no-undef doesn't recognize type-only refs
   // eslint-disable-next-line no-undef
-  const blob = new Blob(chunks as BlobPart[], { type: "text/csv" });
+  const blob = new Blob(chunks as BlobPart[], { type: 'text/csv' });
   downloadFile(blob, filename);
 };
 
-const ZERO_UUID = "00000000-0000-0000-0000-000000000000" as const;
+const ZERO_UUID = '00000000-0000-0000-0000-000000000000' as const;
 /**
  * Checks if a UUID is the zero UUID (all zeros).
  * @param {string} uuid - The UUID to check.
  * @returns {boolean} True if the UUID is all zeros, false otherwise.
  */
 export function isZeroUUID(uuid: string) {
-  if (typeof uuid !== "string") return false;
+  if (typeof uuid !== 'string') return false;
   return uuid.toLowerCase() === ZERO_UUID;
 }

web/apps/client-demo/src/Router.tsx

@@ -16,11 +16,13 @@ import Members from './pages/settings/Members';
 import Security from './pages/settings/Security';
 import Projects from './pages/settings/Projects';
 import ProjectDetails from './pages/settings/ProjectDetails';
+import Billing from './pages/settings/Billing';
 import Tokens from './pages/settings/Tokens';
 import Teams from './pages/settings/Teams';
 import TeamDetails from './pages/settings/TeamDetails';
 import ServiceAccounts from './pages/settings/ServiceAccounts';
 import ServiceAccountDetails from './pages/settings/ServiceAccountDetails';
+import Plans from './pages/settings/Plans';
 
 function Router() {
   return (
@@ -43,11 +45,13 @@ function Router() {
           <Route path="security" element={<Security />} />
           <Route path="projects" element={<Projects />} />
           <Route path="projects/:projectId" element={<ProjectDetails />} />
+          <Route path="billing" element={<Billing />} />
           <Route path="tokens" element={<Tokens />} />
           <Route path="teams" element={<Teams />} />
           <Route path="teams/:teamId" element={<TeamDetails />} />
           <Route path="service-accounts" element={<ServiceAccounts />} />
           <Route path="service-accounts/:serviceAccountId" element={<ServiceAccountDetails />} />
+          <Route path="plans" element={<Plans />} />
         </Route >
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes >

web/apps/client-demo/src/pages/Settings.tsx

@@ -11,9 +11,11 @@ const NAV_ITEMS = [
   { label: 'Members', path: 'members' },
   { label: 'Security', path: 'security' },
   { label: 'Projects', path: 'projects' },
+  { label: 'Billing', path: 'billing' },
   { label: 'Tokens', path: 'tokens' },
   { label: 'Teams', path: 'teams' },
-  { label: 'Service Accounts', path: 'service-accounts' }
+  { label: 'Service Accounts', path: 'service-accounts' },
+  { label: 'Plans', path: 'plans' }
 ];
 
 export default function Settings() {

web/apps/client-demo/src/pages/settings/Billing.tsx

@@ -0,0 +1,5 @@
+import { BillingView } from '@raystack/frontier/react';
+
+export default function Billing() {
+  return <BillingView />;
+}

web/apps/client-demo/src/pages/settings/Plans.tsx

@@ -0,0 +1,5 @@
+import { PlansView } from '@raystack/frontier/react';
+
+export default function Plans() {
+  return <PlansView />;
+}

web/sdk/admin/utils/helper.ts

@@ -5,27 +5,34 @@ export function reduceByKey<T extends Record<string, unknown>>(
   return data.reduce(
     (acc, value) => ({
       ...acc,
-      [String(value[key])]: value,
+      [String(value[key])]: value
     }),
     {} as Record<string, T>
   );
 }
 
-const ZERO_UUID = "00000000-0000-0000-0000-000000000000" as const;
+const ZERO_UUID = '00000000-0000-0000-0000-000000000000' as const;
 
 export function isZeroUUID(uuid: string) {
-  if (typeof uuid !== "string") return false;
+  if (typeof uuid !== 'string') return false;
   return uuid.toLowerCase() === ZERO_UUID;
 }
 
 export function capitalizeFirstLetter(str: string) {
   return str.charAt(0).toUpperCase() + str.slice(1);
 }
 
-export function converBillingAddressToString(
-  address?: { line1?: string; line2?: string; city?: string; state?: string; country?: string; postalCode?: string },
-) {
-  if (!address) return "";
+export function convertBillingAddressToString(address?: {
+  line1?: string;
+  line2?: string;
+  city?: string;
+  state?: string;
+  country?: string;
+  postalCode?: string;
+}) {
+  if (!address) return '';
   const { line1, line2, city, state, country, postalCode } = address;
-  return [line1, line2, city, state, country, postalCode].filter(Boolean).join(", ");
+  return [line1, line2, city, state, country, postalCode]
+    .filter(Boolean)
+    .join(', ');
 }

web/sdk/admin/views/organizations/details/side-panel/billing-details-section.tsx

@@ -1,6 +1,6 @@
 import { CopyButton, Flex, Link, List, Text } from "@raystack/apsara";
 import styles from "./side-panel.module.css";
-import { converBillingAddressToString } from "../../../../utils/helper";
+import { convertBillingAddressToString } from "../../../../utils/helper";
 import Skeleton from "react-loading-skeleton";
 import { useContext, useEffect } from "react";
 import { CalendarIcon } from "@radix-ui/react-icons";
@@ -93,7 +93,7 @@ export const BillingDetailsSection = () => {
           ) : (
             <Text>
               {billingAccount?.address
-                ? converBillingAddressToString(billingAccount.address)
+                ? convertBillingAddressToString(billingAccount.address)
                 : "N/A"}
             </Text>
           )}

web/sdk/react/index.ts

@@ -37,12 +37,14 @@ export { SessionsView } from './views-new/sessions';
 export { MembersView } from './views-new/members';
 export { SecurityView } from './views-new/security';
 export { ProjectsView, ProjectDetailsView } from './views-new/projects';
+export { BillingView } from './views-new/billing';
 export { TokensView } from './views-new/tokens';
 export { TeamsView, TeamDetailsView } from './views-new/teams';
 export {
   ServiceAccountsView,
   ServiceAccountDetailsView
 } from './views-new/service-accounts';
+export { PlansView } from './views-new/plans';
 
 export type {
   FrontierClientOptions,

web/sdk/react/utils/index.ts

@@ -23,7 +23,7 @@ import { create } from '@bufbuild/protobuf';
 export const AuthTooltipMessage =
   'You don’t have access to perform this action';
 
-export const converBillingAddressToString = (
+export const convertBillingAddressToString = (
   address?: BillingAccountAddress
 ) => {
   if (!address) return '';
@@ -132,7 +132,10 @@ export const checkSimilarPlans = (
  * @param locale - The locale to use for formatting. Defaults to the runtime's default locale.
  * @returns The formatted string (e.g. "1,234,567" in given locale).
  */
-export function getFormattedNumberString(num: number | bigint = 0, locale?: string) {
+export function getFormattedNumberString(
+  num: number | bigint = 0,
+  locale?: string
+) {
   return num.toLocaleString(locale);
 }
 

web/sdk/react/views-new/billing/billing-view.module.css

@@ -0,0 +1,51 @@
+.detailsBox {
+  padding: var(--rs-space-4);
+  display: flex;
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
+  background: var(--rs-color-background-base-primary);
+  border-radius: var(--rs-radius-1);
+  gap: var(--rs-space-5);
+  flex-direction: column;
+  flex: 1;
+}
+
+.billingCycleBox {
+  padding: var(--rs-space-4);
+  border-radius: var(--rs-radius-1);
+  border: 0.5px solid var(--rs-color-border-base-tertiary);
+  background: var(--rs-color-background-base-primary);
+}
+
+.currentPlanInfoBox {
+  padding: var(--rs-space-3);
+  border-radius: var(--rs-radius-1);
+  border: 0.5px solid var(--rs-color-border-accent-primary);
+  background: var(--rs-color-background-accent-primary);
+}
+
+.paymentIssueBox {
+  padding: var(--rs-space-3);
+  border-radius: var(--rs-radius-1);
+  border: 0.5px solid var(--rs-color-border-danger-primary);
+  background: var(--rs-color-background-danger-primary);
+}
+
+.separator {
+  width: 1px;
+  height: 16px;
+  background: var(--rs-color-border-base-secondary);
+}
+
+.linkColumn {
+  text-align: right;
+}
+
+.linkColumn > a {
+  color: var(--rs-color-foreground-accent-primary);
+  text-decoration: none;
+}
+
+.dialogFormBody {
+  max-height: 424px;
+  overflow-y: auto;
+}