✨(frontend) add created_on date on orders

Adding created_on date to orders would allow us to better track payments.

CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to
 
 - Do not update OpenEdX enrollment if this one is already
   up-to-date on the remote lms
+- 
+### Added
+
+- Add `created_on` column to the `Order` list view in the backoffice
 
 ## [2.4.0] - 2024-06-21
 

src/frontend/admin/src/components/templates/orders/list/OrdersList.tsx

@@ -13,6 +13,7 @@ import { CustomLink } from "@/components/presentational/link/CustomLink";
 import { PATH_ADMIN } from "@/utils/routes/path";
 import { commonTranslations } from "@/translations/common/commonTranslations";
 import { OrderFilters } from "@/components/templates/orders/filters/OrderFilters";
+import { formatShortDate } from "@/utils/dates";
 
 const messages = defineMessages({
   id: {
@@ -40,6 +41,11 @@ const messages = defineMessages({
     defaultMessage: "State",
     description: "Label for the state header inside the table",
   },
+  createdOn: {
+    id: "components.templates.orders.list.createdOn",
+    defaultMessage: "Created on",
+    description: "Label for the created on header inside the table",
+  },
 });
 
 type Props = DefaultTableProps<OrderListItem>;
@@ -86,6 +92,12 @@ export function OrdersList(props: Props) {
       headerName: intl.formatMessage(messages.state),
       flex: 1,
     },
+    {
+      field: "created_on",
+      headerName: intl.formatMessage(messages.createdOn),
+      flex: 1,
+      valueGetter: (value, row) => formatShortDate(row.created_on),
+    },
   ];
 
   return (

src/frontend/admin/src/tests/orders/orders.test.e2e.ts

@@ -19,6 +19,7 @@ import {
 } from "@/services/api/models/Organization";
 import { ORGANIZATION_OPTIONS_REQUEST_RESULT } from "@/tests/mocks/organizations/organization-mock";
 import { closeAllNotification, delay } from "@/components/testing/utils";
+import { formatShortDateTest } from "@/tests/utils";
 
 const url = "http://localhost:8071/api/v1.0/admin/orders/";
 const catchIdRegex = getUrlCatchIdRegex(url);
@@ -438,6 +439,9 @@ test.describe("Order list", () => {
     await expect(
       page.getByRole("columnheader", { name: "State" }),
     ).toBeVisible();
+    await expect(
+      page.getByRole("columnheader", { name: "Created on" }),
+    ).toBeVisible();
   });
 
   test("Check all the orders are presents", async ({ page }) => {
@@ -459,6 +463,11 @@ test.describe("Order list", () => {
         await expect(
           rowLocator.getByRole("gridcell", { name: order.state }),
         ).toBeVisible();
+        await expect(
+          rowLocator.getByRole("gridcell", {
+            name: await formatShortDateTest(page, order.created_on),
+          }),
+        ).toBeVisible();
       }),
     );
   });