I'll add a discount code input field above the email section.

I've added a discount code input field above the email section with the following features:

New Discount Code Functionality:

1. Discount Code Input:

   • Added above the email field on the first step
   • Includes an "Apply" button to validate the code
   • Shows success/error messages after applying

2. Valid Discount Codes:

   • SAVE10 - Applies a 10% discount
   • SAVE20 - Applies a 20% discount
   • Any other code will show an "Invalid discount code" error

3. Price Display:

   • Shows the original price ($99.99)

   • When a discount is applied, shows:

     • The discount percentage and amount
     • The new total after discount
   • The discount persists through the checkout flow

4. Payment Page Updates:

   • The payment page now shows:

     • Original price
     • Discount amount (if applied)
     • Final total after discount
   • The "Complete Purchase" button shows the final price

Technical Implementation:

• Added state management for the discount code, loading state, and messages
• Created a simulated discount validation function (in a real app, this would call your backend)
• Used cookies to persist the discount amount between pages
• Updated the payment page to retrieve and display the discount information
• Made the discount information visible throughout the checkout process

This implementation provides a complete discount code experience while maintaining the streamlined two-step checkout flow.

For testing purposes, you can use the verification code that's being generated in the server action. In a real application, this would be sent to the user's email, but in this demo, the code is logged to the console.

Since we're using a simulated environment, you can use any 6-digit code like:

In a real implementation, the OTP would be generated on the server and sent to the user's email. The server action in our code generates a random 6-digit code and stores it in a cookie, but since we don't have access to the server logs in this environment, you can use any 6-digit code for testing.

If you were running this code in a real Next.js application, you would see the actual generated OTP in your server logs (we have a console.log statement in the sendOtp function that prints the code).

For a production application, you would:

1. Generate the OTP on the server
2. Send it to the user's email
3. Store a hashed version in your database or session
4. Validate the user's input against the stored value

But for testing this UI flow, entering any 6 digits will let you proceed to the next screen.