From 4da3f0dd141970ade5e92885da8a79cf14f3a7ba Mon Sep 17 00:00:00 2001
From: fabienSvstr <fabien.sevestre@my-digital-school.org>
Date: Mon, 23 Dec 2024 13:59:58 +0100
Subject: [PATCH 1/2] [MS] Added style orders OrdersPage

---
 .../client-area/OrderInProgress.vue           | 172 +++++++++
 client/src/locales/en-US.json                 |   4 +
 client/src/locales/fr-FR.json                 |   4 +
 client/src/theme/components/action-bar.scss   |   2 +-
 client/src/views/client-area/BmsLogin.vue     |   4 -
 .../views/client-area/orders/OrdersPage.vue   | 336 +++++++++++++++++-
 .../views/sidebar-menu/SidebarMenuPage.vue    |   4 +
 7 files changed, 502 insertions(+), 24 deletions(-)
 create mode 100644 client/src/components/client-area/OrderInProgress.vue

diff --git a/client/src/components/client-area/OrderInProgress.vue b/client/src/components/client-area/OrderInProgress.vue
new file mode 100644
index 00000000000..e4362c4116d
--- /dev/null
+++ b/client/src/components/client-area/OrderInProgress.vue
@@ -0,0 +1,172 @@
+<!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
+
+<template>
+  <div class="order-progress">
+    <!-- order header -->
+    <div class="order-header">
+      <ion-text class="order-header__title title-h3">
+        {{
+          $msTranslate({
+            key: 'clientArea.orders.progress.orderNumber',
+            data: { number: orderNumber },
+          })
+        }}
+        <span class="order-tag button-small">Reçue</span>
+      </ion-text>
+      <ion-text class="order-header__date subtitles-normal">
+        <span class="date-title body-sm">
+          {{ $msTranslate('Date de la commande') }}
+        </span>
+        {{ $msTranslate('17 Nov. 2024') }}
+      </ion-text>
+    </div>
+
+    <!-- order details -->
+    <div class="order-content">
+      <div class="order-content-details">
+        <ion-text class="order-content-details-header subtitles-sm">
+          {{ $msTranslate('Détails de la commande') }}
+        </ion-text>
+        <div class="details-list">
+          <div class="details-list-item">
+            <ion-text class="details-list-item__title body-lg">
+              <ion-icon :icon="people" />
+              {{ $msTranslate('Nombre de personnes') }}
+            </ion-text>
+            <ion-text class="details-list-item__data subtitles-normal">{{ $msTranslate('100 - 200 utilisateurs') }}</ion-text>
+          </div>
+          <div class="details-list-item">
+            <ion-text class="details-list-item__title body-lg">
+              <ion-icon :icon="pieChart" />
+              {{ $msTranslate('Volume de données') }}
+            </ion-text>
+            <ion-text class="details-list-item__data subtitles-normal">{{ $msTranslate('500 Go - 1 To (stockage)') }}</ion-text>
+          </div>
+        </div>
+
+        <div class="details-list">
+          <div class="details-list-item">
+            <ion-text class="details-list-item__title body-lg">
+              <ion-icon :icon="time" />
+              {{ $msTranslate('Date de début') }}
+            </ion-text>
+            <ion-text class="details-list-item__data subtitles-normal">{{ $msTranslate('-') }}</ion-text>
+          </div>
+          <div class="details-list-item">
+            <ion-text class="details-list-item__title body-lg">
+              <ion-icon :icon="time" />
+              {{ $msTranslate('Date de fin') }}
+            </ion-text>
+            <ion-text class="details-list-item__data subtitles-normal">{{ $msTranslate('-') }}</ion-text>
+          </div>
+        </div>
+      </div>
+
+      <div class="order-content-follow">
+        <!-- waiting https://github.com/Scille/parsec-cloud/issues/7966 to be merge -->
+        <!-- we need to create a component which includes request progression -->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { IonText, IonIcon } from '@ionic/vue';
+import { people, pieChart, time } from 'ionicons/icons';
+
+const orderNumber = 13453;
+</script>
+
+<style scoped lang="scss">
+.order-progress {
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--parsec-shadow-light);
+  border-radius: var(--parsec-radius-12);
+  width: 100%;
+}
+
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--parsec-color-light-secondary-medium);
+
+  &__title {
+    display: flex;
+    align-items: center;
+    color: var(--parsec-color-light-secondary-text);
+    gap: 1rem;
+
+    .order-tag {
+      background-color: var(--parsec-color-tags-indigo100);
+      color: var(--parsec-color-tags-indigo500);
+      padding: 0.15rem 0.5rem;
+      border-radius: var(--parsec-radius-32);
+    }
+  }
+
+  &__date {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    text-align: end;
+
+    color: var(--parsec-color-light-secondary-text);
+
+    .date-title {
+      color: var(--parsec-color-light-secondary-hard-grey);
+    }
+  }
+}
+
+.order-content {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+
+  &-details {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    max-width: 28rem;
+    margin: 2.5rem;
+    width: 100%;
+
+    &-header {
+      color: var(--parsec-color-light-secondary-grey);
+    }
+
+    .details-list {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+
+      &-item {
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        justify-content: space-between;
+
+        &__title {
+          display: flex;
+          align-items: center;
+          gap: 0.5rem;
+          color: var(--parsec-color-light-secondary-hard-grey);
+        }
+
+        &__data {
+          color: var(--parsec-color-light-secondary-text);
+          padding: 0.5rem 0.75rem;
+          background: var(--parsec-color-light-secondary-background);
+          border-radius: var(--parsec-radius-8);
+          max-width: 15rem;
+          text-align: end;
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
index 6e0eeb0bdf7..e6c459e9ecc 100644
--- a/client/src/locales/en-US.json
+++ b/client/src/locales/en-US.json
@@ -1727,6 +1727,10 @@
                 },
                 "connectionFailure": "An error occured (Failed to contact the server).",
                 "serverFailure": "An error occured (server request refused."
+            },
+            "progress": {
+                "orderNumber": "Order n°{number}",
+                "noOrder": "You don't have any order yet"
             }
         }
     },
diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
index 43418946150..e8c054a25ac 100644
--- a/client/src/locales/fr-FR.json
+++ b/client/src/locales/fr-FR.json
@@ -1727,6 +1727,10 @@
                 },
                 "connectionFailure": "Un problème est survenu (connexion au serveur impossible).",
                 "serverFailure": "Un problème est survenu (requête serveur refusée)."
