Billing Settings 2

1"use client";
2 
3import { Button } from "@/components/ui/button";
4import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
5import { Input } from "@/components/ui/input";
6import { Label } from "@/components/ui/label";
7import {
8  Select,
9  SelectContent,
10  SelectItem,
11  SelectTrigger,
12  SelectValue,
13} from "@/components/ui/select";
14import { Switch } from "@/components/ui/switch";
15import { cn } from "@/lib/utils";
16import { useState, useMemo } from "react";
17import currencyCodes from "currency-codes";
18 
19// Define types for our props
20export interface FeatureToggle {
21  id: string;
22  label: string;
23  description: string;
24  enabled: boolean;
25  onToggle: (enabled: boolean) => void;
26}
27 
28export interface InputField {
29  id: string;
30  name: string;
31  value?: string;
32  defaultValue?: string;
33  placeholder: string;
34  onChange: (value: string) => void;
35  label: string;
36  helperText?: string;
37  type?: "text" | "email" | "tel" | "url" | "number";
38  required?: boolean;
39  validation?: {
40    minLength?: number;
41    maxLength?: number;
42    pattern?: RegExp;
43    customValidator?: (value: string) => string | null;
44  };
45}
46 
47export interface ValidationError {
48  field: string;
49  message: string;
50}
51 
52export interface BillingSettings2Props {
53  className?: string;
54  title?: string;
55  features?: FeatureToggle[];
56  inputFields?: InputField[];
57  onSave?: () => void;
58  onCancel?: () => void;
59  saveButtonText?: string;
60  cancelButtonText?: string;
61  currencies?: string[]; // Array of currency codes to show (e.g., ['USD', 'EUR', 'GBP'])
62  currencyOptions?: { value: string; label: string }[]; // Override for custom currency options
63  defaultCurrency?: string;
64  onCurrencyChange?: (value: string) => void;
65  enableValidation?: boolean;
66  currencyRequired?: boolean;
67}
68 
69// Validation helper functions
70const validateEmail = (email: string): string | null => {
71  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
72  if (!emailRegex.test(email)) {
73    return "Please enter a valid email address";
74  }
75  return null;
76};
77 
78const validateField = (value: string, field: InputField): string | null => {
79  // Check required validation
80  if (field.required && !value.trim()) {
81    return `${field.label} is required`;
82  }
83 
84  // Skip other validations if field is empty and not required
85  if (!value.trim() && !field.required) {
86    return null;
87  }
88 
89  // Check email validation
90  if (field.type === "email") {
91    return validateEmail(value);
92  }
93 
94  // Check custom validation
95// … truncated