107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
// 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>
|
|
);
|
|
}
|