```tsx title="src/components/billing-settings-2-demo.tsx"
"use client";
import { BillingSettings2 } from "@/components/billingsdk/billing-settings-2";
import { useState } from "react";
export function BillingSettings2Demo() {
const [inputValues, setInputValues] = useState({
fullName: "",
billingEmail: "",
taxId: "",
});
const [featureToggles, setFeatureToggles] = useState({
autoRenewal: true,
invoiceEmails: true,
promotionalEmails: false,
});
const [selectedCurrency, setSelectedCurrency] = useState("usd");
const handleInputChange = (field: string, value: string) => {
setInputValues((prev) => ({
...prev,
[field]: value,
}));
};
// Handler wrappers
const createInputChangeHandler = (field: string) => (value: string) => {
handleInputChange(field, value);
};
const createCurrencyChangeHandler =
(setCurrency: (value: string) => void) => (value: string) => {
console.log("Currency changed to:", value);
setCurrency(value);
// Add: updatePricing(value), savePreference(value), etc.
};
const handleFeatureToggle = (feature: string, enabled: boolean) => {
setFeatureToggles((prev) => ({
...prev,
[feature]: enabled,
}));
};
const handleSave = () => {
// Validation passed if we reach here
alert("Settings saved successfully!");
console.log("Input values:", inputValues);
console.log("Feature toggles:", featureToggles);
console.log("Selected currency:", selectedCurrency);
};
const handleCancel = () => {
alert("Changes cancelled!");
};
return (
{
if (value && !/^[A-Z]{2}\d{8,12}$/.test(value)) {
return "Tax ID should be in format: XX followed by 8-12 digits (e.g., EU123456789)";
}
return null;
},
},
},
]}
features={[
{
id: "auto-renewal",
label: "Auto-Renewal",
description: "Automatically renew your subscription",
enabled: featureToggles.autoRenewal,
onToggle: (enabled) => handleFeatureToggle("autoRenewal", enabled),
},
{
id: "invoice-emails",
label: "Invoice Emails",
description: "Receive emails when invoices are generated",
enabled: featureToggles.invoiceEmails,
onToggle: (enabled) =>
handleFeatureToggle("invoiceEmails", enabled),
},
{
id: "promotional-emails",
label: "Promotional Emails",
description:
"Receive occasional updates about new features and offers",
enabled: featureToggles.promotionalEmails,
onToggle: (enabled) =>
handleFeatureToggle("promotionalEmails", enabled),
},
]}
// CURRENCY: Shows all 180+ currencies by default
// currencies={['USD', 'EUR', 'GBP']} // Specific currencies
// currencyOptions={[{value: 'btc', label: 'Bitcoin'}]} // Custom
defaultCurrency={selectedCurrency}
onCurrencyChange={createCurrencyChangeHandler(setSelectedCurrency)}
onSave={handleSave}
onCancel={handleCancel}
saveButtonText="Save Preferences"
cancelButtonText="Discard Changes"
/>
{/*
USAGE EXAMPLES:
- Specific: currencies={['USD', 'EUR']}
- Custom: currencyOptions={[{value: 'btc', label: 'Bitcoin'}]}
- All: (no currency props) = 180+ currencies
- Handler: onCurrencyChange={(c) => updatePricing(c)}
*/}
);
}
```