Skip to content

Commit

Permalink
Add feedback when card is missing
Browse files Browse the repository at this point in the history
  • Loading branch information
@thomashbrnrd
thomashbrnrd committed May 7, 2024
1 parent 1af68fc commit f7835c6
Show file tree
Hide file tree
Showing 8 changed files with 141 additions and 187 deletions.
2 changes: 1 addition & 1 deletion frontend/cypress/e2e/shoulder-bolt-rifle-securing.cy.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ describe('Shoulder Bolt Rifle Securing', () => {
cy.getByDataTestid('next-step').should('not.have.attr', 'disabled')
cy.getByDataTestid('next-step').click()
cy.url().should('contain', '/guide-identification/resultat-final')
cy.getByDataTestid('arm-category').should('contain', 'Catégorie B')
cy.getByDataTestid('arm-category').should('contain', 'Catégorie C')
cy.getByDataTestid('return-to-home-end').click()
cy.url().should('contain', '/accueil')
})
Expand Down
1 change: 1 addition & 0 deletions frontend/src/components.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ declare module 'vue' {
DsfrTag: typeof import('@gouvminint/vue-dsfr')['DsfrTag']
FooterMES: typeof import('./components/FooterMES.vue')['default']
HeaderMain: typeof import('./components/HeaderMain.vue')['default']
MissingCardAlert: typeof import('./components/MissingCardAlert.vue')['default']
OnboardingSwiper: typeof import('./components/OnboardingSwiper.vue')['default']
PopupContact: typeof import('./components/PopupContact.vue')['default']
PopupVideo: typeof import('./components/PopupVideo.vue')['default']
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/components/MissingCardAlert.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
<template>
<div class="fr-alert fr-alert--warning">
<h3 class="fr-alert__title">Absence de carte</h3>
<p>Pour obtenir un <strong>résultat plus précis</strong>, recommencez la prise de photo en ajoutant
<strong>une carte à côté de l’arme</strong>.
</p>
</div>
</template>
252 changes: 73 additions & 179 deletions frontend/src/components/ResultPage.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { ref, computed, watchEffect } from 'vue'
import axios from 'axios'
import SnackbarAlert from '@/components/SnackbarAlert.vue'
import { resultTree, ALARM_GUNS_TYPOLOGIES, DISCLAIMERS } from '@/utils/firearms-utils/index'
import { resultTree, ALARM_GUNS_TYPOLOGIES, MEASURED_GUNS_TYPOLOGIES, DISCLAIMERS } from '@/utils/firearms-utils/index'
import { isUserUsingCrosscall } from '@/utils/isUserUsingCrosscall'
import { useSnackbarStore } from '@/stores/snackbar'
import { useStepsStore } from '@/stores/steps'
Expand Down Expand Up @@ -52,6 +52,7 @@ const typology = computed(() => resultStore.typology)
const isDummy = computed(() => stepsStore.isDummy)
const isDummyTypology = computed(() => resultTree[typology.value]?.isDummyTypology === true)
const isCardDetected = computed(() => resultStore.gunLength !== null && resultStore.gunBarrelLength !== null)
const isUp = ref(false)
const isDown = ref(false)
Expand Down Expand Up @@ -104,192 +105,96 @@ function sendFeedback (isCorrect: boolean) {
<template>
<div class="result-frame -mx-8 py-5 px-8">
<div class="result">
<h2
v-if="route.name === 'IdentificationTypologyResult' && isDummyTypology === true"
class="typology-title bg-white py-4"
>
<h2 v-if="route.name === 'IdentificationTypologyResult' && isDummyTypology === true"
class="typology-title bg-white py-4">
Typologie de l'arme
</h2>
<h2
v-else
class="typology-title bg-white py-4"
>
<h2 v-else class="typology-title bg-white py-4">
Résultat Final
</h2>
<div
class="result-image"
:style="{backgroundImage:`url(${img})`}"
/>
<div class="result-image" :style="{backgroundImage:`url(${img})`}" />
<div class="fr-tile fr-enlarge-link mb-3">
<h2 class="fr-tile__title px-2">
<div v-if="confidenceLevel === 'low'">
<div class="fr-tile__body">
<DsfrTag
class="fr-tag--sm error-tag"
label="Indice de fiabilité insuffisant"
/>
</div>
<p class="category fr-callout__title mt-3">
<img
class="px-2"
src="@/assets/guide-identification/icones/gun.jpg"
alt=""
>
Catégorie non déterminée
</p>
<p class="text-sm font-normal m-4 text-left text-current">
Nous n'avons pas suffisamment d'éléments pour fournir une réponse fiable. Nous vous conseillons de faire appel à un expert.
</p>
<ContactExpert v-if="isUserUsingCrosscall()" />
</div>
<div v-else>
<div class="fr-tile__body">
<div v-if="confidenceLevel === 'high'">
<DsfrTag
class="fr-tag--sm success-tag"
>
Indice de fiabilité : {{ Math.floor(confidence * 100) }}%
</DsfrTag>
</div>
<div v-else>
<DsfrTag
class="fr-tag--sm warning-tag"
>
Indice de fiabilité : {{ Math.floor(confidence * 100) }}%
</DsfrTag>
<p class="warning-text">
Nous vous conseillons de faire appel à un expert pour confirmer cette réponse.
</p>
<ContactExpert v-if="isUserUsingCrosscall()" />
</div>
<div v-if="route.name !== 'IdentificationTypologyResult'|| isDummyTypology !== true">
<p
data-testid="arm-category"
class="category fr-callout__title mt-3"
>
<img
class="px-2"
src="@/assets/guide-identification/icones/gun.jpg"
alt=""
>
<span>Catégorie {{ category }}
<p
v-if="disclaimer"
class="disclaimer"
><span
class="fr-icon-warning-fill text-blue"
aria-hidden="true"
/><span v-html="disclaimer" /></p>
</span>
</p>
<div
class="callout-mention"
>
<p v-for="mention in getMentionsFromCategories(category)">
{{ mention }}
</p>
</div>
</div>
<div>
<p class="mt-2 text-left text-base fr-callout__text">
<span class="font-normal">Typologie : </span>
<span v-if="isDummy">Arme factice de type </span>
<span v-else-if="stepsStore.selectedAlarmGun">Arme d'alarme de type </span>
<span class="typo">
{{ label }}
</span>
</p>
</div>
</div>
</div>
</h2>
</div>
<div
v-if="route.name === 'IdentificationTypologyResult' && confidenceLevel !== 'low' && resultTree[typology]?.isDummyTypology"
class="fr-tile fr-enlarge-link p-4"
>
<div class="fr-tile__body pt-0">
<h3 class="fr-tile__title" />
<div class="flex">
<img
class="h-24"
src="@/assets/guide-identification/icones/warning.jpg"
alt="alt"
>
<p class="text-sm text-justify">
Basegun a identifié votre arme mais a besoin <span class="font-bold">d’informations complémentaires</span> pour vous donner sa catégorie légale.
</p>
<h2 class="fr-tile__title px-2"></h2>
<div v-if="confidenceLevel === 'low'">
<div class="fr-tile__body">
<DsfrTag class="fr-tag--sm error-tag" label="Indice de fiabilité insuffisant" />
</div>
<p class="category fr-callout__title mt-3">
<img class="px-2" src="@/assets/guide-identification/icones/gun.jpg" alt="">
Catégorie non déterminée
</p>
<p class="text-sm font-normal m-4 text-left text-current">
Nous n'avons pas suffisamment d'éléments pour fournir une réponse fiable. Nous vous conseillons de faire
appel à un expert.
</p>
<ContactExpert v-if="isUserUsingCrosscall()" />
</div>
</div>
<div v-else>
<template v-if="confidenceLevel !== 'low'">
<div class="fr-tile fr-enlarge-link fr-tile__body pt-0">
<h3 class="fr-tile__title" />
<div class="block">
<div class="flex">
<span><span
class="fr-icon-warning-fill text-blue mx-1"
aria-hidden="true"
/>Attention<span
class="fr-icon-warning-fill text-blue mx-1"
aria-hidden="true"
/></span>
</div>
<p class="text-sm text-justify">
Le résultat donné par Basegun n’emporte qu’une simple <span class="font-bold">valeur de renseignement</span>.
Pour faire référence dans une procédure, il <span class="font-bold">doit impérativement et réglementairement être validé</span>
par le biais d'un examen scientifique ou technique prévu par le code de procédure pénale.
<div v-else>
<div class="fr-tile__body">
<div v-if="confidenceLevel === 'high'">
<DsfrTag class="fr-tag--sm success-tag">
Indice de fiabilité : {{ Math.floor(confidence * 100) }}%
</DsfrTag>
</div>
<div v-else>
<DsfrTag class="fr-tag--sm warning-tag">
Indice de fiabilité : {{ Math.floor(confidence * 100) }}%
</DsfrTag>
<p class="warning-text">
Nous vous conseillons de faire appel à un expert pour confirmer cette réponse.
</p>
<ContactExpert v-if="isUserUsingCrosscall()" />
</div>
<div class="fr-alert fr-alert--info mt-3">
<h3 class="fr-alert__title" v-if="isDummy">Arme factice de type {{ label }}</h3>
<h3 class="fr-alert__title" v-else-if="stepsStore.selectedAlarmGun">Arme d'alarme de type {{ label }}</h3>
<h3 class="fr-alert__title" v-else>{{ label }}</h3>
<template v-if="confidenceLevel !== 'low' && (route.name !== 'IdentificationTypologyResult' || isDummyTypology !== true)">
<h3 class="fr-alert__title" data-testid="arm-category">Catégorie {{ category }}</h3>
<p v-for="mention in getMentionsFromCategories(category)">
{{ mention }}
</p>
</template>
</div>
<div v-if="disclaimer && confidenceLevel !== 'low' && route.name !== 'IdentificationTypologyResult'" class="fr-alert fr-alert--warning">
<p v-html="disclaimer"></p>
</div>
<MissingCardAlert v-if="MEASURED_GUNS_TYPOLOGIES.includes(typology) && !isCardDetected === false"/>
<div
v-if="confidenceLevel !== 'low' && route.name !== 'IdentificationTypologyResult'"
class="fr-callout mt-3">
<p class="fr-callout__text"> Le résultat donné par Basegun n’emporte qu’une simple <span
class="font-bold">valeur de
renseignement</span>.
Pour faire référence dans une procédure, il <span class="font-bold">doit impérativement et
règlementairement être validé</span>
par le biais d'un examen scientifique ou technique prévu par le code de procédure pénale.</p>
</div>
<div v-if="route.name === 'IdentificationTypologyResult' && confidenceLevel !== 'low' && resultTree[typology]?.isDummyTypology" class="fr-alert fr-alert--warning">
<p>Basegun a identifié votre arme mais a besoin <span
class="font-bold">d’informations complémentaires</span>
pour vous donner sa catégorie légale.</p>
</div>
</div>
</template>
</div>
</div>
</div>
<div
v-if="isFeedbackDone"
class="text-center mt-2"
>
<div v-if="isFeedbackDone" class="text-center mt-2">
<SnackbarAlert class="text-center" />
</div>
<div
v-if="confidenceLevel !== 'low' && route.name !== 'IdentificationFinalResult'"
:aria-disabled="isFeedbackDone"
class="feedback"
>
<div v-if="confidenceLevel !== 'low' && route.name !== 'IdentificationFinalResult'" :aria-disabled="isFeedbackDone"
class="feedback">
<p class="feedback-text">
Cette typologie vous semble-t-elle correcte ?
</p>
<div class="feedback-thumb">
<label
class="feedback-click"
@click="sendFeedback(true)"
>
<VIcon
v-if="isUp"
name="ri-thumb-up-fill"
class="feedback-click"
/>
<VIcon
v-else
name="ri-thumb-up-line"
class="feedback-click"
/>
<label class="feedback-click" @click="sendFeedback(true)">
<VIcon v-if="isUp" name="ri-thumb-up-fill" class="feedback-click" />
<VIcon v-else name="ri-thumb-up-line" class="feedback-click" />
</label>
<label
class="feedback-click"
@click="sendFeedback(false)"
>
<VIcon
v-if="isDown"
name="ri-thumb-down-fill"
class="feedback-click"
/>
<VIcon
v-else
name="ri-thumb-down-line"
class="feedback-click"
/>
<label class="feedback-click" @click="sendFeedback(false)">
<VIcon v-if="isDown" name="ri-thumb-down-fill" class="feedback-click" />
<VIcon v-else name="ri-thumb-down-line" class="feedback-click" />
</label>
</div>
</div>
Expand Down Expand Up @@ -340,13 +245,6 @@ function sendFeedback (isCorrect: boolean) {
font-weight: initial;
}
.callout-mention {
font-weight: normal;
margin-top: 10px;
font-style: italic;
line-height: 1.3rem;
}
.feedback {
display: flex;
align-items: center;
Expand Down Expand Up @@ -416,8 +314,4 @@ function sendFeedback (isCorrect: boolean) {
color: black;
}
.text-blue {
color: var(--blue-france-sun-113-625);
}
</style>
7 changes: 7 additions & 0 deletions frontend/src/router/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ import { createWebHistory, createRouter, type RouteRecordRaw, type RouteLocation

import { clearLocalStorage } from '@/utils/storage-utils.js'

import MissingCardPage from "@/views/MissingCardPage.vue"

const HomePage = () => import('@/views/HomePage.vue')
const StartPage = () => import('@/views/StartPage.vue')
const InstructionsPage = () => import('@/views/InstructionsPage.vue')
Expand Down Expand Up @@ -37,6 +39,11 @@ const routes: RouteRecordRaw[] = [
wholeLogo: true,
},
},
{
path: '/carte-manquante',
name: 'MissingCard',
component: MissingCardPage,
},
{
path: '/accueil',
name: 'StartPage',
Expand Down
19 changes: 13 additions & 6 deletions frontend/src/utils/firearms-utils/get-next-route-after-result.ts
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,31 @@
import { resultTree } from '@/utils/firearms-utils/index'
import { MEASURED_GUNS_TYPOLOGIES } from '@/utils/firearms-utils/index'

export const getNextRouteAfterResult = ({ securingTutorial, confidenceLevel, typology, gunLength, gunBarrelLength }) => {
const noCardDetected = computed(() => gunLength === undefined || gunBarrelLength === undefined)
const isCardDetected = gunLength !== null && gunBarrelLength !== null
const isMeasuredGun = MEASURED_GUNS_TYPOLOGIES.includes(typology)

const isAbleToWatchTutorial = securingTutorial === true && confidenceLevel !== 'low' && noCardDetected
const isAbleToWatchTutorial = securingTutorial === true && confidenceLevel !== 'low'
if (!isAbleToWatchTutorial) {
return { name: 'IdentificationTypologyResult' }
console.log(isAbleToWatchTutorial)
console.log(isCardDetected)
if (isCardDetected === false && isMeasuredGun === true)
return { name: 'MissingCard' }
else
return { name: 'IdentificationTypologyResult' }
}

const hasNoSecuringOptions = !resultTree[typology].isSecuringOptions && noCardDetected
const hasNoSecuringOptions = !resultTree[typology].isSecuringOptions && !isCardDetected
if (hasNoSecuringOptions) {
return { name: 'SecuringAchievement' }
}

const hasMoreThanOneOptions = resultTree[typology]?.options_step_1 && noCardDetected
const hasMoreThanOneOptions = resultTree[typology]?.options_step_1 && !isCardDetected
if (hasMoreThanOneOptions) {
return { name: 'SecuringSelectOption', params: { step: 1 } }
}

const hasSecuringOptions = resultTree[typology]?.options && noCardDetected
const hasSecuringOptions = resultTree[typology]?.options && !isCardDetected
return {
name: hasSecuringOptions ? 'SecuringSelectOption' : 'SecuringTutorialContent',
...(hasSecuringOptions ? { params: { step: 1 } } : {}),
Expand Down
Loading

0 comments on commit f7835c6

Please sign in to comment.