My orders list is the customer's past orders. By clicking on an order, the customer can view order details.

Where this element can be seen?

My Account

How should this element be designed?

Untitled

Untitled

Designs should represent the visual output of all order data. By default, it is represented as a table with the possibility to open a popup with the information of each order.

The date should be represented in an understandable date format, for example, 01/01/01 is not the correct way since we do not know the placement of D, M, Y.

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

</aside>

Untitled

How the design may look like?

Design examples

How to develop styles for this element?

It is rendered in the MyAccountMyOrders component. The popup is rendered by the MyAccountOrderPopup component.

All elements by default are placed in the table, therefore styles are to be isolated to not brake other tables across the application.

MyAccountMyOrders has shouldComponentUpdate method which prevents components from updating on state change, therefore if you need to implement functionality that is related to the component update, please override this method and add a new condition.

How the implementation may look like?

Implementation example #1