Refactor Payment Page: Enhanced User Inputs and Validation Mechanisms

[SrijaVuppala295]

Pull Request Template for GSoC 2024

Related Issue

[Please list any related issue numbers that this pull request resolves. If none, state "None"]

closes:#478

Description of Changes

This pull request implements significant enhancements to the payment page component, aimed at improving user experience and ensuring robust data validation. Key updates include:

• Comprehensive User Input Fields: Introduced additional fields for capturing user details, such as full name, phone number, and nationality, ensuring a complete profile during the transaction process.

• Dynamic Payment Method Interface: Upon selecting a payment method, a dedicated section appears, displaying relevant fields specific to the chosen method (credit/debit card or UPI), streamlining the user experience.

• Advanced Input Validation: Implemented strict validation protocols for critical fields, including card number format (1234-5678-8907), expiry date, and phone number. Users receive real-time feedback on input errors to facilitate corrections.

• Success Notification Integration: Utilized SweetAlert to provide a visually appealing success message upon successful submission of payment details, enhancing user engagement and satisfaction. Users are automatically redirected to the home page post-confirmation.

• International Phone Number Support: Added predefined country codes for various nationalities, allowing for seamless international transactions and improving accessibility for a diverse user base.

These enhancements are designed to provide a secure, user-friendly checkout experience while adhering to best practices in data handling and user interface design. Your feedback and insights on these improvements would be greatly appreciated.

Please review the changes and let me know if you have any questions or suggestions. Thank you!

Type of Pull Request

• Bug Fix
• New Feature
• Performance Improvement
• Documentation Update
• Code Refactoring
• Security Enhancement
• Other (Specify): _______________

(Please check relevant boxes by entering an "X" inside them)

Screenshots / Demo (if applicable)

payments.mp4

Checklist for Contributor

use'X' in [ ] to check it .

• I have reviewed my code before submission.
• I have read and followed the project's Contribution Guidelines.
• I have tested the code thoroughly.
• I have attached related issue numbers, screenshots, or videos (if applicable).
• I have added comments to my code where necessary for clarity.
• I have checked the existing code base and my changes do not introduce any breaking changes.
• My PR addresses only one issue; I have created separate PRs for other issues.
• I have ensured that the PR does not include unrelated files.
• I am mindful of the project's coding standards and best practices.

Additional Information

[Include any additional context or relevant information that may help in reviewing this PR.]

Contribution Guidelines Reminder

Thank you for contributing to our project! Please ensure you follow the guidelines below:

Contribution Levels

2. Task Categories:

   • Basic Tasks: Primarily focused on small changes like minor bug fixes, documentation improvements, and unit testing. Labeled as Easy.
   • Intermediate Tasks: Moderate-level tasks that involve enhancing existing features, code refactoring, or performance improvements. Labeled as Medium.
   • Advanced Tasks: Complex tasks like building new features, significant refactoring, or critical bug fixes. Labeled as Hard.

3. Acknowledging Effort:

   • Exceptional contributions will be recognized with a higher contribution level if substantial effort and innovation are demonstrated.

Review Process

• PRs will be reviewed by the maintainers, and feedback will be provided. Contributors should address feedback promptly and resubmit the PR if necessary.

• Contributors are encouraged to participate in the review process of other PRs for community growth.

We appreciate your time and effort in improving this project and look forward to your valuable contributions!

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
station-guide	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 5, 2024 0:31am
station-guide-backend	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 5, 2024 0:31am

[github-actions]

Thank you for submitting your pull request! 🙌 We'll review it as soon as possible. In the meantime, please ensure that your changes align with our CONTRIBUTING.md. If there are any specific instructions or feedback regarding your PR, we'll provide them here. Thanks again for your contribution! 😊

[SrijaVuppala295]

@dhairyagothi , I have enhanced the page and added more input details , please check the demo video , i have also add validations and sweet alert , please check it !!!
And pls add level 3 label !!

[dhairyagothi]

please resolve conflicts @SrijaVuppala295

[SrijaVuppala295]

@dhairyagothi , please review it , i have resolved

[github-actions]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your valuable contribution to Station Guide. Your efforts are greatly appreciated. Feel free to reach out if you have any more contributions or if there's anything else we can assist you with. Keep up the fantastic work! 🚀

[timatao1225]

U