Added Payment.jsx & fixed styling issues in cart

siddheshhr commented 3 weeks ago

Description: ISSUE:#234 Enhancement+Bug I'm excited to add a significant improvement to the user checkout experience: a streamlined multi-page checkout flow with mock payment functionality. This addresses the previous limitation where checkout and payment details were combined on a single page

1.) Key Enhancements:

Separated Checkout Process: Introduced a "Proceed to Checkout" button, gracefully transitioning users from the cart to a dedicated payment page (Payment.jsx).
Mock Payment Form: Implemented Payment.jsx as a user-friendly form for entering mock payment card details (non-functional validation). Fields include: Cardholder Name Card Number (16 digits) Expiration Date (MM/YY format) CVV (3-digit code)
Seamless Navigation: Upon form submission in Payment.jsx, the user is directed to a Success.jsx page displaying a confirmation message ("Thank you, your order has been placed!").

-Styling issue:Also fixed the styling issue of the select option which was not properly being displayed have fixed the css styling and gave it proper spacing BEFORE

AFTER:

2). Benefits:

Enhanced User Experience: Provides a familiar and intuitive multi-page checkout flow, aligning with established best practices (e.g., Amazon).
Improved Code Maintainability: Separates checkout logic into dedicated components, promoting code organization and future feature additions.
Strong Foundation for Future Integration: Lays the groundwork for integrating a real payment gateway when the project progresses.

SCREENSHOT OF THE UPDATED/ADDED PAGES

vercel[bot] commented 3 weeks ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
shopy-frontend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 31, 2024 2:35pm

mohitparmar1 commented 2 weeks ago

resolve conflicts!

mohitparmar1 / Shopy

Added Payment.jsx & fixed styling issues in cart #235