Implemented Coupon Management with Coupon Creation and Edit Feature

[IkkiOcean]

Description:

This PR introduces a new feature for creating and editing coupon codes. It includes a form that allows users to input details for new coupons or edit existing ones. The form fields include coupon code, description, value, minimum order amount, maximum discount, start and end dates, and usage limit. The feature is designed to be flexible and user-friendly, providing easy creation and management of coupon codes.

Changes:

1. Coupon Form Component:

   • Created a CouponForm component responsible for displaying the coupon creation/edit form.
   • Added various input fields:
     • Coupon code (text input)
     • Coupon description (text input)
     • value (text input)
     • minOrderAmount (text input)
     • maxDiscount (text input)
     • startDate (date input)
     • endDate (date input)
     • usageLimit (text input)
   • Conditional rendering for "Create" or "Edit" modes, with appropriate button labels and behavior.
   • The form is scrollable for better user experience when there are many fields.

2. Styling:

   • Used Tailwind CSS for styling to maintain consistency with the rest of the application.
   • The modal has a max-height of 80vh and becomes scrollable if the content overflows.

3. State Management:

   • The form handles state management for input fields (formData) and updates them using onFormChange function passed down as a prop.
   • The form supports both creating a new coupon and editing an existing coupon.

4. Buttons and Actions:

   • Cancel Button: Closes the form without making any changes.
   • Submit Button: Triggers the form submission, with onSubmit passing the updated coupon data.

5. Responsive Design:

   • The form is designed to be responsive, with fields and buttons adjusting to different screen sizes.

6. Validation:

   • Each input field is marked as required to ensure the user cannot submit the form without providing necessary data.

How It Works:

1. When a user clicks on the "Create New Coupon" button, the form will render with empty fields, allowing the user to input details for a new coupon.
2. When editing an existing coupon, the form will pre-populate with the current coupon data. The user can then update the fields and submit the changes.
3. Upon form submission, the onSubmit function will be called, passing the form data back to the parent component (which handles coupon creation or editing logic).
4. If the user clicks "Cancel", the form will be closed without any changes being saved.

Screenshots (if applicable):

coupon.mp4

Related Issues:

• Closes Add Discount and Coupon Management from Admin Dashboard #881

[vercel]

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

Name	Status	Preview	Comments	Updated (UTC)
agro-tech-ai	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 8, 2024 10:10pm

[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! 😊

[github-actions]

🎉 Your pull request has been successfully merged! 🎉 Thank you for your valuable contribution to our project. 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! 🚀