Skip to content

Commit 1ed8fc9

Browse files
CodenRustCodenRust
authored
Merge pull request #1 from CodenRust/codenrust/features
feat: Add BillingSettingsThree & i18n Multi-Currency Support
2 parents b3bdf96 + b36b5fc commit 1ed8fc9

File tree

16 files changed

+1936
-53
lines changed

16 files changed

+1936
-53
lines changed

‎content/docs/components/billing-settings-three/index.mdx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: Billing Settings 3
3+
description: A user-centric billing dashboard featuring wallet balance, spend visualization, and liquid UI payment methods.
4+
---
5+
6+
import { BillingSettingsThree } from "@/components/billingsdk/billing-settings-three";
7+
import BillingSettingsThreeDemo from "@/registry/billingsdk/demo/billing-settings-three-demo";
8+
9+
A user-facing dashboard component `BillingSettingsThree` for managing billing, wallet balance, and payment methods.
10+
11+
## Preview
12+
13+
<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
14+
<Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
15+
<PreviewComponents registryName="billing-settings-3">
16+
<BillingSettingsThreeDemo />
17+
</PreviewComponents>
18+
</Tab>
19+
20+
<Tab value="Code" className="mt-3">
21+
<include cwd lang="tsx" meta='title="src/registry/billingsdk/demo/billing-settings-three-demo.tsx"'>src/registry/billingsdk/demo/billing-settings-three-demo.tsx</include>
22+
</Tab>
23+
</Tabs>
24+
25+
## Features
26+
27+
- **Minimalist Metrics**: Clean, static display of wallet balances, spend amounts, and trend percentages for maximum stability and clarity.
28+
- **Trend Indicators**: Built-in support for displaying positive/negative trends with automatic color coding and icons.
29+
- **Liquid Payment Methods**: Smooth, animated "liquid" list for adding/removing payment methods with high-fidelity transitions.
30+
- **Smart Brand Recognition**: Automatically displays high-quality icons for Visa, Mastercard, AMEX, and Rupay, with a fallback to standard card icons if external assets fail to load.
31+
- **Flexible "Add New" Logic**: Support for both in-app modal callbacks (`onAddNew`) and direct external redirects (`addNewHref`).
32+
- **Minimalist Aesthetic**: Features a zero-animation `minimal` mode that removes background decorative elements for a clean dashboard look.
33+
34+
## Usage
35+
36+
```tsx
37+
import { BillingSettingsThree } from "@/components/billingsdk/billing-settings-three";
38+
import { BillingProvider } from "@/lib/i18n-provider";
39+
40+
export default function BillingPage() {
41+
const handleAddNew = () => {
42+
console.log("Open payment method modal");
43+
};
44+
45+
return (
46+
<BillingProvider>
47+
<BillingSettingsThree
48+
balance={1250.00}
49+
balanceTrend={15.4}
50+
spend={432.50}
51+
spendTrend={-5.2}
52+
theme="classic"
53+
onAddNew={handleAddNew}
54+
// Or use addNewHref="/billing/payment-methods/new"
55+
/>
56+
</BillingProvider>
57+
);
58+
}
59+
```
60+
61+
## Props
62+
63+
| Prop | Type | Default | Description |
64+
| ---- | ---- | ------- | ----------- |
65+
| `balance` | `number` | `1250.00` | The current wallet balance to display. |
66+
| `balanceTrend` | `number` | `12.5` | Percentage change in balance (e.g., `15.4` for +15.4%). |
67+
| `balanceTrendLabel` | `string` | `"from last month"` | Label shown next to the balance trend. |
68+
| `spend` | `number` | `432.50` | The total spend for the current period. |
69+
| `spendTrend` | `number` | `-2.4` | Percentage change in spend (e.g., `-5.2` for -5.2%). |
70+
| `spendTrendLabel` | `string` | `"Current billing cycle"` | Label shown next to the spend trend. |
71+
| `currency` | `string` | `"USD"` | The currency code (e.g., "USD", "EUR"). |
72+
| `theme` | `"minimal" \| "classic"` | `"minimal"` | The visual theme variant. |
73+
| `paymentMethods` | `PaymentMethod[]` | `[...]` | Array of payment objects: `{ id, type, last4, expiry, isDefault }`. |
74+
| `transactions` | `Transaction[]` | `[...]` | Array of transactions: `{ id, description, amount, date, status }`. |
75+
| `onAddNew` | `() => void` | `undefined` | Callback for "Add New" button (e.g., to open a modal). |
76+
| `addNewHref` | `string` | `undefined` | URL for "Add New" button redirect (fallback if `onAddNew` is not provided). |
77+
78+
## Installation
79+
80+
<Tabs defaultValue="manual">
81+
82+
<TabsList>
83+
<TabsTrigger value="manual">Manual</TabsTrigger>
84+
<TabsTrigger value="cli">CLI</TabsTrigger>
85+
</TabsList>
86+
87+
<TabsContent value="manual">
88+
89+
Copy the code from `src/components/billingsdk/billing-settings-three.tsx` into your project.
90+
91+
</TabsContent>
92+
93+
<TabsContent value="cli">
94+
95+
```bash
96+
npx shadcn@latest add "https://billingsdk.com/r/billing-settings-3.json"
97+
```
98+
99+
</TabsContent>
100+
101+
</Tabs>

