From 3d67cfa0fc963f4dc27adb819382002f9dc0d55a Mon Sep 17 00:00:00 2001
From: fabienSvstr <fabien.sevestre@my-digital-school.org>
Date: Fri, 27 Dec 2024 11:10:19 +0100
Subject: [PATCH] [MS] Added `OrderPage`

---
 .../client-area/OrderInProgress.vue           | 250 ++++++++++++++++--
 client/src/locales/en-US.json                 |  17 +-
 client/src/locales/fr-FR.json                 |  17 +-
 client/src/services/bms/mockApi.ts            |   1 -
 client/src/services/bms/types.ts              |   2 +-
 .../views/client-area/orders/OrdersPage.vue   |  45 +++-
 6 files changed, 301 insertions(+), 31 deletions(-)

diff --git a/client/src/components/client-area/OrderInProgress.vue b/client/src/components/client-area/OrderInProgress.vue
index e4362c4116d..4f8f7137d92 100644
--- a/client/src/components/client-area/OrderInProgress.vue
+++ b/client/src/components/client-area/OrderInProgress.vue
@@ -1,46 +1,57 @@
 <!-- Parsec Cloud (https://parsec.cloud) Copyright (c) BUSL-1.1 2016-present Scille SAS -->
 
 <template>
-  <div class="order-progress">
+  <div
+    class="order-progress"
+    @click="toggleOpen"
+  >
     <!-- order header -->
     <div class="order-header">
       <ion-text class="order-header__title title-h3">
         {{
           $msTranslate({
             key: 'clientArea.orders.progress.orderNumber',
-            data: { number: orderNumber },
+            data: { number: request.id },
           })
         }}
-        <span class="order-tag button-small">Reçue</span>
+        <span
+          class="order-tag button-small"
+          :class="getStatusClass(customOrderRequestStatus)"
+        >
+          {{ orderStepInfo.tag }}
+        </span>
       </ion-text>
       <ion-text class="order-header__date subtitles-normal">
         <span class="date-title body-sm">
-          {{ $msTranslate('Date de la commande') }}
+          {{ $msTranslate('clientArea.orders.new.date') }}
         </span>
-        {{ $msTranslate('17 Nov. 2024') }}
+        {{ $msTranslate(I18n.formatDate(request.orderDate, 'short')) }}
       </ion-text>
     </div>
 
     <!-- order details -->
-    <div class="order-content">
+    <div
+      v-if="open"
+      class="order-content"
+    >
       <div class="order-content-details">
         <ion-text class="order-content-details-header subtitles-sm">
-          {{ $msTranslate('Détails de la commande') }}
+          {{ $msTranslate('clientArea.orders.new.details') }}
         </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') }}
+              {{ $msTranslate('clientArea.orders.new.membersNeed') }}
             </ion-text>
-            <ion-text class="details-list-item__data subtitles-normal">{{ $msTranslate('100 - 200 utilisateurs') }}</ion-text>
+            <ion-text class="details-list-item__data subtitles-normal">{{ request.users }}</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') }}
+              {{ $msTranslate('clientArea.orders.new.dataNeeded') }}
             </ion-text>
-            <ion-text class="details-list-item__data subtitles-normal">{{ $msTranslate('500 Go - 1 To (stockage)') }}</ion-text>
+            <ion-text class="details-list-item__data subtitles-normal">{{ request.storage }}</ion-text>
           </div>
         </div>
 
@@ -48,16 +59,29 @@
           <div class="details-list-item">
             <ion-text class="details-list-item__title body-lg">
               <ion-icon :icon="time" />
-              {{ $msTranslate('Date de début') }}
+              {{ $msTranslate('clientArea.orders.new.startDate') }}
+            </ion-text>
+            <ion-text
+              class="details-list-item__data subtitles-normal"
+              v-if="organization"
+            >
+              {{ $msTranslate('-') }}
+            </ion-text>
+            <ion-text
+              class="details-list-item__data subtitles-normal"
+              v-else
+            >
+              {{ request.orderDate }}
             </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') }}
+              {{ $msTranslate('clientArea.orders.new.endDate') }}
+            </ion-text>
+            <ion-text class="details-list-item__data subtitles-normal">
+              {{ request.orderDate }}
             </ion-text>
-            <ion-text class="details-list-item__data subtitles-normal">{{ $msTranslate('-') }}</ion-text>
           </div>
         </div>
       </div>
@@ -73,8 +97,171 @@
 <script setup lang="ts">
 import { IonText, IonIcon } from '@ionic/vue';
 import { people, pieChart, time } from 'ionicons/icons';
+import {
+  CustomOrderRequestStatus,
+  BmsOrganization,
+  CustomOrderStatus,
+  BmsAccessInstance,
+  DataType,
+} from '@/services/bms';
+import { ref, computed, onMounted } from 'vue';
+import { DateTime } from 'luxon';
+import { isDefaultOrganization } from '@/views/client-area/types';
+import { Translatable, I18n } from 'megashark-lib';
+import { MockedBmsApi } from '@/services/bms/mockApi';
+
+const error = ref<string>('');
+const querying = ref(true);
+// Status BMS
+const customOrderRequestStatus = ref<CustomOrderRequestStatus>(CustomOrderRequestStatus.Received);
+// Status Sellsy
+const customOrderStatus = ref<CustomOrderStatus>(CustomOrderStatus.Unknown);
+const open = ref(false);
+
+const props = defineProps<{
+  request: CustomOrderRequest;
+  organization: BmsOrganization;
+}>();
+
+interface CustomOrderRequest {
+  id: string;
+  describedNeeds: string;
+  users: number;
+  storage: number;
+  status: CustomOrderRequestStatus;
+  comment: string;
+  orderDate: DateTime;
+}
+
+interface RequestStatusStep {
+  title: Translatable;
+  subtitle?: Translatable;
+  tag: Translatable;
+}
+
+onMounted(async () => {
+  if (isDefaultOrganization(props.organization)) {
+    querying.value = true;
+    return;
+  }
+
+  const orgStatusResponse = await BmsAccessInstance.get().getCustomOrderStatus(props.organization);
+  const requestsRep = await MockedBmsApi.getCustomOrderRequests();
+
+  if (!orgStatusResponse.isError && orgStatusResponse.data && orgStatusResponse.data.type === DataType.CustomOrderStatus) {
+    customOrderStatus.value = orgStatusResponse.data.status;
+  } else {
+    error.value = 'clientArea.dashboard.processing.error.title';
+  }
+
+  if (!requestsRep.isError && requestsRep.data && requestsRep.data.type === DataType.GetCustomOrderRequests) {
+    const request = requestsRep.data.requests.find((req) => req.id === props.request.id);
+    if (request) {
+      customOrderRequestStatus.value = request.status;
+    }
+  } else {
+    error.value = 'clientArea.dashboard.processing.error.title';
+  }
+
+  querying.value = false;
+});
+
+const orderStepInfo = computed<RequestStatusStep>(() => {
+
+  switch (customOrderRequestStatus.value) {
+    case CustomOrderRequestStatus.Received:
+      if (CustomOrderStatus.NothingLinked) {
+        return {
+          title: 'Commande reçue',
+          subtitle: 'Votre demande a bien été reçue, nous allons la traiter dans les plus brefs délais.',
+          tag: 'Reçue',
+        };
+      }
+      break;
+    case CustomOrderRequestStatus.Processing:
+      if (CustomOrderStatus.NothingLinked) {
+        return {
+          title: 'Demande traitée par le commercial',
+          subtitle: 'Notre équipe commerciale traite votre demande, nous allons vous recontacter pour définir précisément vos besoins.',
+          tag: 'En attente de traitement',
+        };
+      }
+      break;
+    case CustomOrderRequestStatus.Finished:
+      if (CustomOrderStatus.NothingLinked) {
+        return {
+          title: 'Validation de la commande',
+          subtitle: 'Votre commande est confirmée, vous allez bientôt recevoir la facture à payer.',
+          tag: 'Confirmé',
+        };
+      }
+      if (CustomOrderStatus.EstimateLinked || CustomOrderStatus.InvoiceToBePaid) {
+        return {
+          title: 'En attente de paiement',
+          subtitle: 'En attente de la réception de votre virement bancaire pour rendre disponible votre organisation.',
+          tag: 'En attente de paiement',
+        };
+      }
+      if (CustomOrderStatus.InvoicePaid) {
+        return {
+          title: 'Organisation disponible',
+          tag: 'Disponible',
+        };
+      }
+      break;
+    case CustomOrderRequestStatus.Standby:
+      return {
+        title: 'Commande suspendue',
+        tag: 'Suspendue',
+      };
+    case CustomOrderRequestStatus.Cancelled:
+      return {
+        title: 'Commande annulée',
+        tag: 'Annulée',
+      };
+    default:
+      return {
+        title: 'Aucune information',
+        subtitle: 'Votre demande est en cours de traitement, nous vous tiendrons informé de son avancement.',
+        tag: 'Inconnu',
+      };
+  }
+  return {
+    title: 'Aucune information',
+    subtitle: 'Votre demande est en cours de traitement, nous vous tiendrons informé de son avancement.',
+    tag: 'Inconnu',
+  };
+});
 
-const orderNumber = 13453;
+function getStatusClass (status: CustomOrderRequestStatus): string | undefined {
+  switch (status) {
+    case CustomOrderRequestStatus.Received :
+      return 'order-tag-received';
+    case CustomOrderRequestStatus.Processing:
+      return 'order-tag-processing';
+    case CustomOrderRequestStatus.Finished:
+      if (CustomOrderStatus.NothingLinked) {
+        return 'order-tag-finished';
+      }
+      if (CustomOrderStatus.EstimateLinked || CustomOrderStatus.InvoiceToBePaid) {
+        return 'order-tag-finished';
+      }
+      if (CustomOrderStatus.InvoicePaid) {
+        return 'order-tag-available';
+      }
+      break;
+    case CustomOrderRequestStatus.Standby:
+      return 'order-tag-standby';
+    case CustomOrderRequestStatus.Cancelled:
+      return 'order-tag-cancelled';
+    default:
+      return '';
+  }
+}
+
+function toggleOpen(): boolean {
+  return open.value = !open.value;
+}
 </script>
 
 <style scoped lang="scss">
@@ -92,6 +279,7 @@ const orderNumber = 13453;
   align-items: center;
   padding: 1rem 1.5rem;
   border-bottom: 1px solid var(--parsec-color-light-secondary-medium);
+  cursor: pointer;
 
   &__title {
     display: flex;
@@ -100,10 +288,38 @@ const orderNumber = 13453;
     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);
+
+      &-received {
+        background-color: var(--parsec-color-tags-indigo100);
+        color: var(--parsec-color-tags-indigo500);
+      }
+      &-processing {
+        background-color: var(--parsec-color-light-secondary-premiere);
+        color: var(--parsec-color-light-secondary-text);
+      }
+      &-finished {
+        background-color: var(--parsec-color-tags-blue100);
+        color: var(--parsec-color-tags-blue500);
+      }
+      &-invoice {
+        background-color: var(--parsec-color-tags-orange100);
+        color: var(--parsec-color-tags-orange500);
+      }
+      &-available {
+        background-color: var(--parsec-color-light-success-50);
+        color: var(--parsec-color-light-success-500);
+      }
+      &-standby {
+        background-color: var(--parsec-color-tags-orange100);
+        color: var(--parsec-color-tags-orange500);
+      }
+      &-cancelled {
+        background-color: var(--parsec-color-light-danger-50);
+        color: var(--parsec-color-light-danger-500);
+      }
     }
   }
 
