Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix styling #187

Merged
merged 6 commits into from
Nov 28, 2023
Merged

Fix styling #187

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c69b4c2
feat(checkout): fix styling
KatiaGhezali Nov 27, 2023
810c7f0
feat(checkout): add toastify when "place order" is clicked
KatiaGhezali Nov 27, 2023
2e2079e
fix(product details): fix link error
KatiaGhezali Nov 27, 2023
c2abd41
fix(my orders): fix the no picture issue
KatiaGhezali Nov 28, 2023
c4f1702
feat(about us): add picture and bio
KatiaGhezali Nov 28, 2023
dd68e38
Merge branch 'develop' into 181-fix-styling
KatiaGhezali Nov 28, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/katia.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
218 changes: 114 additions & 104 deletions src/components/Checkout/Checkout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useState } from "react";
import { ToastContainer, toast } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";

const Checkout = () => {
const [formData, setFormData] = useState({
Expand Down Expand Up @@ -30,153 +32,161 @@ const Checkout = () => {
expiryDate: "",
cvv: "",
});

// Show success notification
toast.success("Payment done. Thank you for trusting us!");
};

return (
<form className='max-w-md mx-auto p-4 bg-white shadow-md rounded-md'>
<h2 className='text-2xl font-semibold mb-4'>Checkout</h2>

{/* Delivery Information */}
<div className='mb-4'>
<label
htmlFor='fullName'
className='block text-gray-700 font-medium'
>
Full Name
</label>
<input
type='text'
id='fullName'
name='fullName'
value={formData.fullName}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
<div className='p-20 flex flex-col'>
<form className='max-w-md mx-auto p-4 bg-white shadow-md rounded-md'>
<h2 className='text-2xl font-semibold mb-4'>Checkout</h2>

<div className='mb-4'>
<label
htmlFor='address'
className='block text-gray-700 font-medium'
>
Address
</label>
<input
type='text'
id='address'
name='address'
value={formData.address}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>

<div className='grid grid-cols-2 gap-4 mb-4'>
<div>
{/* Delivery Information */}
<div className='mb-4'>
<label
htmlFor='city'
htmlFor='fullName'
className='block text-gray-700 font-medium'
>
City
Full Name
</label>
<input
type='text'
id='city'
name='city'
value={formData.city}
id='fullName'
name='fullName'
value={formData.fullName}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>

<div>
<div className='mb-4'>
<label
htmlFor='zipCode'
htmlFor='address'
className='block text-gray-700 font-medium'
>
ZIP Code
Address
</label>
<input
type='text'
id='zipCode'
name='zipCode'
value={formData.zipCode}
id='address'
name='address'
value={formData.address}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
</div>

{/* Payment Information */}
<div className='mb-4'>
<label
htmlFor='cardNumber'
className='block text-gray-700 font-medium'
>
Card Number
</label>
<input
type='text'
id='cardNumber'
name='cardNumber'
value={formData.cardNumber}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
<div className='grid grid-cols-2 gap-4 mb-4'>
<div>
<label
htmlFor='city'
className='block text-gray-700 font-medium'
>
City
</label>
<input
type='text'
id='city'
name='city'
value={formData.city}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>

<div className='grid grid-cols-2 gap-4 mb-4'>
<div>
<label
htmlFor='expiryDate'
className='block text-gray-700 font-medium'
>
Expiry Date
</label>
<input
type='text'
id='expiryDate'
name='expiryDate'
value={formData.expiryDate}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
<div>
<label
htmlFor='zipCode'
className='block text-gray-700 font-medium'
>
ZIP Code
</label>
<input
type='text'
id='zipCode'
name='zipCode'
value={formData.zipCode}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
</div>

<div>
{/* Payment Information */}
<div className='mb-4'>
<label
htmlFor='cvv'
htmlFor='cardNumber'
className='block text-gray-700 font-medium'
>
CVV
Card Number
</label>
<input
type='text'
id='cvv'
name='cvv'
value={formData.cvv}
id='cardNumber'
name='cardNumber'
value={formData.cardNumber}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
</div>

{/* Submit Button */}
<button
type='submit'
className='bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300'
onClick={handleSubmit}
>
Place Order
</button>
</form>
<div className='grid grid-cols-2 gap-4 mb-4'>
<div>
<label
htmlFor='expiryDate'
className='block text-gray-700 font-medium'
>
Expiry Date
</label>
<input
type='text'
id='expiryDate'
name='expiryDate'
value={formData.expiryDate}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>

<div>
<label
htmlFor='cvv'
className='block text-gray-700 font-medium'
>
CVV
</label>
<input
type='text'
id='cvv'
name='cvv'
value={formData.cvv}
onChange={handleChange}
className='mt-1 p-2 w-full border rounded-md'
required
/>
</div>
</div>

{/* Submit Button */}
<button
type='submit'
className='bg-purple-600 text-white py-2 px-4 rounded-md hover:bg-purple-700 focus:outline-none focus:ring focus:border-purple-300'
onClick={handleSubmit}
>
Place Order
</button>
</form>

{/* Toastify container */}
<ToastContainer />
</div>
);
};

Expand Down
Loading
Loading