The discount component allows the user to enter and submit a discount code. By default, it consists of a title, a field, and a button. When a coupon is successfully added, it is displayed instead of the field, and the button changes to "Remove Coupon"

Where this element can be seen?

This component appears on the cart page.

How should this element be designed?

There are 3 possible states:

• No coupon added, no text entered: button is disabled
• No coupon added, text entered: "apply coupon" button enabled
• Coupon added: "remove coupon" button enabled

Empty coupon code form

<aside> ℹ️ Usually, styling this element takes from-to: 2-5h

</aside>

Applied coupon code form

How the design may look like?

Design example #1

Design example #2

Issues with the designs

• No entered coupon view

How to develop styles for this element?

The renderDiscountCode method of the CartPage route renders the discount code.

CartCoupon is responsible for rendering the discount input.

How the implementation may look like?

Implementation example #1

Implementation example #2