chore: setup project for production
This commit is contained in:
afnaann
193
components/accounts/AddNewAddress.jsx
Normal file
193
components/accounts/AddNewAddress.jsx
Normal file
@@ -0,0 +1,193 @@
|
||||
'use client'
|
||||
import { useState } from 'react';
|
||||
import authAxios from '@/utils/axios';
|
||||
import toast from 'react-hot-toast';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
const AddNewAddress = () => {
|
||||
const [formData, setFormData] = useState({
|
||||
first_name: '',
|
||||
last_name: '',
|
||||
company: '',
|
||||
address: '',
|
||||
apartment: '',
|
||||
city: '',
|
||||
country: '',
|
||||
zipcode: '',
|
||||
phone: ''
|
||||
});
|
||||
const router = useRouter();
|
||||
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleChange = (e) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[name]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
setLoading(true);
|
||||
setError('');
|
||||
|
||||
try {
|
||||
const response = await authAxios.post('/account/addresses/', formData);
|
||||
toast.success('Address added successfully')
|
||||
router.push('/accounts/profile/addresses')
|
||||
// Handle success (e.g., redirect or show success message)
|
||||
console.log('Address added successfully:', response.data);
|
||||
|
||||
|
||||
} catch (err) {
|
||||
setError(err.response?.data?.message || 'Failed to add address');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white p-6 rounded-lg shadow-md">
|
||||
<h2 className="text-2xl font-semibold mb-6">Add a new address</h2>
|
||||
{error && <div className="mb-4 text-red-500">{error}</div>}
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label htmlFor="first_name" className="block text-sm font-medium text-gray-700 mb-1">First name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="first_name"
|
||||
name="first_name"
|
||||
value={formData.first_name}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label htmlFor="last_name" className="block text-sm font-medium text-gray-700 mb-1">Last name</label>
|
||||
<input
|
||||
type="text"
|
||||
id="last_name"
|
||||
name="last_name"
|
||||
value={formData.last_name}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="company" className="block text-sm font-medium text-gray-700 mb-1">Company</label>
|
||||
<input
|
||||
type="text"
|
||||
id="company"
|
||||
name="company"
|
||||
value={formData.company}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="address" className="block text-sm font-medium text-gray-700 mb-1">Address</label>
|
||||
<input
|
||||
type="text"
|
||||
id="address"
|
||||
name="address"
|
||||
value={formData.address}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="apartment" className="block text-sm font-medium text-gray-700 mb-1">Apartment, suite, etc.</label>
|
||||
<input
|
||||
type="text"
|
||||
id="apartment"
|
||||
name="apartment"
|
||||
value={formData.apartment}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="city" className="block text-sm font-medium text-gray-700 mb-1">City</label>
|
||||
<input
|
||||
type="text"
|
||||
id="city"
|
||||
name="city"
|
||||
value={formData.city}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="country" className="block text-sm font-medium text-gray-700 mb-1">Country/Region</label>
|
||||
<select
|
||||
id="country"
|
||||
name="country"
|
||||
value={formData.country}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
>
|
||||
<option value="">Select a country</option>
|
||||
<option value="IN">India</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="zipcode" className="block text-sm font-medium text-gray-700 mb-1">Postal/Zip Code</label>
|
||||
<input
|
||||
type="text"
|
||||
id="zipcode"
|
||||
name="zipcode"
|
||||
value={formData.zipcode}
|
||||
onChange={handleChange}
|
||||
className="w-full p-2 border border-gray-300 rounded"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-4">
|
||||
<label htmlFor="phone" className="block text-sm font-medium text-gray-700 mb-1">Phone</label>
|
||||
<div className="flex">
|
||||
<select className="p-2 border border-gray-300 rounded-l" style={{width: '80px'}}>
|
||||
<option value="IN">🇮🇳 +91</option>
|
||||
</select>
|
||||
<input
|
||||
type="tel"
|
||||
id="phone"
|
||||
name="phone"
|
||||
value={formData.phone}
|
||||
onChange={handleChange}
|
||||
className="flex-grow p-2 border border-gray-300 rounded-r"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 flex justify-end space-x-4">
|
||||
<button
|
||||
type="button"
|
||||
className="px-4 py-2 border border-gray-300 rounded text-gray-700 hover:bg-gray-50"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="px-4 py-2 bg-[#96724f] text-white rounded hover:bg-[#AC8C6B] disabled:opacity-50"
|
||||
>
|
||||
{loading ? 'Submitting...' : 'Submit'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AddNewAddress;
|
||||
Reference in New Issue
Block a user