style(tenant): Update page when tenant link is not found

fabiengo · Nov 6, 2023 · 1bd941a · 1bd941a
1 parent a17e348
commit 1bd941a
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 36 deletions.
diff --git a/tenant/src/locales/fr.json b/tenant/src/locales/fr.json
@@ -627,7 +627,12 @@
     "and": " et ",
     "download-failed": "Echec du téléchargement. Ressayez dans quelques minutes.",
     "download-disabled-title": "Le dossier pourra être téléchargé lorsque celui-ci aura été entièrement vérifié par DossierFacile.",
-    "not-found": "Le dossier n'a pas été trouvé. Veuillez vérifier le lien fourni."
+    "not-found": {
+      "title": "Dossier introuvable",
+      "line1": "Ce dossier de location est introuvable.",
+      "line2": "Le lien est erroné ou il a été supprimé par le candidat."
+    },
+    "disclaimer": "Le service fourni par DossierFacile ne saurait être assimilé à une garantie apportée par DossierFacile sur les dossiers ayant fait l’objet d’une labellisation. DossierFacile ne saurait être tenu responsable ni être engagé directement ou indirectement dans le cadre d'un litige entre un locataire et son bailleur ou tout autre intermédiaire."
   },
   "filereinsurance": {
     "documents-VALIDATED": "Le dossier contient les pièces requises",

diff --git a/tenant/src/views/File.vue b/tenant/src/views/File.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="root">
+  <div class="root" :class="{ 'blue-background': !fileNotFound }">
     <div class="fr-container" v-if="!fileNotFound">
       <FileHeader :user="user">
         <div>
@@ -206,26 +206,17 @@
             >{{ $t("file.download-all") }}</DfButton
           >
         </div>
-        <div class="fr-mt-3w fr-text-mention--grey">
-          Le service fourni par DossierFacile ne saurait être assimilé à une
-          garantie apportée par DossierFacile sur les dossiers ayant fait
-          l’objet d’une labellisation. DossierFacile ne saurait être tenu
-          responsable ni être engagé directement ou indirectement dans le cadre
-          d'un litige entre un locataire et son bailleur ou tout autre
-          intermédiaire.
-        </div>
-      </section>
-      <section class="fr-mb-7w">
-        <OwnerBanner></OwnerBanner>
       </section>
     </div>
     <div v-if="fileNotFound" class="not-found-container fr-mt-5w">
-      <div>
-        <NakedCard class="fr-p-5w">
-          {{ $t("file.not-found") }}
-        </NakedCard>
-      </div>
+      <FileNotFound></FileNotFound>
     </div>
+    <section class="fr-mb-7w fr-container">
+      <div class="fr-mt-3w fr-text--sm fr-label--disabled">
+        {{ $t("file.disclaimer") }}
+      </div>
+      <OwnerBanner></OwnerBanner>
+    </section>
   </div>
 </template>
 
@@ -244,9 +235,11 @@ import OwnerBanner from "../components/OwnerBanner.vue";
 import NakedCard from "df-shared/src/components/NakedCard.vue";
 import FileHeader from "../components/FileHeader.vue";
 import RowListItem from "@/components/documents/RowListItem.vue";
+import FileNotFound from "@/views/FileNotFound.vue";
 
 @Component({
   components: {
+    FileNotFound,
     RowListItem,
     ProgressIndicator,
     DfButton,
@@ -438,6 +431,8 @@ export default class File extends Vue {
 }
 .root {
   width: 100%;
+}
+.blue-background {
   background-color: var(--bf100-g750);
 }
 .without-padding {

diff --git a/tenant/src/views/FileNotFound.vue b/tenant/src/views/FileNotFound.vue
@@ -0,0 +1,33 @@
+<template>
+  <div class="fr-container">
+    <div
+      class="fr-my-2w fr-grid-row fr-grid-row--gutters fr-grid-row--middle fr-grid-row--center"
+    >
+      <div class="fr-py-0 fr-col-12 fr-col-md-6">
+        <h1>{{ $tc("file.not-found.title") }}</h1>
+        <p class="fr-text--lead">
+          {{ $tc("file.not-found.line1") }}
+          <br />
+          {{ $tc("file.not-found.line2") }}
+        </p>
+      </div>
+      <div
+        class="fr-col-12 fr-col-md-3 fr-col-offset-md-1 fr-px-6w fr-px-md-0 fr-py-0"
+      >
+        <Artwork pictogram="connection-lost" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Artwork from "df-shared/src/components/Artwork.vue";
+import { Component, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {
+    Artwork,
+  },
+})
+export default class FileNotFound extends Vue {}
+</script>
diff --git a/tenant/src/views/PublicFile.vue b/tenant/src/views/PublicFile.vue
@@ -180,27 +180,16 @@
           </div>
         </div>
       </section>
-      <section class="fr-mb-7w">
-        <div class="fr-mt-3w fr-text-mention--grey">
-          Le service fourni par DossierFacile ne saurait être assimilé à une
-          garantie apportée par DossierFacile sur les dossiers ayant fait
-          l’objet d’une labellisation. DossierFacile ne saurait être tenu
-          responsable ni être engagé directement ou indirectement dans le cadre
-          d'un litige entre un locataire et son bailleur ou tout autre
-          intermédiaire.
-        </div>
-      </section>
-      <section class="fr-mb-7w">
-        <OwnerBanner></OwnerBanner>
-      </section>
     </div>
     <div v-if="fileNotFound" class="not-found-container fr-mt-5w">
-      <div>
-        <NakedCard class="fr-p-5w">
-          {{ $t("file.not-found") }}
-        </NakedCard>
-      </div>
+      <FileNotFound></FileNotFound>
     </div>
+    <section class="fr-container fr-mb-7w">
+      <div class="fr-mt-3w fr-text--sm fr-label--disabled">
+        {{ $t("file.disclaimer") }}
+      </div>
+      <OwnerBanner></OwnerBanner>
+    </section>
   </div>
 </template>
 
@@ -217,9 +206,11 @@ import FileHeader from "../components/FileHeader.vue";
 import OwnerBanner from "../components/OwnerBanner.vue";
 import NakedCard from "df-shared/src/components/NakedCard.vue";
 import RowListItem from "@/components/documents/RowListItem.vue";
+import FileNotFound from "@/views/FileNotFound.vue";
 
 @Component({
   components: {
+    FileNotFound,
     RowListItem,
     FileReinsurance,
     FileRowListItem,