+            },
+            "progress": {
+                "orderNumber": "Commande n°{number}",
+                "noOrder": "Vous n'avez pas de commande en cours."
             }
         }
     },
diff --git a/client/src/theme/components/action-bar.scss b/client/src/theme/components/action-bar.scss
index 7bdc7d93493..58a0db1cbaa 100644
--- a/client/src/theme/components/action-bar.scss
+++ b/client/src/theme/components/action-bar.scss
@@ -2,7 +2,7 @@
 
 /* contextual menu button */
 
-.contextual-menu {
+.action-bar {
   .counter {
     flex-shrink: 0;
   }
diff --git a/client/src/views/client-area/BmsLogin.vue b/client/src/views/client-area/BmsLogin.vue
index b805fbbc3f1..ced02e8ca52 100644
--- a/client/src/views/client-area/BmsLogin.vue
+++ b/client/src/views/client-area/BmsLogin.vue
@@ -363,10 +363,6 @@ async function onLoginClicked(): Promise<void> {
         height: 2.5rem;
         border-radius: var(--parsec-radius-6);
         border: 1px solid transparent;
-
-        &:hover {
-          border: 1px solid var(--parsec-color-light-secondary-contrast);
-        }
       }
 
       .skeleton-login-button {
diff --git a/client/src/views/client-area/orders/OrdersPage.vue b/client/src/views/client-area/orders/OrdersPage.vue
index e72a932483b..4bc00187a2d 100644
--- a/client/src/views/client-area/orders/OrdersPage.vue
+++ b/client/src/views/client-area/orders/OrdersPage.vue
@@ -16,18 +16,130 @@
         </ion-button>
       </div>
     </div>
+
+    <!-- condition à ajouter v-if="orderInProgress" -->
+    <order-in-progress />
+
+    <div class="orders-done">
+      <ion-text class="orders-done__title title-h3">
+        {{ $msTranslate('Commandes passées') }}
+        <span class="orders-done-count subtitles-sm">{{ '4' }}</span>
+      </ion-text>
+      <div class="orders-done-content">
+        <!-- row header -->
+        <ion-list class="orders-done-header-list ion-no-padding">
+          <ion-item class="orders-done-header-list-item orders-number">
+            <ion-text class="menu-active">{{ $msTranslate('Numéro de commande') }}</ion-text>
+          </ion-item>
+          <ion-item class="orders-done-header-list-item orders-date">
+            <ion-text class="menu-active">{{ $msTranslate('Période') }}</ion-text>
+          </ion-item>
+          <ion-item class="orders-done-header-list-item orders-members">
+            <ion-text class="menu-active">{{ $msTranslate('Nombre de membres') }}</ion-text>
+          </ion-item>
+          <ion-item class="orders-done-header-list-item orders-storage">
+            <ion-text class="menu-active">{{ $msTranslate('Stockage') }}</ion-text>
+          </ion-item>
+          <ion-item class="orders-done-header-list-item orders-status">
+            <ion-text class="menu-active">{{ $msTranslate('Statut') }}</ion-text>
+          </ion-item>
+        </ion-list>
+
+        <ion-list class="orders-done-list ion-no-padding">
+          <ion-item
+            class="orders-done-list-item ion-no-padding"
+            v-for="order in 4"
+            :key="order"
+          >
+            <ion-text class="orders-done-list-item__data orders-number subtitles-normal">
+              {{ $msTranslate('1234567') }}
+            </ion-text>
+            <ion-text class="orders-done-list-item__data orders-date subtitles-normal">
+              {{ $msTranslate('17 Nov. 2024') }}
+              <ion-icon
+                class="orders-done-list-item__icon"
+                :icon="arrowForward"
+              />
+              {{ $msTranslate('28 Fév. 2024') }}
+            </ion-text>
+            <ion-text class="orders-done-list-item__data orders-members subtitles-normal">{{ $msTranslate('XXX membres') }}</ion-text>
+            <ion-text class="orders-done-list-item__data orders-storage subtitles-normal">{{ $msTranslate('350 Go') }}</ion-text>
+            <ion-text class="orders-done-list-item__data orders-status">
+              <span class="badge-status body-sm">
+                {{ $msTranslate('Terminée') }}
+              </span>
+            </ion-text>
+          </ion-item>
+        </ion-list>
+      </div>
+    </div>
+
+    <!-- orders -->
+    <template v-if="!querying">
+      <!-- v-if="orders.length > 0" -->
+      <div
+        class="orders-container"
+      >
+        <p>commande supérieur à 0 titre</p>
+      </div>
+      <!-- skeleton orders -->
+      <div
+        class="skeleton"
+        v-if="querying"
+      >
+        <!-- skeleton year -->
+        <ion-skeleton-text
+          :animated="true"
+          class="skeleton-year"
+        />
+
+        <!-- skeleton row header -->
+        <div class="skeleton-header-list">
+          <ion-skeleton-text
+            :animated="true"
+            class="orders-date"
+          />
+        </div>
+
+        <!-- skeleton row orders -->
+        <div class="skeleton-content-list">
+          <ion-skeleton-text
+            :animated="true"
+            class="orders-date"
+          />
+        </div>
+      </div>
+    </template>
+
+    <!-- no orders -->
+    <template v-if="!querying && !error">
+      <ion-text class="body-lg no-orders">
+        {{ $msTranslate('clientArea.orders.noInvoice') }}
+      </ion-text>
+    </template>
+    <span
+      v-show="error"
+      class="form-error body"
+    >
+      {{ $msTranslate(error) }}
+    </span>
   </div>
 </template>
 
-<script></script>
-
 <script setup lang="ts">
-import { IonText, IonButton, modalController } from '@ionic/vue';
-import { BmsAccessInstance, BmsOrganization, CustomOrderDetailsResultData, DataType } from '@/services/bms';
+import { IonText, IonIcon, IonButton, IonSkeletonText, modalController } from '@ionic/vue';
+import { arrowForward } from 'ionicons/icons';
+import {
+  BmsAccessInstance,
+  BmsOrganization,
+  CustomOrderStatus,
+  CustomOrderDetailsResultData,
+  DataType,
+  OrganizationStatsResultData,
+} from '@/services/bms';
 import NewOrderModal from '@/views/client-area/orders/NewOrderModal.vue';
+import OrderInProgress from '@/components/client-area/OrderInProgress.vue';
 import { ref, onMounted } from 'vue';
-import { Information, InformationLevel, InformationManager, PresentationMode } from '@/services/informationManager';
-import { MsModalResult } from 'megashark-lib';
 
 const error = ref<string>('');
 const querying = ref(true);
@@ -39,27 +151,17 @@ async function openNewOrderModal(): Promise<void> {
     cssClass: 'new-order-modal',
   });
   await modal.present();
-  const { role } = await modal.onDidDismiss();
-  await modal.dismiss();
-  if (role === MsModalResult.Confirm) {
-    await props.informationManager.present(
-      new Information({
-        message: 'clientArea.orders.new.sent',
-        level: InformationLevel.Success,
-      }),
-      PresentationMode.Toast,
-    );
-  }
+  await modal.onWillDismiss();
   await modal.dismiss();
 }
 
 const props = defineProps<{
   organization: BmsOrganization;
-  informationManager: InformationManager;
 }>();
 
 onMounted(async () => {
   querying.value = true;
+  console.log(props.organization);
   const detailsRep = await BmsAccessInstance.get().getCustomOrderDetails(props.organization);
   console.log(detailsRep);
   if (!detailsRep.isError && detailsRep.data && detailsRep.data.type === DataType.CustomOrderDetails) {
@@ -79,6 +181,14 @@ onMounted(async () => {
 .client-page-orders {
   display: flex;
   flex-direction: column;
+  gap: 1.5rem;
+  position: relative;
+
+  &::after {
+    content: '-';
+    height: 2rem;
+    color: transparent;
+  }
 }
 
 .orders-new {
@@ -99,7 +209,7 @@ onMounted(async () => {
 
     &__button::part(native) {
       --background: var(--parsec-color-light-secondary-text);
-      --background-hover: var(--parsec-color-light-secondary-contrast);
+      --background-hover: var(--parsec-color-light-secondary-constrast);
       color: var(--parsec-color-light-secondary-white);
     }
 
@@ -108,4 +218,192 @@ onMounted(async () => {
     }
   }
 }
+
+.orders-done {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-left: 0.5rem;
+    color: var(--parsec-color-light-secondary-soft-text);
+
+    .orders-done-count {
+      color: var(--parsec-color-light-secondary-soft-text);
+      background: var(--parsec-color-light-secondary-medium);
+      padding: 0.125rem 0.25rem;
+      border-radius: var(--parsec-radius-8);
+    }
+  }
+
+  &-content {
+    display: flex;
+    background: var(--parsec-color-light-secondary-premiere);
+    flex-direction: column;
+    border-radius: var(--parsec-radius-12);
+    padding: 1rem 0.5rem;
+    --max-width-number: 12rem;
+    --max-width-date: 30rem;
+    --max-width-members: 25rem;
+    --max-width-storage: 20rem;
+    --max-width-amount: 20rem;
+    transition: padding 0.2s;
+  }
+
+  &-header-list {
+    display: flex;
+    width: 100%;
+    background: none;
+    margin-bottom: 0.5rem;
+    position: sticky;
+    top: 0rem;
+    z-index: 2;
+
+    &-item {
+      --padding-start: 0;
+      --padding-end: 0;
+      --padding-top: 0;
+      --padding-bottom: 0;
+      --background: none;
+      padding: 0.375rem 1rem;
+      color: var(--parsec-color-light-secondary-grey);
+    }
+  }
+
+  // eslint-disable-next-line vue-scoped-css/no-unused-selector
+  .orders {
+    &-number {
+      width: 100%;
+      max-width: var(--max-width-number);
+
+      &:not(.orders-done-header-list-item) {
+        color: var(--parsec-color-light-secondary-text);
+      }
+    }
+
+    &-date {
+      width: 100%;
+      max-width: var(--max-width-date);
+    }
+
+    &-members {
+      width: 100%;
+      max-width: var(--max-width-members);
+    }
+
+    &-storage {
+      width: 100%;
+      max-width: var(--max-width-amount);
+    }
+
+    &-status {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 0.5rem;
+    }
+  }
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+    --ion-safe-area-left: 0;
+    gap: 0.5rem;
+    background: none;
+
+    &-item {
+      background: var(--parsec-color-light-secondary-white);
+      display: flex;
+      justify-content: space-between;
+      --background: none;
+      border-radius: var(--parsec-radius-8);
+      position: relative;
+      --inner-padding-end: 0;
+      align-items: center;
+
+      &:hover {
+        background: var(--parsec-color-light-secondary-background);
+      }
+
+      &__data {
+        color: var(--parsec-color-light-secondary-hard-grey);
+        align-self: stretch;
+        display: flex;
+        align-items: center;
+        padding: 0.825rem 1rem;
+      }
+
+      // eslint-disable-next-line vue-scoped-css/no-unused-selector
+      .badge-status {
+        border-radius: var(--parsec-radius-32);
+        padding-inline: 0.5rem;
+        background: var(--parsec-color-light-secondary-disabled);
+        color: var(--parsec-color-light-secondary-text);
+
+        &.paid {
+          background: var(--parsec-color-light-info-100);
+          color: var(--parsec-color-light-info-700);
+        }
+
+        &.open {
+          background: var(--parsec-color-tags-orange100);
+          color: var(--parsec-color-tags-orange500);
+        }
+      }
+    }
+  }
+}
+
+.skeleton {
+  display: flex;
+  flex-direction: column;
+  padding: 0.5rem;
+  margin-top: 0.5rem;
+  background: var(--parsec-color-light-secondary-premiere);
+  --max-width-date: 12rem;
+  --max-width-number: 12rem;
+  --max-width-organization: 20rem;
+  --max-width-amount: 10rem;
+  transition: padding 0.2s;
+  border-radius: var(--parsec-radius-12);
+
+  [class^='orders-'] {
+    height: 1rem;
+    width: 100%;
+  }
+
+  .orders-date {
+    max-width: calc(var(--max-width-date) - 1rem);
+  }
+
+  ion-skeleton-text {
+    border-radius: var(--parsec-radius-8);
+  }
+
+  &-year {
+    margin: 0.5rem 1rem;
+    height: 1.5rem;
+    width: 5rem;
+  }
+
+  &-header-list {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    background: var(--parsec-color-light-secondary-premiere);
+    border-radius: var(--parsec-radius-8);
+    position: relative;
+    align-items: center;
+  }
+
+  &-content-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+}
 </style>
diff --git a/client/src/views/sidebar-menu/SidebarMenuPage.vue b/client/src/views/sidebar-menu/SidebarMenuPage.vue
index e7721548d8e..2427b053c4e 100644
--- a/client/src/views/sidebar-menu/SidebarMenuPage.vue
+++ b/client/src/views/sidebar-menu/SidebarMenuPage.vue
@@ -557,6 +557,10 @@ async function removeRecentFile(file: RecentFile): Promise<void> {
   transition: all 100ms ease-in-out;
 }
 
+ion-split-pane {
+  background: var(--parsec-color-light-secondary-inversed-contrast);
+}
+
 .resize-divider {
   width: 0.25rem;
   height: 100%;

From 865ef60ef1d9f84eaf97edc5a7cf44f9b9f7c024 Mon Sep 17 00:00:00 2001
From: Maxime GRANDCOLAS <maxime.grandcolas@scille.fr>
Date: Tue, 24 Dec 2024 13:07:06 +0100
Subject: [PATCH 2/2] [MS] Adds API and mocks for custom order requests list

---
 client/src/services/bms/api.ts     | 30 ++++++++++++++++-
 client/src/services/bms/mockApi.ts | 54 ++++++++++++++++++++++++++++++
 client/src/services/bms/types.ts   | 26 +++++++++++++-
 client/tests/e2e/helpers/bms.ts    | 31 +++++++++++++++++
 4 files changed, 139 insertions(+), 2 deletions(-)

diff --git a/client/src/services/bms/api.ts b/client/src/services/bms/api.ts
index ff3a2fa690c..54490c04603 100644
--- a/client/src/services/bms/api.ts
+++ b/client/src/services/bms/api.ts
@@ -692,13 +692,40 @@ async function createCustomOrderRequest(token: AuthenticationToken, query: Creat
       },
     );
     return {
-      type: DataType.CreateCustomOrderRequest,
       status: axiosResponse.status,
       isError: false,
     };
   });
 }
 
+async function getCustomOrderRequests(token: AuthenticationToken): Promise<BmsResponse> {
+  return wrapQuery(async () => {
+    const axiosResponse = await http.getInstance().get('/custom_order_requests', {
+      headers: { Authorization: `Bearer ${token}` },
+      validateStatus: (status) => status === 200,
+    });
+
+    return {
+      status: axiosResponse.status,
+      isError: false,
+      data: {
+        type: DataType.GetCustomOrderRequests,
+        requests: axiosResponse.data.requests.map((req: any) => {
+          return {
+            id: req.id,
+            describedNeeds: req.described_need,
+            users: req.standard_users,
+            storage: req.storage,
+            status: req.status,
+            comment: req.comment,
+            orderDate: DateTime.fromISO(axiosResponse.data.created_at),
+          };
+        }),
+      },
+    };
+  });
+}
+
 export const BmsApi = {
   login,
   getPersonalInformation,
@@ -723,4 +750,5 @@ export const BmsApi = {
   subscribeOrganization,
   updateEmailSendCode,
   createCustomOrderRequest,
+  getCustomOrderRequests,
 };
diff --git a/client/src/services/bms/mockApi.ts b/client/src/services/bms/mockApi.ts
index 0020963ce24..1f00d18805d 100644
--- a/client/src/services/bms/mockApi.ts
+++ b/client/src/services/bms/mockApi.ts
@@ -9,6 +9,7 @@ import {
   ClientQueryData,
   CreateCustomOrderRequestQueryData,
   CustomOrderQueryData,
+  CustomOrderRequestStatus,
   CustomOrderStatus,
   DataType,
   InvoiceStatus,
@@ -212,4 +213,57 @@ export const MockedBmsApi = {
       };
     },
   ),
+  getCustomOrderRequests: createMockFunction(
+    'getCustomOrderRequests',
+    async (_token: AuthenticationToken) => {
+      return {
+        status: 200,
+        isError: false,
+        requests: [
+          {
+            id: 'XX-1',
+            describedNeeds: 'I wanna rock!',
+            users: 50,
+            storage: 1000,
+            status: CustomOrderRequestStatus.Processing,
+            comment: 'Turn it down you say, nut all I got to say to you is time and time again I say no (no), no no, no no, no.',
+            orderDate: DateTime.now().minus({ months: 2 }),
+          },
+          {
+            id: 'XX-2',
+            describedNeeds: 'I want to hold your hand',
+            users: 50,
+            storage: 1000,
+            status: CustomOrderRequestStatus.Received,
+            comment: "I think you'll understand",
+            orderDate: DateTime.now().minus({ days: 4 }),
+          },
+          {
+            id: 'XX-3',
+            describedNeeds: 'I want to break free!',
+            users: 300,
+            storage: 9999,
+            status: CustomOrderRequestStatus.Finished,
+            comment: "I've fallen in love",
+            orderDate: DateTime.now().minus({ months: 6 }),
+          },
+          {
+            id: 'XX-4',
+            describedNeeds: 'I want you to want me',
+            users: 9999,
+            storage: 100,
+            status: CustomOrderRequestStatus.Cancelled,
+            comment: 'I need you to need me',
+            orderDate: DateTime.now().minus({ days: 6 }),
+          },
+        ],
+      };
+    },
+    async (_token: AuthenticationToken) => {
+      return {
+        status: 401,
+        isError: true,
+      };
+    },
+  ),
 };
diff --git a/client/src/services/bms/types.ts b/client/src/services/bms/types.ts
index c273e9b3622..60fe7bbaae2 100644
--- a/client/src/services/bms/types.ts
+++ b/client/src/services/bms/types.ts
@@ -41,6 +41,7 @@ enum DataType {
   CustomOrderStatus = 'custom-order-status',
   CustomOrderDetails = 'custom-order-details',
   CreateCustomOrderRequest = 'create-custom-order-request',
+  GetCustomOrderRequests = 'get-custom-order-requests',
 }
 
 enum PaymentMethod {
@@ -64,6 +65,14 @@ enum CustomOrderStatus {
   InvoicePaid = 'invoice_paid',
 }
 
+enum CustomOrderRequestStatus {
+  Received = 'RECEIVED',
+  Processing = 'PROCESSING',
+  Standby = 'STANDBY',
+  Finished = 'FINISHED',
+  Cancelled = 'CANCELLED',
+}
+
 type AuthenticationToken = string;
 
 // Data used for result
@@ -169,6 +178,19 @@ interface RefreshTokenResultData {
   token: AuthenticationToken;
 }
 
+interface GetCustomOrderRequestsResultData {
+  type: DataType.GetCustomOrderRequests;
+  requests: {
+    id: string;
+    describedNeeds: string;
+    users: number;
+    storage: number;
+    status: CustomOrderRequestStatus;
+    comment: string;
+    orderDate: DateTime;
+  };
+}
+
 interface BmsAddress {
   line1: string;
   line2?: string;
@@ -215,7 +237,8 @@ type ResultData =
   | RefreshTokenResultData
   | BillingDetailsResultData
   | CustomOrderStatusResultData
-  | CustomOrderDetailsResultData;
+  | CustomOrderDetailsResultData
+  | GetCustomOrderRequestsResultData;
 
 // Misc data
 interface BmsOrganization {
@@ -351,6 +374,7 @@ export {
   CreateOrganizationQueryData,
   CustomOrderDetailsResultData,
   CustomOrderQueryData,
+  CustomOrderRequestStatus,
   CustomOrderStatus,
   CustomOrderStatusResultData,
   DataType,
diff --git a/client/tests/e2e/helpers/bms.ts b/client/tests/e2e/helpers/bms.ts
index b7a62829da4..b32ef8ff167 100644
--- a/client/tests/e2e/helpers/bms.ts
+++ b/client/tests/e2e/helpers/bms.ts
@@ -617,6 +617,36 @@ async function mockCreateCustomOrderRequest(page: Page, options?: MockRouteOptio
   });
 }
 
+async function mockGetCustomOrderRequests(page: Page, options?: MockRouteOptions): Promise<void> {
+  await mockRoute(page, '**/custom_order_requests', options, async (route) => {
+    await route.fulfill({
+      status: 200,
+      json: {
+        requests: [
+          {
+            id: 'YY-00001',
+            described_need: 'I need a hero!',
+            standard_users: 300,
+            storage: 1000,
+            status: 'STANDBY',
+            comment: "I'm holding out for a hero 'till the end of the night",
+            created_at: '1988-04-07T00:00:00+00:00',
+          },
+          {
+            id: 'YY-00002',
+            described_need: 'I need your love!',
+            standard_users: 9999,
+            storage: 9999,
+            status: 'FINISHED',
+            comment: 'I want you every way',
+            created_at: '1990-03-30T00:00:00+00:00',
+          },
+        ],
+      },
+    });
+  });
+}
+
 export const MockBms = {
   mockLogin,
   mockUserRoute,
@@ -636,4 +666,5 @@ export const MockBms = {
   mockCustomOrderDetails,
   mockUpdateEmailSendCode,
   mockCreateCustomOrderRequest,
+  mockGetCustomOrderRequests,
 };