Skip to content

Commit

Permalink
[MS] Added OrderPage
Browse files Browse the repository at this point in the history
  • Loading branch information
fabienSvstr committed Jan 6, 2025
1 parent abd0850 commit 3d67cfa
Show file tree
Hide file tree
Showing 6 changed files with 301 additions and 31 deletions.
250 changes: 233 additions & 17 deletions client/src/components/client-area/OrderInProgress.vue
View file
Original file line number Diff line number Diff line change
@@ -1,63 +1,87 @@
<!-- 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>

<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') }}
{{ $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>
Expand All @@ -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

Check warning on line 117 in client/src/components/client-area/OrderInProgress.vue

View workflow job for this annotation

GitHub Actions / spelling / cspell 

Unknown word (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">
Expand All @@ -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;
Expand All @@ -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);
}
}
}

Expand Down
17 changes: 16 additions & 1 deletion client/src/locales/en-US.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}
}
}
},
Expand Down
17 changes: 16 additions & 1 deletion client/src/locales/fr-FR.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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"
}
}
}
},
Expand Down
1 change: 0 additions & 1 deletion client/src/services/bms/mockApi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import {
CreateCustomOrderRequestQueryData,
CustomOrderQueryData,
CustomOrderRequestStatus,
CustomOrderRequestStatus,
CustomOrderStatus,
DataType,
InvoiceStatus,
Expand Down
Loading

0 comments on commit 3d67cfa

Please sign in to comment.