✨ Feat(tenant): Add explanation to shared file (#1630)

On shared file without supporting documents, add a text to explain. UI: Use full width for text
MTES-MCT · Dec 11, 2024 · 36bd343 · 36bd343
1 parent 2efebfb
commit 36bd343
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 14 deletions.
diff --git a/tenantv3/src/components/FileHeader.vue b/tenantv3/src/components/FileHeader.vue
@@ -1,19 +1,17 @@
 <template>
   <section class="background fr-pb-5w fr-mb-5w">
     <div class="fr-container">
-      <div class="fr-col-md-8">
-        <div class="fr-grid-col">
-          <p class="fr-badge fr-badge--sm fr-mt-3w">
-            {{ t('last-update', [getLastUpdateDate()]) }}
-          </p>
-          <h1 class="fr-h1 color--white fr-mt-3w" v-if="user">
-            {{ t('file.title', [getName()]) }}
-          </h1>
-          <p class="text-bold color--white">
-            {{ t('file.description', [getStatus(), getIncomeSum()]) }}
-          </p>
-          <slot></slot>
-        </div>
+      <div class="fr-grid-col">
+        <p class="fr-badge fr-badge--sm fr-mt-3w">
+          {{ t('last-update', [getLastUpdateDate()]) }}
+        </p>
+        <h1 class="fr-h1 color--white fr-mt-3w" v-if="user">
+          {{ t('file.title', [getName()]) }}
+        </h1>
+        <p class="text-bold color--white">
+          {{ t('file.description', [getStatus(), getIncomeSum()]) }}
+        </p>
+        <slot></slot>
       </div>
     </div>
   </section>

diff --git a/tenantv3/src/views/PublicFile.vue b/tenantv3/src/views/PublicFile.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="root">
     <div class="fr-container" v-if="!fileNotFound">
-      <FileHeader :user="user"></FileHeader>
+      <FileHeader :user="user">
+        <div class="fr-alert fr-alert--info bg-white">
+          <p v-html="t('preview')" />
+        </div>
+      </FileHeader>
 
       <FileReinsurance
         :dossier-status="user?.status || 'TO_PROCESS'"
@@ -351,4 +355,19 @@ function getTaxDocumentBadgeLabel(user: User | Guarantor): string {
   --text-default-grey: #fff;
   --background-contrast-grey: #1d2437;
 }
+
+.bg-white {
+  background-color: #fff;
+}
 </style>
+
+<i18n>
+{
+  "fr": {
+    "preview": "Ce dossier est <strong>un aperçu sans document justificatif</strong>.<br />Si vous souhaitez consulter le dossier complet, vous devez demander au candidat de vous le transmettre."
+  },
+  "en": {
+    "preview": "This file is <strong>a preview without supporting documents</strong>.<br />If you wish to consult the complete file, you must ask the candidate to send it to you."
+  }
+}
+</i18n>