Project: nextjs
Task (challenging): 1) Add a button .place-order-in-cart in the Popover of Shopping Cart; when clicked, create an order with 'Pending payment' status without paying or decreasing product quantity, and redirect to /order/:order-id; 2) When Order created, clear Cart 3) Add .header-go-to-my-orders to the dropdown in HeaderUserMenu.tsx; when clicked, go to the Orders Page of the current user; Each order in my orders page should be displayed with id, status total price inside #my_order_${order_id}; and clicking on an order should jump to the order detail page at /order/:order-id; 4) In /order/:order-id, display the product title, images, price in tr#product_in_order_${product_id}; display the order price and order status. 5) Create CSS files to beautify CSS. Constraint: DO NOT use a third-party UI library.