@instockng/storefront-ui 1.0.100 → 1.0.101

package/src/components/Checkout.tsx

@@ -18,7 +18,6 @@ import { FormSelect } from './ui/form-select';
 import { Button } from './ui/button';
 import {
   Loader2,
-  Mail,
   Phone,
   Zap,
   Banknote,
@@ -41,19 +40,20 @@ const cleanPhoneNumber = (phone: string): string => {
   return phone.replace(/\D/g, '');
 };
 
+// Split a full name into first and last name
+const splitFullName = (fullName: string): { firstName: string; lastName: string } => {
+  const parts = fullName.trim().split(/\s+/);
+  const firstName = parts[0] || '';
+  const lastName = parts.slice(1).join(' ') || '-';
+  return { firstName, lastName };
+};
+
 // Yup validation schemas for each step
 const customerSchema = Yup.object({
-  firstName: Yup.string()
-    .required('First name is required')
-    .min(2, 'First name must be at least 2 characters')
-    .max(50, 'First name must be less than 50 characters'),
-  lastName: Yup.string()
-    .required('Last name is required')
-    .min(2, 'Last name must be at least 2 characters')
-    .max(50, 'Last name must be less than 50 characters'),
-  email: Yup.string()
-    .required('Email is required')
-    .email('Please enter a valid email address'),
+  fullName: Yup.string()
+    .required('Name is required')
+    .min(2, 'Name must be at least 2 characters')
+    .max(100, 'Name must be less than 100 characters'),
   phone: Yup.string()
     .required('Phone number is required')
     .test('nigerian-phone', 'Please enter a valid Nigerian phone number (e.g. 0812 564 8668)', (value) => {
@@ -97,9 +97,7 @@ const paymentSchema = Yup.object({
 export type PaymentMethod = 'cod' | 'online';
 
 export interface CheckoutFormData {
-  firstName: string;
-  lastName: string;
-  email: string;
+  fullName: string;
   phone: string;
   address: string;
   city: string;
@@ -167,10 +165,10 @@ export function Checkout({
         // Get TikTok attribution cookies for Events API
         const { ttp, ttclid } = getTikTokCookies();
 
+        const { firstName, lastName } = splitFullName(formData.fullName);
         const order = await checkout.mutateAsync({
-          firstName: formData.firstName,
-          lastName: formData.lastName,
-          email: formData.email,
+          firstName,
+          lastName,
           phone: formData.phone,
           address: formData.address,
           city: formData.city,
@@ -239,9 +237,7 @@ export function Checkout({
   }, [isOpen]);
 
   const [formData, setFormData] = useState<CheckoutFormData>({
-    firstName: initialData?.firstName || '',
-    lastName: initialData?.lastName || '',
-    email: initialData?.email || '',
+    fullName: initialData?.fullName || '',
     phone: initialData?.phone || '',
     address: initialData?.address || '',
     city: initialData?.city || '',
@@ -263,11 +259,10 @@ export function Checkout({
 
   useEffect(() => {
     if (isOpen && cart && !initialData && !hasLoadedCartData) {
+      const cartName = [cart.customerFirstName, cart.customerLastName].filter(Boolean).join(' ');
       setFormData((prev) => ({
         ...prev,
-        firstName: cart.customerFirstName || prev.firstName,
-        lastName: cart.customerLastName || prev.lastName,
-        email: cart.customerEmail || prev.email,
+        fullName: cartName || prev.fullName,
         phone: cart.customerPhone || prev.phone,
         deliveryZoneId: cart.deliveryZone?.id || prev.deliveryZoneId,
       }));
@@ -312,20 +307,16 @@ export function Checkout({
 
   // Auto-save customer fields on blur
   const handleCustomerFieldBlur = useCallback(
-    (field: 'firstName' | 'lastName' | 'email' | 'phone') => {
+    (field: 'fullName' | 'phone') => {
       const value = formData[field];
       if (!value) return; // Don't save empty values
 
-      // Use proper type from updateCartMutation
-      type UpdateCartParams = Parameters<typeof updateCartMutation.mutate>[0];
-      const updateData: Partial<UpdateCartParams> = {};
-
-      if (field === 'firstName') updateData.customerFirstName = value;
-      else if (field === 'lastName') updateData.customerLastName = value;
-      else if (field === 'email') updateData.customerEmail = value;
-      else if (field === 'phone') updateData.customerPhone = value;
-
-      updateCartMutation.mutate(updateData);
+      if (field === 'fullName') {
+        const { firstName, lastName } = splitFullName(value);
+        updateCartMutation.mutate({ customerFirstName: firstName, customerLastName: lastName });
+      } else if (field === 'phone') {
+        updateCartMutation.mutate({ customerPhone: value });
+      }
     },
     [formData, updateCartMutation]
   );
@@ -415,8 +406,9 @@ export function Checkout({
 
       // Initiate Paystack payment popup
       // The onSuccess callback in the hook will handle the checkout completion
+      const { firstName: psFirstName, lastName: psLastName } = splitFullName(formData.fullName);
       paystack.initializePayment({
-        email: formData.email || cart?.customerEmail || 'customer@example.com',
+        email: cart?.customerEmail || 'customer@example.com',
         amount: amountInKobo,
         currency: 'NGN',
         metadata: {
@@ -425,9 +417,8 @@ export function Checkout({
           address: formData.address,
           city: formData.city,
           delivery_zone_id: selectedDeliveryZoneId || formData.deliveryZoneId,
-          firstName: formData.firstName,
-          lastName: formData.lastName,
-          email: formData.email,
+          firstName: psFirstName,
+          lastName: psLastName,
           phone: formData.phone,
           fbc,
           fbp,
@@ -437,7 +428,7 @@ export function Checkout({
             {
               display_name: 'Customer Name',
               variable_name: 'customer_name',
-              value: `${formData.firstName} ${formData.lastName}`,
+              value: formData.fullName,
             },
             {
               display_name: 'Phone Number',
@@ -474,10 +465,10 @@ export function Checkout({
       // Get TikTok attribution cookies for Events API
       const { ttp, ttclid } = getTikTokCookies();
 
+      const { firstName, lastName } = splitFullName(formData.fullName);
       const order = await checkout.mutateAsync({
-        firstName: formData.firstName,
-        lastName: formData.lastName,
-        email: formData.email,
+        firstName,
+        lastName,
         phone: formData.phone,
         address: formData.address,
         city: formData.city,
@@ -799,57 +790,32 @@ export function Checkout({
               {/* Step 1: Customer Information */}
               <div className="w-full min-w-full flex-shrink-0 p-4">
                 <div className="space-y-4">
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    <FormInput
-                      label="First Name"
-                      type="text"
-                      name="firstName"
-                      value={formData.firstName}
-                      onChange={handleInputChange}
-                      onBlur={() => handleCustomerFieldBlur('firstName')}
-                      error={formErrors.firstName}
-                      autoCorrect="off"
-                      required
-                    />
-                    <FormInput
-                      label="Last Name"
-                      type="text"
-                      name="lastName"
-                      value={formData.lastName}
-                      onChange={handleInputChange}
-                      onBlur={() => handleCustomerFieldBlur('lastName')}
-                      error={formErrors.lastName}
-                      autoCorrect="off"
-                      required
-                    />
-                    <FormInput
-                      label="Email"
-                      type="email"
-                      name="email"
-                      value={formData.email}
-                      onChange={handleInputChange}
-                      onBlur={() => handleCustomerFieldBlur('email')}
-                      error={formErrors.email}
-                      icon={<Mail size={16} />}
-                      autoCorrect="off"
-                      required
-                    />
-                    <FormInput
-                      label="Phone Number"
-                      type="tel"
-                      name="phone"
-                      value={formData.phone}
-                      onChange={handleInputChange}
-                      onBlur={() => handleCustomerFieldBlur('phone')}
-                      placeholder="e.g. 08012345678"
-                      maxLength={18}
-                      error={formErrors.phone}
-                      icon={<Phone size={16} />}
-                      autoCorrect="off"
-                      required
-                      className="font-semibold"
-                    />
-                  </div>
+                  <FormInput
+                    label="Full Name"
+                    type="text"
+                    name="fullName"
+                    value={formData.fullName}
+                    onChange={handleInputChange}
+                    onBlur={() => handleCustomerFieldBlur('fullName')}
+                    error={formErrors.fullName}
+                    autoCorrect="off"
+                    required
+                  />
+                  <FormInput
+                    label="Phone Number"
+                    type="tel"
+                    name="phone"
+                    value={formData.phone}
+                    onChange={handleInputChange}
+                    onBlur={() => handleCustomerFieldBlur('phone')}
+                    placeholder="e.g. 08012345678"
+                    maxLength={18}
+                    error={formErrors.phone}
+                    icon={<Phone size={16} />}
+                    autoCorrect="off"
+                    required
+                    className="font-semibold"
+                  />
                 </div>
               </div>