feat: download data button (#169)

ryanmalonzo · Jul 24, 2024 · fd14b12 · fd14b12
2 parents 1327388 + 093ea77
commit fd14b12
Show file tree

Hide file tree

Showing 9 changed files with 261 additions and 73 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,7 @@
     "@primevue/themes": "^4.0.0",
     "@vueuse/core": "^10.10.1",
     "axios": "^1.7.2",
+    "jszip": "^3.10.1",
     "marked": "^13.0.2",
     "pinia": "^2.1.7",
     "primeicons": "^7.0.0",

diff --git a/frontend/public/legal/cgv.md b/frontend/public/legal/cgv.md
@@ -244,14 +244,6 @@ Le Produit doit être retourné dans l'état dans lequel il a été reçu par le
 
 La responsabilité du Client n’est engagée qu’à l’égard de la dépréciation du bien résultant de manipulations autres que celles nécessaires pour établir la nature, les caractéristiques et le bon fonctionnement de ce Produit. En d’autres termes, le Client dispose de la possibilité de tester le Produit mais sa responsabilité pourra être engagée s’il procède à des manipulations autres que celles qui sont nécessaires.
 
-### 11.8. Politique d'échange
-
-En lieu et place d'un remboursement intégral du montant de la Commande, le Client peut, lors de l'exercice de son droit de rétractation, demander l'échange des Produits de sa Commande contre des Produits de nature équivalente et d'un montant total équivalent à celui de la Commande passée.
-
-Le Vendeur procède alors à l'expédition et à la livraison des nouveaux Produits choisis par le Client à réception des Produits retournés.
-
-L'expédition et la livraison de ces nouveaux Produits constituent une nouvelle Commande indépendante qui est répertoriée sur l'Espace Client du demandeur.
-
 ## 12. Garantie
 
 En dehors des garanties commerciales que le Vendeur pourrait proposer pour certains Produits, tout Client bénéficie de garanties « légales », pour l’ensemble des Produits, qui sont détaillées ci-dessous, conformément à l’article L.221-5 du Code de la consommation.

diff --git a/frontend/src/views/CartView.vue b/frontend/src/views/CartView.vue
@@ -31,7 +31,7 @@ const updateExpirationText = () => {
 }
 
 // Interval management
-let intervalId: number
+let intervalId: ReturnType<typeof setInterval>
 const startExpirationTimer = () => {
   updateExpirationText()
   intervalId = setInterval(updateExpirationText, 1000)

diff --git a/frontend/src/views/CheckoutView.vue b/frontend/src/views/CheckoutView.vue
@@ -130,7 +130,7 @@ const updateExpirationText = () => {
 }
 
 // Interval management
-let intervalId: number
+let intervalId: ReturnType<typeof setInterval>
 const startExpirationTimer = () => {
   updateExpirationText()
   intervalId = setInterval(updateExpirationText, 1000)

diff --git a/frontend/src/views/profile/DetailOrderView.vue b/frontend/src/views/profile/DetailOrderView.vue
@@ -39,7 +39,7 @@ const returnProduct = async () => {
     toast.add({
       severity: 'error',
       summary: 'Erreur',
-      detail: 'Impossible de retourner l\'article',
+      detail: "Impossible de retourner l'article",
       life: 3000
     })
   }
@@ -64,7 +64,6 @@ onBeforeMount(async () => {
   }
 })
 
-
 const openModal = async (id: string, isRefund: boolean) => {
   if (isRefund) {
     productId.value = id
@@ -101,12 +100,13 @@ const reOrder = async () => {
       life: 3000
     })
     window.location.href = data.url
-
   } catch (e) {
     toast.add({
       severity: 'error',
       summary: 'Erreur',
-      detail: (e as Error).message ?? 'Une erreur est survenue lors du traitement de votre commande. Veuillez recommencer la commande depuis le début. Si le problème persiste, contactez notre service client.',
+      detail:
+        (e as Error).message ??
+        'Une erreur est survenue lors du traitement de votre commande. Veuillez recommencer la commande depuis le début. Si le problème persiste, contactez notre service client.',
       life: 3000
     })
   }
@@ -115,12 +115,17 @@ const reOrder = async () => {
 
 <template>
   <BasePage>
-    <div class="flex flex-col justify-between gap-6 p-4 md:p-6 lg:flex-row lg:gap-[45px] lg:p-10" v-if="order">
+    <div
+      class="flex flex-col justify-between gap-6 p-4 md:p-6 lg:flex-row lg:gap-[45px] lg:p-10"
+      v-if="order"
+    >
       <div class="w-full lg:w-3/4">
         <h2 class="mb-6 text-2xl font-medium md:text-3xl">Ma commande</h2>
 
         <div class="mb-6 rounded-lg bg-white shadow">
-          <div class="flex flex-col justify-between rounded-t-lg bg-gray-100 p-4 md:flex-row md:p-5">
+          <div
+            class="flex flex-col justify-between rounded-t-lg bg-gray-100 p-4 md:flex-row md:p-5"
+          >
             <div class="mb-4 grid w-full grid-cols-1 gap-4 sm:grid-cols-2 md:mb-0 md:grid-cols-4">
               <div class="flex flex-col">
                 <span class="font-light">Commandé le :</span>
@@ -162,15 +167,27 @@ const reOrder = async () => {
                 <button class="text-black underline" v-else>
                   <a :href="order.order.linkPaiement" target="_blank"> Payer la commande </a>
                 </button>
-                <button class="text-black underline" v-if="order.order.payment_status == 'paid'" @click="reOrder">
+                <button
+                  class="text-black underline"
+                  v-if="order.order.payment_status == 'paid'"
+                  @click="reOrder"
+                >
                   Commander à nouveau
                 </button>
               </div>
             </div>
           </div>
 
-          <div v-for="item in order.products" :key="item.id" class="mb-4 flex flex-col p-4 sm:flex-row">
-            <img :src="item.image" alt="" class="mb-4 h-[130px] w-full object-cover sm:mb-0 sm:mr-4 sm:w-[130px]" />
+          <div
+            v-for="item in order.products"
+            :key="item.id"
+            class="mb-4 flex flex-col p-4 sm:flex-row"
+          >
+            <img
+              :src="item.image"
+              alt=""
+              class="mb-4 h-[130px] w-full object-cover sm:mb-0 sm:mr-4 sm:w-[130px]"
+            />
             <div class="flex w-full flex-col justify-between sm:flex-row">
               <div class="mb-4 flex flex-col justify-between sm:mb-0">
                 <p class="font-medium">{{ item.name }}</p>
@@ -179,17 +196,21 @@ const reOrder = async () => {
                 <p class="text-gray-600">{{ item.quantity }} x {{ item.unitPrice }} €</p>
               </div>
               <div class="self-end sm:self-center">
-                <p class="text-black underline" @click="openModal(item.id, item.isRefund)"
-                  v-if="order.order.status == 'completed' && item.isRefund == false">
-
-                  <!--  -->
+                <p
+                  class="cursor-pointer text-black underline"
+                  @click="openModal(item.id, item.isRefund)"
+                  v-if="order.order.status == 'completed' && item.isRefund == false"
+                >
                   Retourner un article
                 </p>
 
-                <p v-if="item.isRefund" class="text-black underline" @click="openModal(item.id, item.isRefund)">
+                <p
+                  v-if="item.isRefund"
+                  class="cursor-pointer text-black underline"
+                  @click="openModal(item.id, item.isRefund)"
+                >
                   Voir le statut du remboursement
                 </p>
-
               </div>
             </div>
           </div>
@@ -204,35 +225,40 @@ const reOrder = async () => {
     </div>
   </BasePage>
 
-  <Dialog v-model:visible="modalRefund" modalRefund
-    :header="`Retourner l'article ${order?.products.find(p => p.id === productId)?.name}`">
-
-
+  <Dialog
+    v-model:visible="modalRefund"
+    modalRefund
+    :header="`Retourner l'article ${order?.products.find((p) => p.id === productId)?.name}`"
+  >
     <strong class="mb-4 text-red-500">
       Si votre achat a été effectué, il y a moins de 14 jours, vous pouvez retourner votre article.
       Sinon votre demande sera soumise à l'approbation de notre service client.
     </strong>
 
-    <div class="flex flex-col gap-2 mt-4">
+    <div class="mt-4 flex flex-col gap-2">
       <label for="reason">Raison du retour</label>
       <Textarea id="reason" v-model="reason" rows="4" />
     </div>
 
     <template #footer>
-      <Button label="Annuler" outlined severity="secondary" @click="modalRefund = false" autofocus />
+      <Button
+        label="Annuler"
+        outlined
+        severity="secondary"
+        @click="modalRefund = false"
+        autofocus
+      />
       <Button label="Envoyer" outlined severity="secondary" @click="returnProduct" autofocus />
     </template>
   </Dialog>
 
-  <Dialog v-model:visible="modal" modal
-    :header="`Statut du remboursement de l'article ${order?.products.find(p => p.id === productId)?.name}`">
-
-
-    <p>
-      <strong>Statut du remboursement :</strong> {{ status(productRefund?.status ?? '') }}
-    </p>
+  <Dialog
+    v-model:visible="modal"
+    modal
+    :header="`Statut du remboursement de l'article ${order?.products.find((p) => p.id === productId)?.name}`"
+  >
+    <p><strong>Statut du remboursement :</strong> {{ status(productRefund?.status ?? '') }}</p>
   </Dialog>
-
 </template>
 
 <style></style>