Mobile money checkout card

1'use client';
2 
3import * as React from 'react';
4import {
5  PaymentProviderSelector,
6  type ProviderId,
7} from './payment-provider-selector';
8import { CustomerInformationSection } from './customer-information-section';
9import {
10  CheckoutSubmitButton,
11  type CheckoutPaymentStatus,
12} from './checkout-submit-button';
13import './lib/checkout-ui.css';
14 
15export interface MobileMoneyCheckoutCardProps {
16  selectedProvider?: ProviderId;
17  fullName?: string;
18  email?: string;
19  phoneNumber?: string;
20  whatsappNumber?: string;
21  isDifferentWhatsApp?: boolean;
22  onProviderChange?: (provider: ProviderId) => void;
23  onFullNameChange?: (value: string) => void;
24  onEmailChange?: (value: string) => void;
25  onPhoneNumberChange?: (value?: string) => void;
26  onWhatsAppNumberChange?: (value?: string) => void;
27  onDifferentWhatsAppChange?: (value: boolean) => void;
28  onSubmit?: () => void;
29  paymentStatus?: CheckoutPaymentStatus;
30  payButtonBgColor?: string;
31  className?: string;
32}
33 
34function cn(...classes: Array<string | false | null | undefined>) {
35  return classes.filter(Boolean).join(' ');
36}
37 
38export function MobileMoneyCheckoutCard({
39  selectedProvider,
40  fullName = '',
41  email = '',
42  phoneNumber = '',
43  whatsappNumber = '',
44  isDifferentWhatsApp = false,
45  onProviderChange,
46  onFullNameChange,
47  onEmailChange,
48  onPhoneNumberChange,
49  onWhatsAppNumberChange,
50  onDifferentWhatsAppChange,
51  onSubmit,
52  paymentStatus = 'idle',
53  payButtonBgColor = '#121317',
54  className,
55}: MobileMoneyCheckoutCardProps) {
56  return (
57    <div
58      className={cn(
59        'lomi-checkout-ui w-full max-w-md space-y-3 bg-white',
60        className,
61      )}
62    >
63      <PaymentProviderSelector
64        providers={['WAVE', 'MTN', 'cards', 'spi']}
65        selectedProvider={selectedProvider}
66        onProviderChange={onProviderChange}
67      />
68 
69      <CustomerInformationSection
70        fullName={fullName}
71        email={email}
72        phoneNumber={phoneNumber}
73        whatsappNumber={whatsappNumber}
74        isDifferentWhatsApp={isDifferentWhatsApp}
75        onFullNameChange={onFullNameChange}
76        onEmailChange={onEmailChange}
77        onPhoneNumberChange={onPhoneNumberChange}
78        onWhatsAppNumberChange={onWhatsAppNumberChange}
79        onDifferentWhatsAppChange={onDifferentWhatsAppChange}
80      />
81 
82      <CheckoutSubmitButton
83        payButtonBgColor={payButtonBgColor}
84        paymentStatus={paymentStatus}
85        onClick={onSubmit}
86      />
87    </div>
88  );
89}