Product Cart with Discounts

Build a Shopping Cart UI in React where users can:

• View and manage a list of products.
• Adjust product quantities (with “+” and “–” buttons).
• Remove unwanted products.
• Add custom new products to the cart.
• Apply a special discount coupon ("GRAB50") for 50% off.
• The cart should dynamically update the subtotal, discount, and final total.

Requirements

• Add the main heading - Shopping Cart

Product Display

Show product details:

• Name
• Description
• Price
• Quantity (with + and – buttons, min = 1)

Show Subtotal = Price × Quantity.

Provide Remove button to delete product.

Add New Product Section

Inputs for:

• Product name
• Price (₹)
• Quantity - By default let the quantity be 1.
• Description

When adding a product:

• Product name must not be empty.
• Price must be a positive number.
• If invalid → show alert: “Please enter valid product name and price.”

Coupon Code Application

• Input field for coupon.
• "GRAB50" → applies 50% discount.
• Show success message on valid coupon.
• Show alert message on invalid coupon.

When applying coupon:

• If coupon code = "GRAB50" → show success message: “GRAB50 coupon applied successfully!”
• If coupon code is invalid → show alert: “Invalid coupon code. Use GRAB50 for 50% discount.”

Cart Totals

Show:

• Subtotal (sum of all product subtotals)
• Discount (if coupon applied)
• Final Total (Subtotal − Discount)

UI

• Clean, responsive layout with labels, padding, and spacing.

Initial Data

Take existing data from App.js and dont modify it because we have test cases related to that.

Data Test IDs

Use these data-testid attributes for testing:

• cart-heading → Main heading for the cart
• new-product-name → Input for new product name
• new-product-price → Input for new product price
• new-product-qty → Input for new product quantity
• new-product-description → Input for new product description
• add-product-button → Button to add new product
• cart-product-list → Wrapper for product list
• product-name → Product name text
• product-price → Product price text
• product-qty → Read-only input showing quantity
• product-discounted-price-label → Subtotal per product line
• remove-product-button → Button to remove product
• coupon-code-input → Input for coupon code
• apply-coupon-button → Button to apply coupon
• apply-coupon-message → Success message when coupon applied
• total-amount → Final total after discount