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.

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

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

Closed
wants to merge 1 commit into from
Closed

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

wants to merge 1 commit into from

Conversation

siddheshhr
Copy link
Contributor

@siddheshhr siddheshhr commented May 31, 2024

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
Screenshot 2024-05-31 184256

AFTER:
Screenshot 2024-05-31 190518


2). Benefits:

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

SCREENSHOT OF THE UPDATED/ADDED PAGES

  • Opera Snapshot_2024-05-31_200225_localhost

  • Screenshot 2024-05-31 194322

  • Screenshot 2024-05-31 194412

Copy link

vercel bot commented May 31, 2024

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

Copy link

@github-actions github-actions bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great job, @siddheshhr! 🎉 Thank you for submitting your pull request. Your contribution is valuable and we appreciate your efforts to improve our project.

We will promptly review your changes and offer feedback. Keep up the excellent work! Kindly remember to check our contributing guidelines

@mohitparmar1
Copy link
Owner

resolve conflicts!

@siddheshhr siddheshhr closed this by deleting the head repository Jun 9, 2024
mohitparmar1 added a commit that referenced this pull request Jun 11, 2024
PR:#235 Added Payment.jsx & fixed styling issues in cart
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants