[MS] Order Page

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>

client/src/locales/en-US.json

@@ -1351,7 +1351,8 @@
                 "invoices": "Invoices",
                 "billingMethod": "Payment method",
                 "billingDetails": "Billing details",
-                "contract": "Contract"
+                "contract": "Contract",
+                "orders": "Orders"
             },
             "help": {
                 "title": "Do you need any help?",
@@ -1374,7 +1375,8 @@
                 "customOrderBillingDetails": "Billing details",
                 "customOrderInvoices": "Invoices",
                 "customOrderStatistics": "Statistics",
-                "customOrderProcessing": "Order tracking"
+                "customOrderProcessing": "Order tracking",
+                "orders": "Orders"
             },
             "preferences": "Preferences"
         },
@@ -1690,6 +1692,43 @@
                 "price": "€{count}",
                 "download": "Download"
             }
+        },
+        "orders": {
+            "new": {
+                "title": "You need to create a new organization?",
+                "button": "New request"
+            },
+            "request": {
+                "title": "Request a new on-premise contract",
+                "subtitle": "Would you like to take out a new contract to create an organization? Please specify the desired configuration.",
+                "submit": "Send the request",
+                "userNeeds": {
+                    "label": "How many people would use Parsec?",
+                    "choices": {
+                        "50": "Less than 50 people",
+                        "100": "From 50 to 100 people",
+                        "300": "From 100 to 300 people",
+                        "more": "More than 300 people"
+                    }
+                },
+                "storageNeeds": {
+                    "label": "How much storage do you need?",
+                    "choices": {
+                        "100": "Less than 100 GB",
+                        "500": "From 100 GB to 500 GB",
+                        "1000": "From 500 GB to 1 TB",
+                        "more": "More than 1 TB"
+                    }
+                },
+                "description": {
+                    "label": "Describe your needs",
+                    "placeholder": "Tell us more about your needs, expectations, and constraints..."
+                }
+            },
+            "progress": {
+                "orderNumber": "Order n°{number}",
+                "noOrder": "You don't have any order yet"
+            }
         }
     },
     "workspaceHistory": {

client/src/locales/fr-FR.json

@@ -1351,7 +1351,8 @@
                 "invoices": "Factures",
                 "billingMethod": "Méthode de paiement",
                 "billingDetails": "Coordonnées de facturation",
-                "contract": "Contrat"
+                "contract": "Contrat",
+                "orders": "Commandes"
             },
             "help": {
                 "title": "Vous avez besoin d'aide ?",
@@ -1374,7 +1375,8 @@
                 "customOrderBillingDetails": "Coordonnées de facturation",
                 "customOrderInvoices": "Factures",
                 "customOrderStatistics": "Statistiques",
-                "customOrderProcessing": "Suivi de commande"
+                "customOrderProcessing": "Suivi de commande",
+                "orders": "Commandes"
             },
             "preferences": "Préférences"
         },
@@ -1690,6 +1692,43 @@
                 "price": "{count} €",
                 "download": "Télécharger"
             }
+        },
+        "orders": {
+            "new": {
+                "title": "Vous avez besoin de créer une nouvelle organisation ?",
+                "button": "Nouvelle demande"
+            },
+            "request": {
+                "title": "Demande de nouveau contrat sur-mesure",
+                "subtitle": "Vous souhaitez souscrire à un nouveau contrat pour créer une organisation ? Veuillez nous préciser la configuration souhaitée.",
+                "submit": "Envoyer la demande",
+                "userNeeds": {
+                    "label": "Combien de personnes utiliseraient Parsec ?",
+                    "choices": {
+                        "50": "Moins de 50 personnes",
+                        "100": "De 50 à 100 personnes",
+                        "300": "De 100 à 300 personnes",
+                        "more": "Plus de 300 personnes"
+                    }
+                },
+                "storageNeeds": {
+                    "label": "Quel volume de données vous est nécessaire ?",
+                    "choices": {
+                        "100": "Moins de 100 Go",
+                        "500": "De 100 Go à 500 Go",
+                        "1000": "De 500 Go à 1 To",
+                        "more": "Plus de 1 To"
+                    }
+                },
+                "description": {
+                    "label": "Décrire vos besoins",
+                    "placeholder": "Dites-nous en plus sur vos besoins, vos attentes et vos contraintes..."
+                }
+            },
+            "progress": {
+                "orderNumber": "Commande n°{number}",
+                "noOrder": "Vous n'avez pas de commande en cours."
+            }
         }
     },
     "workspaceHistory": {

client/src/theme/components/action-bar.scss

@@ -2,7 +2,7 @@
 
 /* contextual menu button */
 
-.contextual-menu {
+.action-bar {
   .counter {
     flex-shrink: 0;
   }

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 {

client/src/views/client-area/ClientAreaPage.vue

@@ -103,6 +103,11 @@
                 :organization="currentOrganization"
                 @organization-selected="onOrganizationSelected"
               />
+              <orders-page
+                v-if="currentPage === ClientAreaPages.Orders"
+                :organization="currentOrganization"
+                @organization-selected="onOrganizationSelected"
+              />
               <custom-order-billing-details-page
                 v-if="currentPage === ClientAreaPages.CustomOrderBillingDetails"
                 :organization="currentOrganization"
@@ -132,6 +137,7 @@ import PersonalDataPage from '@/views/client-area/personal-data/PersonalDataPage
 import StatisticsPage from '@/views/client-area/statistics/StatisticsPage.vue';
 import CustomOrderBillingDetailsPage from '@/views/client-area/billing-details/CustomOrderBillingDetailsPage.vue';
 import CustomOrderStatisticsPage from '@/views/client-area/statistics/CustomOrderStatisticsPage.vue';
+import OrdersPage from '@/views/client-area/orders/OrdersPage.vue';
 import useSidebarMenu from '@/services/sidebarMenu';
 import { Translatable } from 'megashark-lib';
 import { ClientAreaQuery, getCurrentRouteQuery, navigateTo, Routes } from '@/router';
@@ -278,6 +284,8 @@ function getTitleByPage(): Translatable {
       return 'clientArea.header.titles.customOrderStatistics';
     case ClientAreaPages.CustomOrderBillingDetails:
       return 'clientArea.header.titles.customOrderBillingDetails';
+    case ClientAreaPages.Orders:
+      return 'clientArea.header.titles.orders';
     default:
       return '';
   }

client/src/views/client-area/ClientAreaSidebar.vue

@@ -214,6 +214,20 @@
           {{ $msTranslate('clientArea.sidebar.menu.stats') }}
         </ion-item>
 
+        <ion-item
+          button
+          lines="none"
+          class="button-medium menu-client-list-item"
+          :class="{ 'current-page menu-active': currentPage === ClientAreaPages.Orders }"
+          @click="goToPageClicked(ClientAreaPages.Orders)"
+        >
+          <ion-icon
+            class="menu-client-list-item__icon"
+            :icon="cube"
+          />
+          {{ $msTranslate('clientArea.sidebar.menu.orders') }}
+        </ion-item>
+
         <!-- billing -->
         <ion-item
           button
@@ -287,7 +301,7 @@
 
 <script setup lang="ts">
 import { askQuestion, Answer, ChevronExpand, MsImage, MsModalResult, MsInformationTooltip } from 'megashark-lib';
-import { arrowForward, card, chatbubbleEllipses, home, logOut, podium, grid, idCard, newspaper, add } from 'ionicons/icons';
+import { arrowForward, card, chatbubbleEllipses, home, logOut, podium, grid, idCard, newspaper, add, cube } from 'ionicons/icons';
 import {
   BmsAccessInstance,
   BmsOrganization,