Fixed the Customer Context. Because of how setState worked, customers were not properly registered.

Customer Profile Page, Customer Addresses Page,
Checkout Page

src/app/(storefront)/account/profile/ProfileForm.tsx

@@ -0,0 +1,106 @@
+// app/account/profile/ProfileForm.tsx
+'use client';
+
+import { useState } from 'react';
+
+interface Customer {
+  id: string;
+  email: string;
+  first_name?: string;
+  last_name?: string;
+  phone?: string;
+}
+
+interface ProfileFormProps {
+  customer: Customer;
+  onCancel: () => void;
+}
+
+export default function ProfileForm({ customer, onCancel }: ProfileFormProps) {
+  const [firstName, setFirstName] = useState(customer.first_name || '');
+  const [lastName, setLastName] = useState(customer.last_name || '');
+  const [phone, setPhone] = useState(customer.phone || '');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+
+    try {
+      const res = await fetch(`${process.env.NEXT_PUBLIC_STORE_URL}/store/customers/me`, {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        credentials: 'include',
+        body: JSON.stringify({
+          first_name: firstName,
+          last_name: lastName,
+          phone: phone,
+        }),
+      });
+
+      if (!res.ok) {
+        // handle error
+        const errorData = await res.json();
+        setError(errorData?.message || 'Failed to update profile');
+      } else {
+        // success - you might want to refresh the page or re-fetch data
+        // For simplicity, let's just call onCancel to go back
+        onCancel();
+      }
+    } catch (err: any) {
+      console.error(err);
+      setError('An error occurred while updating.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className='flex flex-col max-w-sm'>
+      {error && <p className='text-red-500 mb-2'>{error}</p>}
+
+      <label className='mb-2'>
+        First Name:
+        <input
+          type='text'
+          value={firstName}
+          onChange={(e) => setFirstName(e.target.value)}
+          className='block w-full border border-gray-300 p-2 mt-1'
+        />
+      </label>
+
+      <label className='mb-2'>
+        Last Name:
+        <input
+          type='text'
+          value={lastName}
+          onChange={(e) => setLastName(e.target.value)}
+          className='block w-full border border-gray-300 p-2 mt-1'
+        />
+      </label>
+
+      <label className='mb-2'>
+        Phone:
+        <input
+          type='text'
+          value={phone}
+          onChange={(e) => setPhone(e.target.value)}
+          className='block w-full border border-gray-300 p-2 mt-1'
+        />
+      </label>
+
+      <div className='flex gap-2 mt-4'>
+        <button type='submit' disabled={loading} className='px-4 py-2 bg-green-500 text-white rounded'>
+          {loading ? 'Saving...' : 'Save Changes'}
+        </button>
+        <button type='button' onClick={onCancel} disabled={loading} className='px-4 py-2 bg-gray-300 rounded'>
+          Cancel
+        </button>
+      </div>
+    </form>
+  );
+}