Price selector

1'use client';
2 
3import * as React from 'react';
4 
5export interface PriceOption {
6  price_id: string;
7  amount: number;
8  billing_interval?: string | null;
9  is_active?: boolean;
10  is_default?: boolean;
11}
12 
13export interface PriceSelectorProps {
14  prices: PriceOption[];
15  selectedPriceId: string | null;
16  onPriceSelect: (priceId: string) => void;
17  currencyCode?: string;
18  embedded?: boolean;
19  /** Matches checkout.billing_cycle.choose_plan */
20  label?: string;
21  /** Matches checkout.billing_cycle.save */
22  saveLabel?: string;
23  className?: string;
24}
25 
26const INTERVAL_LABELS: Record<string, string> = {
27  day: 'day',
28  week: 'week',
29  'bi-weekly': 'bi-weekly',
30  month: 'month',
31  monthly: 'month',
32  'bi-monthly': 'bi-monthly',
33  quarterly: 'quarter',
34  'semi-annual': 'semi-annual',
35  year: 'year',
36  yearly: 'year',
37  lifetime: 'lifetime',
38  unit: 'unit',
39};
40 
41function cn(...classes: Array<string | false | null | undefined>) {
42  return classes.filter(Boolean).join(' ');
43}
44 
45function formatCurrency(amount: number, currency: string) {
46  const locale = currency === 'XOF' ? 'fr-FR' : undefined;
47  const formattedAmount = amount.toLocaleString(locale, {
48    minimumFractionDigits: currency === 'USD' ? 2 : 0,
49    maximumFractionDigits: currency === 'USD' ? 2 : 0,
50  });
51  const displayCurrency = currency === 'XOF' ? 'F CFA' : currency;
52  return `${formattedAmount} ${displayCurrency}`;
53}
54 
55function formatBillingIntervalLabel(interval: string | null | undefined) {
56  if (!interval) return 'month';
57  return INTERVAL_LABELS[interval] ?? interval;
58}
59 
60export function PriceSelector({
61  prices,
62  selectedPriceId,
63  onPriceSelect,
64  currencyCode = 'XOF',
65  embedded = false,
66  label = 'Choose your billing cycle',
67  saveLabel = 'Save',
68  className,
69}: PriceSelectorProps) {
70  const activePrices = prices.filter((price) => price.is_active !== false);
71 
72  if (activePrices.length <= 1) {
73    return null;
74  }
75 
76  const defaultPrice = activePrices.find((price) => price.is_default);
77  const monthlyPrice = activePrices.find(
78    (price) =>
79      price.billing_interval === 'month' ||
80      price.billing_interval === 'monthly',
81  );
82 
83  const calculateSavings = (price: PriceOption) => {
84    if (defaultPrice && defaultPrice.price_id !== price.price_id) {
85      const savingsPercent = Math.round(
86        ((defaultPrice.amount - price.amount) / defaultPrice.amount) * 100,
87      );
88      const savingsAmount = defaultPrice.amount - price.amount;
89 
90      if (savingsPercent > 0) {
91// … truncated