feat: Add BillingSettingsThree & i18n Multi-Currency Support #362
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| --- | ||
| title: Billing Settings 3 | ||
| description: A user-centric billing dashboard featuring wallet balance, spend visualization, and liquid UI payment methods. | ||
| --- | ||
|
|
||
| import { BillingSettingsThree } from "@/components/billingsdk/billing-settings-three"; | ||
| import BillingSettingsThreeDemo from "@/registry/billingsdk/demo/billing-settings-three-demo"; | ||
|
|
||
| A user-facing dashboard component `BillingSettingsThree` for managing billing, wallet balance, and payment methods. | ||
|
|
||
| ## Preview | ||
|
|
||
| <Tabs items={['Preview', 'Code']} className="bg-transparent border-none"> | ||
| <Tab value="Preview" className="border-none bg-transparent p-0 mt-3"> | ||
| <PreviewComponents registryName="billing-settings-3"> | ||
| <BillingSettingsThreeDemo /> | ||
| </PreviewComponents> | ||
| </Tab> | ||
|
|
||
| <Tab value="Code" className="mt-3"> | ||
| <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> | ||
| </Tab> | ||
| </Tabs> | ||
|
|
||
| ## Features | ||
|
|
||
| - **Minimalist Metrics**: Clean, static display of wallet balances, spend amounts, and trend percentages for maximum stability and clarity. | ||
| - **Trend Indicators**: Built-in support for displaying positive/negative trends with automatic color coding and icons. | ||
| - **Liquid Payment Methods**: Smooth, animated "liquid" list for adding/removing payment methods with high-fidelity transitions. | ||
| - **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. | ||
| - **Flexible "Add New" Logic**: Support for both in-app modal callbacks (`onAddNew`) and direct external redirects (`addNewHref`). | ||
| - **Minimalist Aesthetic**: Features a zero-animation `minimal` mode that removes background decorative elements for a clean dashboard look. | ||
|
Comment on lines
+27
to
+32
Contributor
There was a problem hiding this comment. Documentation contradicts PR description regarding animations. Line 29 describes "Smooth, animated 'liquid' list… with high-fidelity transitions," while line 32 mentions "zero-animation 🤖 Prompt for AI Agents |
||
|
|
||
| ## Usage | ||
|
|
||
| ```tsx | ||
| import { BillingSettingsThree } from "@/components/billingsdk/billing-settings-three"; | ||
| import { BillingProvider } from "@/lib/i18n-provider"; | ||
|
|
||
| export default function BillingPage() { | ||
| const handleAddNew = () => { | ||
| console.log("Open payment method modal"); | ||
| }; | ||
|
|
||
| return ( | ||
| <BillingProvider> | ||
| <BillingSettingsThree | ||
| balance={1250.00} | ||
| balanceTrend={15.4} | ||
| spend={432.50} | ||
| spendTrend={-5.2} | ||
| theme="classic" | ||
| onAddNew={handleAddNew} | ||
| // Or use addNewHref="/billing/payment-methods/new" | ||
| /> | ||
| </BillingProvider> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| ## Props | ||
|
|
||
| | Prop | Type | Default | Description | | ||
| | ---- | ---- | ------- | ----------- | | ||
| | `balance` | `number` | `1250.00` | The current wallet balance to display. | | ||
| | `balanceTrend` | `number` | `12.5` | Percentage change in balance (e.g., `15.4` for +15.4%). | | ||
| | `balanceTrendLabel` | `string` | `"from last month"` | Label shown next to the balance trend. | | ||
| | `spend` | `number` | `432.50` | The total spend for the current period. | | ||
| | `spendTrend` | `number` | `-2.4` | Percentage change in spend (e.g., `-5.2` for -5.2%). | | ||
| | `spendTrendLabel` | `string` | `"Current billing cycle"` | Label shown next to the spend trend. | | ||
| | `currency` | `string` | `"USD"` | The currency code (e.g., "USD", "EUR"). | | ||
| | `theme` | `"minimal" \| "classic"` | `"minimal"` | The visual theme variant. | | ||
| | `paymentMethods` | `PaymentMethod[]` | `[...]` | Array of payment objects: `{ id, type, last4, expiry, isDefault }`. | | ||
| | `transactions` | `Transaction[]` | `[...]` | Array of transactions: `{ id, description, amount, date, status }`. | | ||
| | `onAddNew` | `() => void` | `undefined` | Callback for "Add New" button (e.g., to open a modal). | | ||
| | `addNewHref` | `string` | `undefined` | URL for "Add New" button redirect (fallback if `onAddNew` is not provided). | | ||
|
|
||
| ## Installation | ||
|
|
||
| <Tabs defaultValue="manual"> | ||
|
|
||
| <TabsList> | ||
| <TabsTrigger value="manual">Manual</TabsTrigger> | ||
| <TabsTrigger value="cli">CLI</TabsTrigger> | ||
| </TabsList> | ||
|
|
||
| <TabsContent value="manual"> | ||
|
|
||
| Copy the code from `src/components/billingsdk/billing-settings-three.tsx` into your project. | ||
|
|
||
| </TabsContent> | ||
|
|
||
| <TabsContent value="cli"> | ||
|
|
||
| ```bash | ||
| npx shadcn@latest add "https://billingsdk.com/r/billing-settings-3.json" | ||
| ``` | ||
|
|
||
| </TabsContent> | ||
|
|
||
| </Tabs> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| --- | ||
| title: i18n Provider | ||
| description: Global currency conversion and localized formatting for billing components. | ||
| --- | ||
|
|
||
| import I18nDemo from "@/registry/billingsdk/demo/i18n-demo"; | ||
|
|
||
| The `BillingProvider` is the core of the SDK's internationalization system. It manages global state for locales, currencies, and real-time exchange rates. | ||
|
|
||
| ## Interactive Demo | ||
|
|
||
| <Tabs items={['Preview', 'Code']} className="bg-transparent border-none"> | ||
| <Tab value="Preview" className="border-none bg-transparent p-0 mt-3"> | ||
| <PreviewComponents registryName="i18n-provider"> | ||
| <I18nDemo /> | ||
| </PreviewComponents> | ||
| </Tab> | ||
|
|
||
| <Tab value="Code" className="mt-3"> | ||
| <include cwd lang="tsx" meta='title="src/registry/billingsdk/demo/i18n-demo.tsx"'>src/registry/billingsdk/demo/i18n-demo.tsx</include> | ||
| </Tab> | ||
| </Tabs> | ||
|
|
||
| ## Features | ||
|
|
||
| - **Real-time Conversion**: Fetches latest rates from the Frankfurter API and caches them. | ||
| - **Static Fallbacks**: Includes a robust set of initial exchange rates to ensure functionality works offline or before the first fetch. | ||
| - **Localized Formatting**: Leverages the native `Intl.NumberFormat` API for accurate currency symbols, grouping, and decimal placement. | ||
| - **Auto-Conversion**: Components can automatically convert values from a base currency (e.g., USD) to the user's active currency. | ||
|
|
||
| ## Setup | ||
|
|
||
| Wrap your application with the `BillingProvider` at the root level. | ||
|
|
||
| ```tsx title="app/layout.tsx" | ||
| import { BillingProvider } from "@/lib/i18n-provider"; | ||
|
|
||
| export default function RootLayout({ children }) { | ||
| return ( | ||
| <BillingProvider defaultCurrency="USD" defaultLocale="en-US"> | ||
| {children} | ||
| </BillingProvider> | ||
| ); | ||
| } | ||
| ``` | ||
|
Comment on lines
+35
to
+45
Contributor
There was a problem hiding this comment. Setup code example is missing TypeScript types. The ✏️ Suggested fix-export default function RootLayout({ children }) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {🤖 Prompt for AI Agents |
||
|
|
||
| ## useBilling Hook | ||
|
|
||
| Use the `useBilling` hook to access formatting utilities and currency state. | ||
|
|
||
| ### Properties | ||
|
|
||
| | Property | Type | Description | | ||
| | :--- | :--- | :--- | | ||
| | `currency` | `string` | The currently active currency code (e.g., "EUR"). | | ||
| | `locale` | `string` | The active locale (e.g., "de-DE"). | | ||
| | `setCurrency` | `(c: string) => void` | Updates the active currency and triggers re-renders. | | ||
| | `formatCurrency` | `(val, opts) => string` | Formats a number with currency symbols and local rules. | | ||
| | `convert` | `(val, from, to) => number` | Low-level utility for converting numbers between currencies. | | ||
|
|
||
| ### Example: Manual Formatting | ||
|
|
||
| ```tsx | ||
| import { useBilling } from "@/lib/i18n-provider"; | ||
|
|
||
| export function CustomPrice({ amount }) { | ||
| const { formatCurrency } = useBilling(); | ||
|
|
||
| return ( | ||
| <p> | ||
| Trial ends in: {formatCurrency(amount, { from: "USD" })} | ||
| </p> | ||
| ); | ||
| } | ||
| ``` | ||
|
Comment on lines
+63
to
+75
Contributor
There was a problem hiding this comment. Same missing types in the ✏️ Suggested fix-export function CustomPrice({ amount }) {
+export function CustomPrice({ amount }: { amount: number }) {🤖 Prompt for AI Agents |
||
|
|
||
| ## Static Rates Fallback | ||
|
|
||
| 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. | ||
|
|
||
| ```json | ||
| { | ||
| "AUD": 1.4312, | ||
| "BRL": 5.2372, | ||
| "CAD": 1.3666, | ||
| "EUR": 0.84789, | ||
| "GBP": 0.73588, | ||
| "INR": 90.66, | ||
| "JPY": 157.09, | ||
| ... | ||
| } | ||
| ``` | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
🧩 Analysis chain
🏁 Script executed:
Repository: dodopayments/billingsdk
Length of output: 123
🏁 Script executed:
Repository: dodopayments/billingsdk
Length of output: 4943
Remove unused import:
BillingSettingsThreeis never referenced in the MDX body.Only
BillingSettingsThreeDemois used in the Preview tab (line 16). The component is referenced in the usage code example block but that's static documentation content, not rendered JSX.✏️ Proposed fix
-import { BillingSettingsThree } from "@/components/billingsdk/billing-settings-three"; import BillingSettingsThreeDemo from "@/registry/billingsdk/demo/billing-settings-three-demo";🤖 Prompt for AI Agents