diff --git a/client/src/locales/en-US.json b/client/src/locales/en-US.json
index dcf7cbb773e..b8b809f3b33 100644
--- a/client/src/locales/en-US.json
+++ b/client/src/locales/en-US.json
@@ -1697,7 +1697,13 @@
             "new": {
                 "title": "You need to create a new organization?",
                 "button": "New request",
-                "sent": "Your request has been sent."
+                "sent": "Your request has been sent.",
+                "details": "Order details",
+                "date": "Date",
+                "membersNeed": "Amount of members",
+                "dataNeeded": "Amount of data",
+                "startDate": "Starting date",
+                "endDate": "Ending date"
             },
             "request": {
                 "title": "Request a new on-premise contract",
@@ -1731,6 +1737,15 @@
             "progress": {
                 "orderNumber": "Order n°{number}",
                 "noOrder": "You don't have any order yet"
+            },
+            "passed": {
+                "header": {
+                    "orderNumber": "Order number",
+                    "period": "Period",
+                    "members": "Members number",
+                    "storage": "Storage",
+                    "status": "Status"
+                }
             }
         }
     },
diff --git a/client/src/locales/fr-FR.json b/client/src/locales/fr-FR.json
index 75a74f617eb..f87946eb64f 100644
--- a/client/src/locales/fr-FR.json
+++ b/client/src/locales/fr-FR.json
@@ -1697,7 +1697,13 @@
             "new": {
                 "title": "Vous avez besoin de créer une nouvelle organisation ?",
                 "button": "Nouvelle demande",
-                "sent": "Votre demande a bien été envoyée."
+                "sent": "Votre demande a bien été envoyée.",
+                "details": "Détails de la demande",
+                "date": "Date de la demande",
+                "membersNeed": "Nombre de membres",
+                "dataNeeded": "Volume de données",
+                "startDate": "Date de début",
+                "endDate": "Date de fin"
             },
             "request": {
                 "title": "Demande d'un contrat sur-mesure",
@@ -1731,6 +1737,15 @@
             "progress": {
                 "orderNumber": "Commande n°{number}",
                 "noOrder": "Vous n'avez pas de commande en cours."
+            },
+            "passed": {
+                "header": {
+                    "orderNumber": "Numéro de commande",
+                    "period": "Période",
+                    "members": "Nombre de membres",
+                    "storage": "Volume de données",
+                    "status": "Statut"
+                }
             }
         }
     },
