In this challenge, you will develop a fully functional and responsive order success page for a mock e-commerce platform. The page displays an order success message, order details and summary.

You will be provided with designs that have been adapted for mobile, tablet, and desktop interfaces. You will also be provided with a sample order to be displayed on the order success page.

When you work on the E-commerce Website challenge, you will have to display the actual order created from the checkout page. For now, you will be provided with sample data pertaining to the user's order, including:

• Order number
• Purchased items and subtotal
• Shipping details
• Coupons they applied
• Payment method

Implementation requirements

Order summary

• Order number: Users should be able to copy the order number to their clipboard by clicking on the order number.
• Order summary: Populate information according to the sample order given to you. You may assume shipping is always FREE for this case.
• Default sort: Latest item added to cart first.
• Item denomination: Each product variant in the order should be displayed separately instead of bundled into 1 product. For e.g., if I added both Orange and Pink StepSoft socks, they should display as separate rows.
• List price vs Sale price: If there is a platform discount available, display the list price with a strikethrough. Otherwise, display only the list price.
• Coupon discount: If there is a coupon applied to the order, display the "Coupon discount" row. Otherwise, it shouldn't show up.
• Shipping address and payment: Display the shipping address and payment method used for the order.

General requirements

• Design fidelity: Aim to follow the design as closely as possible. All elements in the design should be present, using the specified text color, font size, font weight, spacing, dimensions, etc.
• Button / link states: Implement and style buttons / links to reflect different states - normal, hover, and disabled.
• Responsive behavior:
  • Text size: Should be responsive; font size is larger for wider devices, smaller for narrow devices.
  • Responsive layout: The content should stack vertically on smaller screens and align horizontally as the screen width increases.
• Cross-browser compatibility: Check that your solution works for major browsers including Chrome, Firefox, and Safari.
• [Stretch goal] Performance optimization: Code for fast load times with efficient CSS and JavaScript techniques.
• [Stretch goal] Accessibility and semantics: Follow best practices for web accessibility, such as using semantic HTML and ARIA roles where necessary and using proper alt tags for images.