From bc165784586c73875a069380b5c43aa6a2c878ef Mon Sep 17 00:00:00 2001
From: Nicolas Clerc <kernicpanel@nclerc.fr>
Date: Fri, 21 Jun 2024 13:41:25 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20add=20created=5Fon=20date?=
 =?UTF-8?q?=20on=20orders?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding created_on date to orders would allow us to better track payments.
---
 CHANGELOG.md                                         |  4 ++++
 .../components/templates/orders/list/OrdersList.tsx  | 12 ++++++++++++
 .../admin/src/tests/orders/orders.test.e2e.ts        |  9 +++++++++
 3 files changed, 25 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index a3cdf5a2a..f85795e8e 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/admin/src/components/templates/orders/list/OrdersList.tsx b/src/frontend/admin/src/components/templates/orders/list/OrdersList.tsx
index 8b003e93d..8cb430053 100644
--- a/src/frontend/admin/src/components/templates/orders/list/OrdersList.tsx
+++ b/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 (
diff --git a/src/frontend/admin/src/tests/orders/orders.test.e2e.ts b/src/frontend/admin/src/tests/orders/orders.test.e2e.ts
index 4e0a02f2b..613a1d4d4 100644
--- a/src/frontend/admin/src/tests/orders/orders.test.e2e.ts
+++ b/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();
       }),
     );
   });