search

Phantom-Tech-IND / school-pictures

0 stars 0 forks source link

Complete and optimize the checkout page for a smooth user experience #56

Closed axentioialexandru95 closed 4 months ago

axentioialexandru95 commented 4 months ago

Task: Improve Checkout Page

Take design from https://tailwindui.com/components/ecommerce/components/checkout-forms

Acceptance Criteria:

  1. Billing Details:

    • [x] Ensure all fields (first name, last name, street, postal code, etc.) are required, except for optional fields like "Canton."
    • [x] Validate email and telephone number input to ensure accurate formats.
    • [x] Implement clear error messages for required fields that are left blank or incorrectly formatted.

  2. Shipping Selection:

    • [x] Make sure that each shipping option (Flat rate, Free Shipping, Pickup) is selectable.
    • [x] Confirm that selecting an option updates the shipping cost accordingly in the "Total."

  3. Payment Methods:

    • [x] Ensure that the "Bank transfer/advance payment" and "Credit cards/TWINT" options can be selected.
    • [x] Implement logic to display relevant instructions or forms based on the selected payment method.

  4. Order Summary:

    • [x] Update the "Subtotal" and "Total" to accurately reflect shipping and any additional fees or discounts.
    • [x] Ensure the "Quantity" can be adjusted and updates the total price dynamically.

  5. Navigation Buttons:

    • [x] Validate that the "ORDER FOR A FEE" button submits the form with correct data and routes to the order confirmation page.
    • [x] Confirm that "SEND DELIVERY TO ANOTHER ADDRESS?" reveals an additional form for alternate address input.

  6. Comments:

    • [x] Verify that "Order Comments" allows users to provide additional instructions without causing errors.

  7. Responsive Design:

    • [x] Test the page across various devices (mobile, tablet, desktop) to ensure that all input fields and buttons remain accessible and usable.
axentioialexandru95 commented 4 months ago

Updates to the UI