diff --git a/client/src/services/bms/mockApi.ts b/client/src/services/bms/mockApi.ts
index b33c0e2eae5..8f81b006a72 100644
--- a/client/src/services/bms/mockApi.ts
+++ b/client/src/services/bms/mockApi.ts
@@ -10,7 +10,6 @@ import {
   CreateCustomOrderRequestQueryData,
   CustomOrderQueryData,
   CustomOrderRequestStatus,
-  CustomOrderRequestStatus,
   CustomOrderStatus,
   DataType,
   InvoiceStatus,
diff --git a/client/src/services/bms/types.ts b/client/src/services/bms/types.ts
index 7c40c8142a8..a61e49d7f6f 100644
--- a/client/src/services/bms/types.ts
+++ b/client/src/services/bms/types.ts
@@ -42,7 +42,6 @@ enum DataType {
   CustomOrderDetails = 'custom-order-details',
   CreateCustomOrderRequest = 'create-custom-order-request',
   GetCustomOrderRequests = 'get-custom-order-requests',
-  GetCustomOrderRequests = 'get-custom-order-requests',
 }
 
 enum PaymentMethod {
@@ -381,6 +380,7 @@ export {
   CustomOrderStatusResultData,
   DataType,
   DeletePaymentMethodQueryData,
+  GetCustomOrderRequestsResultData,
   InvoiceStatus,
   ListOrganizationsResultData,
   LoginQueryData,
diff --git a/client/src/views/client-area/orders/OrdersPage.vue b/client/src/views/client-area/orders/OrdersPage.vue
index 4bc00187a2d..0e46f07787b 100644
--- a/client/src/views/client-area/orders/OrdersPage.vue
+++ b/client/src/views/client-area/orders/OrdersPage.vue
@@ -18,7 +18,19 @@
     </div>
 
     <!-- condition à ajouter v-if="orderInProgress" -->
-    <order-in-progress />
+    <template v-if="contractRequests && !error">
+      <order-in-progress
+        v-for="order in contractRequests.requests"
+        :key="order.id"
+        :request="order"
+        :organization="organization"
+      />
+    </template>
+    <template v-else>
+      <ion-text class="body-lg no-orders">
+        {{ $msTranslate(error) }}
+      </ion-text>
+    </template>
 
     <div class="orders-done">
       <ion-text class="orders-done__title title-h3">
@@ -29,19 +41,19 @@
         <!-- 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-text class="menu-active">{{ $msTranslate('clientArea.orders.passed.header.orderNumber') }}</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-text class="menu-active">{{ $msTranslate('clientArea.orders.passed.header.period') }}</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-text class="menu-active">{{ $msTranslate('clientArea.orders.passed.header.members') }}</ion-text>
           </ion-item>
           <ion-item class="orders-done-header-list-item orders-storage">
-            <ion-text class="menu-active">{{ $msTranslate('Stockage') }}</ion-text>
+            <ion-text class="menu-active">{{ $msTranslate('clientArea.orders.passed.header.storage') }}</ion-text>
           </ion-item>
           <ion-item class="orders-done-header-list-item orders-status">
-            <ion-text class="menu-active">{{ $msTranslate('Statut') }}</ion-text>
+            <ion-text class="menu-active">{{ $msTranslate('clientArea.orders.passed.header.status') }}</ion-text>
           </ion-item>
         </ion-list>
 
@@ -127,23 +139,26 @@
 </template>
 
 <script setup lang="ts">
-import { IonText, IonIcon, IonButton, IonSkeletonText, modalController } from '@ionic/vue';
+import { IonText, IonList, IonItem, IonIcon, IonButton, IonSkeletonText, modalController } from '@ionic/vue';
 import { arrowForward } from 'ionicons/icons';
 import {
   BmsAccessInstance,
   BmsOrganization,
   CustomOrderStatus,
+  CustomOrderRequestStatus,
   CustomOrderDetailsResultData,
+  GetCustomOrderRequestsResultData,
   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 { MockedBmsApi } from '@/services/bms/mockApi';
 
 const error = ref<string>('');
 const querying = ref(true);
 const contractDetails = ref<CustomOrderDetailsResultData | undefined>(undefined);
+const contractRequests = ref<GetCustomOrderRequestsResultData | undefined>(undefined);
 
 async function openNewOrderModal(): Promise<void> {
   const modal = await modalController.create({
@@ -161,14 +176,24 @@ const props = defineProps<{
 
 onMounted(async () => {
   querying.value = true;
-  console.log(props.organization);
+
   const detailsRep = await BmsAccessInstance.get().getCustomOrderDetails(props.organization);
-  console.log(detailsRep);
+  const requestsRep = await MockedBmsApi.getCustomOrderRequests();
+
   if (!detailsRep.isError && detailsRep.data && detailsRep.data.type === DataType.CustomOrderDetails) {
     contractDetails.value = detailsRep.data;
   } else {
     error.value = 'clientArea.contracts.errors.noInfo';
   }
+
+  console.log(requestsRep);
+  if (!requestsRep.isError && requestsRep.data && requestsRep.data.type === DataType.GetCustomOrderRequests) {
+    contractRequests.value = requestsRep.data;
+    contractRequests.value.requests = requestsRep.data.requests;
+  } else {
+    error.value = 'clientArea.contracts.errors.noInfo';
+  }
+
   querying.value = false;
 });
 </script>