Customer information section

1'use client';
2 
3import * as React from 'react';
4import { ArrowRightLeft, Info } from 'lucide-react';
5import type { Country } from 'react-phone-number-input';
6import {
7  CheckoutInput,
8  checkoutCustomerFieldClass,
9} from './lib/checkout-input';
10import { CheckoutPhoneNumberInput } from './lib/checkout-phone-number-input';
11import { CheckoutWhatsAppNumberInput } from './lib/checkout-whatsapp-number-input';
12import './lib/checkout-ui.css';
13 
14const INPUT_BORDER = 'clamp(1px, 0.12vw, 1.3px) solid #d1d5db';
15 
16function cn(...classes: Array<string | false | null | undefined>) {
17  return classes.filter(Boolean).join(' ');
18}
19 
20export interface CustomerInformationSectionProps {
21  fullName?: string;
22  email?: string;
23  phoneNumber?: string;
24  whatsappNumber?: string;
25  isDifferentWhatsApp?: boolean;
26  defaultCountry?: Country;
27  isPhoneValid?: boolean;
28  onFullNameChange?: (value: string) => void;
29  onEmailChange?: (value: string) => void;
30  onPhoneNumberChange?: (value?: string) => void;
31  onWhatsAppNumberChange?: (value?: string) => void;
32  onDifferentWhatsAppChange?: (value: boolean) => void;
33  onCountryChange?: (country: string) => void;
34  onPhoneValidationChange?: (isValid: boolean | undefined) => void;
35  title?: string;
36  fullNamePlaceholder?: string;
37  emailPlaceholder?: string;
38  nameTooltip?: string;
39  whatsappDifferentLabel?: string;
40  switchToPhoneTitle?: string;
41  phoneValidationError?: string;
42  className?: string;
43}
44 
45export function CustomerInformationSection({
46  fullName = '',
47  email = '',
48  phoneNumber = '',
49  whatsappNumber = '',
50  isDifferentWhatsApp = false,
51  defaultCountry = 'CI',
52  isPhoneValid = true,
53  onFullNameChange,
54  onEmailChange,
55  onPhoneNumberChange,
56  onWhatsAppNumberChange,
57  onDifferentWhatsAppChange,
58  onCountryChange,
59  onPhoneValidationChange,
60  title = 'Personal information',
61  fullNamePlaceholder = 'Full name',
62  emailPlaceholder = 'Email address',
63  nameTooltip = 'In case we need to contact you about your order.',
64  whatsappDifferentLabel = 'My WhatsApp number is different',
65  switchToPhoneTitle = 'Switch to using phone number',
66  phoneValidationError = 'Please enter a valid phone number for the selected country.',
67  className,
68}: CustomerInformationSectionProps) {
69  const [showNameTooltip, setShowNameTooltip] = React.useState(false);
70 
71  const handlePhoneNumberChange = (value: string | undefined) => {
72    onPhoneNumberChange?.(value);
73    if (!isDifferentWhatsApp) {
74      onWhatsAppNumberChange?.(value);
75    }
76  };
77 
78  return (
79// … truncated