Billing Address

1"use client";
2 
3import * as React from "react";
4import { Input } from "@/components/ui/input";
5import {
6  Select,
7  SelectContent,
8  SelectItem,
9  SelectTrigger,
10  SelectValue,
11} from "@/components/ui/select";
12import {
13  COUNTRIES,
14  getStatesForCountry,
15  type IState,
16} from "@/lib/billing-address-data";
17import { useControllableState } from "@/lib/use-controllable-state";
18import { cn } from "@/lib/utils";
19 
20interface BillingAddressContextValue {
21  countryCode: string;
22  setCountryCode: (code: string) => void;
23  states: IState[];
24}
25 
26const BillingAddressContext =
27  React.createContext<BillingAddressContextValue | null>(null);
28 
29function useBillingAddressContext() {
30  const context = React.useContext(BillingAddressContext);
31  if (!context) {
32    throw new Error(
33      "BillingAddress components must be used within a BillingAddress provider",
34    );
35  }
36  return context;
37}
38 
39interface BillingAddressProps
40  extends Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> {
41  /** Controlled country code (ISO 3166-1 alpha-2) */
42  country?: string;
43  /** Default country code for uncontrolled mode */
44  defaultCountry?: string;
45  /** Callback when country changes */
46  onCountryChange?: (code: string) => void;
47}
48 
49const BillingAddress = React.forwardRef<HTMLDivElement, BillingAddressProps>(
50  (
51    {
52      className,
53      country,
54      defaultCountry = "US",
55      onCountryChange,
56      children,
57      ...props
58    },
59    ref,
60  ) => {
61    const [countryCode, setCountryCode] = useControllableState(
62      country,
63      defaultCountry,
64      onCountryChange,
65    );
66 
67    const states = React.useMemo(
68      () => getStatesForCountry(countryCode),
69      [countryCode],
70    );
71 
72    const contextValue = React.useMemo(
73      () => ({ countryCode, setCountryCode, states }),
74      [countryCode, setCountryCode, states],
75    );
76 
77    return (
78      <BillingAddressContext.Provider value={contextValue}>
79        <div
80          ref={ref}
81          className={cn("flex flex-col gap-4", className)}
82          {...props}
83        >
84          {children}
85        </div>
86      </BillingAddressContext.Provider>
87    );
88  },
89);
90BillingAddress.displayName = "BillingAddress";
91 
92/**
93 * Configuration for billing address fields.
94 * Ensures proper browser autofill, accessibility, and UX.
95 */
96const billingFieldConfig = {
97  name: {
98    autocomplete: "billing name",
99    inputMode: "text" as const,
100    spellCheck: true,
101  },
102  line1: {
103    autocomplete: "billing address-line1",
104// … truncated