Payment provider selector

1'use client';
2 
3/* eslint-disable @next/next/no-img-element -- lomi. UI registry components are framework-portable copy-paste components. */
4 
5import * as React from 'react';
6import { CheckoutCard } from './lib/checkout-card';
7import {
8  CheckoutInput,
9  checkoutCustomerFieldClass,
10} from './lib/checkout-input';
11import './lib/checkout-ui.css';
12 
13function cn(...classes: Array<string | false | null | undefined>) {
14  return classes.filter(Boolean).join(' ');
15}
16 
17export type ProviderId = 'WAVE' | 'MTN' | 'cards' | 'spi';
18 
19type MethodInfo = {
20  image: string;
21  label: string;
22  imageClass: string;
23  containerClass: string;
24  width: number;
25  height: number;
26};
27 
28const MOBILE_MONEY_IDS = new Set<ProviderId>(['WAVE', 'MTN']);
29 
30const DEFAULT_PROVIDERS: ProviderId[] = ['WAVE', 'MTN', 'cards', 'spi'];
31 
32const DEFAULT_LABELS: Record<ProviderId, string> = {
33  WAVE: 'Wave',
34  MTN: 'MTN',
35  cards: 'Card',
36  spi: 'π—SPI',
37};
38 
39function getMethodInfo(method: ProviderId, cardLabel: string): MethodInfo {
40  if (method === 'cards') {
41    return {
42      image: '/placeholder/card.webp',
43      label: cardLabel,
44      imageClass: 'object-contain -ml-1.5 translate-y-[3px]',
45      containerClass: 'justify-center mb-0.5',
46      width: 40,
47      height: 40,
48    };
49  }
50 
51  if (MOBILE_MONEY_IDS.has(method)) {
52    return {
53      image:
54        method === 'WAVE'
55          ? '/payment_channels/wave.webp'
56          : `/payment_channels/${method.toLowerCase()}.webp`,
57      label: DEFAULT_LABELS[method],
58      imageClass: 'object-contain rounded-[4px] translate-y-1.5',
59      containerClass: 'justify-start w-full mb-2 -ml-0',
60      width: 28,
61      height: 28,
62    };
63  }
64 
65  if (method === 'spi') {
66    return {
67      image: '/payment_channels/pi_spi.webp',
68      label: DEFAULT_LABELS.spi,
69      imageClass: 'object-contain translate-y-[6px]',
70      containerClass: 'justify-start w-full mb-[9px] -ml-0',
71      width: 80,
72      height: 32,
73    };
74  }
75 
76  return {
77    image: '',
78    label: method,
79    imageClass: '',
80    containerClass: '',
81    width: 40,
82    height: 40,
83  };
84}
85 
86export interface PaymentProviderSelectorProps {
87  providers?: ProviderId[];
88  selectedProvider?: ProviderId | null;
89  onProviderChange?: (provider: ProviderId) => void;
90  disabledProviders?: ProviderId[];
91  /** When false, SPI cannot be selected (matches hosted checkout SPI gate). */
92  spiOperational?: boolean;
93  /** Label for the card payment method (production uses i18n). */
94  cardLabel?: string;
95  className?: string;
96}
97 
98// … truncated