‎content/docs/i18n-provider.mdx‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
---
2+
title: i18n Provider
3+
description: Global currency conversion and localized formatting for billing components.
4+
---
5+
6+
import I18nDemo from "@/registry/billingsdk/demo/i18n-demo";
7+
8+
The `BillingProvider` is the core of the SDK's internationalization system. It manages global state for locales, currencies, and real-time exchange rates.
9+
10+
## Interactive Demo
11+
12+
<Tabs items={['Preview', 'Code']} className="bg-transparent border-none">
13+
<Tab value="Preview" className="border-none bg-transparent p-0 mt-3">
14+
<PreviewComponents registryName="i18n-provider">
15+
<I18nDemo />
16+
</PreviewComponents>
17+
</Tab>
18+
19+
<Tab value="Code" className="mt-3">
20+
<include cwd lang="tsx" meta='title="src/registry/billingsdk/demo/i18n-demo.tsx"'>src/registry/billingsdk/demo/i18n-demo.tsx</include>
21+
</Tab>
22+
</Tabs>
23+
24+
## Features
25+
26+
- **Real-time Conversion**: Fetches latest rates from the Frankfurter API and caches them.
27+
- **Static Fallbacks**: Includes a robust set of initial exchange rates to ensure functionality works offline or before the first fetch.
28+
- **Localized Formatting**: Leverages the native `Intl.NumberFormat` API for accurate currency symbols, grouping, and decimal placement.
29+
- **Auto-Conversion**: Components can automatically convert values from a base currency (e.g., USD) to the user's active currency.
30+
31+
## Setup
32+
33+
Wrap your application with the `BillingProvider` at the root level.
34+
35+
```tsx title="app/layout.tsx"
36+
import { BillingProvider } from "@/lib/i18n-provider";
37+
38+
export default function RootLayout({ children }) {
39+
return (
40+
<BillingProvider defaultCurrency="USD" defaultLocale="en-US">
41+
{children}
42+
</BillingProvider>
43+
);
44+
}
45+
```
46+
47+
## useBilling Hook
48+
49+
Use the `useBilling` hook to access formatting utilities and currency state.
50+
51+
### Properties
52+
53+
| Property | Type | Description |
54+
| :--- | :--- | :--- |
55+
| `currency` | `string` | The currently active currency code (e.g., "EUR"). |
56+
| `locale` | `string` | The active locale (e.g., "de-DE"). |
57+
| `setCurrency` | `(c: string) => void` | Updates the active currency and triggers re-renders. |
58+
| `formatCurrency` | `(val, opts) => string` | Formats a number with currency symbols and local rules. |
59+
| `convert` | `(val, from, to) => number` | Low-level utility for converting numbers between currencies. |
60+
61+
### Example: Manual Formatting
62+
63+
```tsx
64+
import { useBilling } from "@/lib/i18n-provider";
65+
66+
export function CustomPrice({ amount }) {
67+
const { formatCurrency } = useBilling();
68+
69+
return (
70+
<p>
71+
Trial ends in: {formatCurrency(amount, { from: "USD" })}
72+
</p>
73+
);
74+
}
75+
```
76+
77+
## Static Rates Fallback
78+
79+
The provider ships with a `STATIC_RATES` map to ensure reliable performance. These rates are used as a fallback if the API is unreachable or while rates are being fetched.
80+
81+
```json
82+
{
83+
"AUD": 1.4312,
84+
"BRL": 5.2372,
85+
"CAD": 1.3666,
86+
"EUR": 0.84789,
87+
"GBP": 0.73588,
88+
"INR": 90.66,
89+
"JPY": 157.09,
90+
...
91+
}
92+
```

‎content/docs/meta.json‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
"---Getting Started---",
44
"index",
55
"quick-start",
6+
"i18n-provider",
67
"cli",
78
"shadcn-cli-3",
89
"contribution-open-source",
@@ -19,22 +20,21 @@
1920
"components/manage-subscription/index",
2021
"components/manage-subscription/usage-based-pricing",
2122
"components/invoice-history/index",
22-
"components/usage-table/index",
2323
"components/limited-offer-dialog/index",
24-
"---Update Plan---",
25-
"components/update-plan/update-plan-card",
26-
"components/update-plan/update-plan-dialog",
27-
"---Cancel Subscription---",
28-
"components/cancel-subscription/cancel-subscription-card",
29-
"components/cancel-subscription/cancel-subscription-dialog",
30-
"---Billing & Usage Analytics---",
3124
"components/billing-screen/index",
3225
"components/billing-setting/index",
3326
"components/billing-settings-2/index",
27+
"components/billing-settings-three/index",
3428
"components/usage-meter/usage-meter-circle",
3529
"components/usage-meter/usage-meter-linear",
3630
"components/detailed-usage-table/index",
3731
"components/upcoming-charges/index",
32+
"---Update Plan---",
33+
"components/update-plan/update-plan-card",
34+
"components/update-plan/update-plan-dialog",
35+
"---Cancel Subscription---",
36+
"components/cancel-subscription/cancel-subscription-card",
37+
"components/cancel-subscription/cancel-subscription-dialog",
3838
"---Banner---",
3939
"components/banner/index",
4040
"---Trial Management---",

0 commit comments

Comments
 (0)