From cd1ac48abed6b399a365e7169e46e290ee49f59c Mon Sep 17 00:00:00 2001
From: Antonin COQUET <ext.sopra.acoquet@grandlyon.com>
Date: Mon, 15 Mar 2021 16:22:08 +0100
Subject: [PATCH] fix: user-verification feedback form
---
src/app/form/form.component.html | 36 ++++---
src/app/form/form.component.scss | 5 +
.../user-verification.component.html | 102 +++++++++++-------
.../user-verification.component.scss | 60 ++++++++++-
src/assets/form/sprite.svg | 6 ++
5 files changed, 148 insertions(+), 61 deletions(-)
diff --git a/src/app/form/form.component.html b/src/app/form/form.component.html
index 46b374e87..24a36a212 100644
--- a/src/app/form/form.component.html
+++ b/src/app/form/form.component.html
@@ -1098,25 +1098,27 @@
<svg aria-hidden="true">
<use [attr.xlink:href]="'assets/form/sprite.svg#emailVerification'"></use>
</svg>
- <h3>Un courriel vous a été envoyé afin de finaliser votre inscription</h3>
+ <h3>Un courriel vous a été envoyé afin de valider votre inscription</h3>
</div>
- <div *ngIf="currentPage == nbPagesForm && profile" class="page">
- <div class="title">
- <h3>
- Bravo !<br />
- Votre structure a bien été référencée.
- </h3>
- </div>
-
- <div class="structureInfoBlock" fxLayout="row" fxLayoutAlign="center">
- <div class="structureInfoContent" fxLayout="column">
- {{ getStructureControl('structureName').value }}
- <span>{{ getStructureControl('structureType').value }}</span>
+ <div *ngIf="currentPage == nbPagesForm && profile" class="lastPage">
+ <div class="lastPage">
+ <div class="title">
+ <h3>
+ Bravo !<br />
+ Votre structure a bien été référencée.
+ </h3>
</div>
- <div class="validateSvg">
- <svg class="validate" aria-hidden="true">
- <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
- </svg>
+
+ <div class="structureInfoBlock" fxLayout="row" fxLayoutAlign="center">
+ <div class="structureInfoContent" fxLayout="column">
+ {{ getStructureControl('structureName').value }}
+ <span>{{ getStructureControl('structureType').value }}</span>
+ </div>
+ <div class="validateSvg">
+ <svg class="validate" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+ </svg>
+ </div>
</div>
</div>
</div>
diff --git a/src/app/form/form.component.scss b/src/app/form/form.component.scss
index 0bc3f7704..f8e9ca165 100644
--- a/src/app/form/form.component.scss
+++ b/src/app/form/form.component.scss
@@ -531,3 +531,8 @@ img {
overflow: hidden;
}
}
+
+.lastPage {
+ max-width: 530px;
+ margin: 0 auto;
+}
diff --git a/src/app/user-verification/user-verification.component.html b/src/app/user-verification/user-verification.component.html
index c1e11207d..63417c23d 100644
--- a/src/app/user-verification/user-verification.component.html
+++ b/src/app/user-verification/user-verification.component.html
@@ -1,50 +1,74 @@
<div fxLayout="column" class="content-container full-screen">
<p *ngIf="!verificationSuccess && !verificationIssue">Votre email est en cours de vérification ...</p>
- <div *ngIf="verificationSuccess">
- <div class="title">
- <h3 *ngIf="structure">
- Bravo !<br />
- Votre compte et votre structure ont bien été référencés.
- </h3>
- <h3 *ngIf="!structure">
- Bravo !<br />
- Votre compte a bien été créé.
- </h3>
- </div>
- <div *ngIf="structure" class="structureCard">
- <div class="structureInfo" fxLayout="column" fxLayoutGap="14px">
- <div fxLayout="row" fxLayoutAlign="space-between start" fxLayoutGap="20px">
- <a class="structureName" routerLink="/home" [state]="{ data: structure }">{{ structure.structureName }}</a>
+ <div class="formDiv" *ngIf="verificationSuccess">
+ <div *ngIf="structure">
+ <div class="title">
+ <h1 class="title-form">Bravo, votre compte et votre structure ont bien été référencés !</h1>
+ </div>
+ <div class="structureInfoBlock" fxLayout="row" fxLayoutAlign="center">
+ <div class="structureInfoContent" fxLayout="column">
+ {{ structure.structureName }}
+ <span>{{ structure.structureType }}</span>
+ </div>
+ <div class="validateSvg">
+ <svg class="validate" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#checkVector'"></use>
+ </svg>
</div>
</div>
+ <div class="btnSection" fxLayout="row" fxLayoutAlign="space-around center">
+ <button
+ *ngIf="verificationSuccess"
+ class="btn"
+ routerLink="/home"
+ [queryParams]="{ id: structure._id }"
+ [state]="{ data: structure }"
+ >
+ Voir ma structure
+ </button>
+ </div>
+ </div>
+ <div *ngIf="!structure">
+ <div>
+ <h1 class="title-form">Une dernière validation de Rés'in et votre structure vous sera attribuée !</h1>
+ <div style="font-style: italic">Cela prendra 3 jours maximum si nous ne sommes pas le weekend ;)</div>
+ <svg class="formClock" aria-hidden="true">
+ <use [attr.xlink:href]="'assets/form/sprite.svg#formClock'"></use>
+ </svg>
+ </div>
</div>
</div>
<p *ngIf="verificationIssue">
Une erreur est survenue lors de la validation de votre email... Veuillez envoyer un mail au support.
</p>
- <!-- TypeForm -->
- <div *ngIf="!verificationIssue">
- <iframe
- *ngIf="structure"
- class="typeform-widget custom-form"
- title="typeform"
- src="https://form.typeform.com/to/m7DV3CdW?typeform-medium=embed-snippet"
- ></iframe>
- <div
- *ngIf="!structure"
- class="typeform-widget custom-form"
- data-url="https://form.typeform.com/to/ASJH3B7Z?typeform-medium=embed-snippet"
- ></div>
- </div>
- <div class="btnSection" fxLayout="row" fxLayoutAlign="space-around center">
- <button
- *ngIf="structure && verificationSuccess"
- class="btn"
- routerLink="/home"
- [queryParams]="{ id: structure._id }"
- [state]="{ data: structure }"
- >
- Voir ma structure
- </button>
+ <!-- formulaire -->
+ <div class="formDiv" *ngIf="!verificationIssue">
+ <div *ngIf="!structure">
+ En attendant, vous pouvez participer à l'amélioration de Rés'in en répondant à ces quelques questions
+ </div>
+ <div *ngIf="structure">
+ Donnez nous votre avis: vous pouvez participer à l'amélioration de Rés'in en répondant à ces quelques questions
+ </div>
+ <div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="24px" [style.margin-top]="'50px'">
+ <button class="button" routerLink="/home">Je passe mon tour</button>
+ <a
+ *ngIf="structure"
+ target="_blank"
+ class="btn custom-link"
+ rel="noopener noreferrer"
+ [href]="'https://form.typeform.com/to/m7DV3CdW?typeform-medium=embed-snippet'"
+ >
+ Nous aider
+ </a>
+ <a
+ *ngIf="!structure"
+ target="_blank"
+ class="btn custom-link"
+ rel="noopener noreferrer"
+ [href]="'https://form.typeform.com/to/ASJH3B7Z?typeform-medium=embed-snippet'"
+ >
+ Nous aider
+ </a>
+ </div>
</div>
</div>
diff --git a/src/app/user-verification/user-verification.component.scss b/src/app/user-verification/user-verification.component.scss
index 8fb73ba43..701ffdf09 100644
--- a/src/app/user-verification/user-verification.component.scss
+++ b/src/app/user-verification/user-verification.component.scss
@@ -16,8 +16,9 @@
border: 0;
color: $white;
height: 40px;
- width: 192px;
- @include btn-bold;
+ width: 244px;
+ text-decoration: none;
+ font-size: 16px !important;
}
.btnSection {
@media #{$large-phone} {
@@ -46,9 +47,58 @@
// Override button style to be the same as typeform button
button {
margin: 0px;
+ border: none;
+ background: none;
max-width: 100%;
- font-size: 24px !important;
+ cursor: pointer;
+ text-decoration: underline;
+ font-size: 16px !important;
line-height: 32px !important;
- min-height: 48px;
- width: 245px !important;
+ min-height: 40px;
+ width: 244 !important;
+}
+
+.formDiv {
+ max-width: 530px;
+ padding-bottom: 30px;
+ margin: 0 auto;
+}
+
+.title-form {
+ font-size: 26px;
+}
+
+.structureInfoBlock {
+ background: $green-1;
+ color: $white;
+ padding: 16px;
+ border-radius: 6px;
+ @include cn-bold-18;
+ .structureInfoContent {
+ width: 100%;
+ }
+ span {
+ font-style: italic;
+ @include cn-regular-14;
+ }
+ .validateSvg {
+ stroke: $white;
+ text-align: right;
+ svg {
+ height: 14px;
+ width: 14px;
+ }
+ }
+}
+
+.formClock {
+ width: 100%;
+ height: 146px;
+ margin: 24px;
+}
+
+.custom-link {
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
diff --git a/src/assets/form/sprite.svg b/src/assets/form/sprite.svg
index 1008b4e01..b351b70d1 100644
--- a/src/assets/form/sprite.svg
+++ b/src/assets/form/sprite.svg
@@ -343,4 +343,10 @@
<path d="M8 13.8182L11.8889 17L18 10" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</symbol>
+<symbol id="formClock" viewBox="0 0 146 146" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="73.2273" cy="73.8401" r="67.2273" fill="#EAF8FB" stroke="#348899" stroke-width="12"/>
+<path d="M75.2275 24.3398C75.2275 23.2353 74.3321 22.3398 73.2275 22.3398C72.123 22.3398 71.2275 23.2353 71.2275 24.3398H75.2275ZM73.2275 73.8398H71.2275C71.2275 74.4855 71.5392 75.0914 72.0645 75.4669L73.2275 73.8398ZM94.4205 91.4476C95.3191 92.0899 96.5683 91.8822 97.2106 90.9836C97.853 90.085 97.6452 88.8358 96.7466 88.1935L94.4205 91.4476ZM71.2275 24.3398V73.8398H75.2275V24.3398H71.2275ZM72.0645 75.4669L94.4205 91.4476L96.7466 88.1935L74.3906 72.2128L72.0645 75.4669Z" fill="#DC2A59"/>
+</symbol>
+
+
</svg>
--
GitLab