Skip to content

Commit 655b9ac

Browse files
desoindxdesoindx
committed
feat: improve declarations page
1 parent 0d386e7 commit 655b9ac

6 files changed

Lines changed: 215 additions & 162 deletions

File tree

‎public/images/document.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎src/components/Upload/Upload.module.css‎

Lines changed: 18 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,35 @@
1-
.container {
1+
.layout {
22
display: flex;
3-
flex-direction: row-reverse;
4-
gap: 1rem 2rem;
3+
gap: 2rem;
4+
align-items: flex-start;
55

66
@media screen and (max-width: 50rem) {
77
flex-direction: column;
88
}
99
}
1010

11-
.upload {
12-
width: 40%;
11+
.aside {
12+
display: flex;
13+
flex-direction: column;
14+
gap: 1.25rem;
15+
min-width: 30rem;
1316

14-
@media screen and (max-width: 50rem) {
15-
width: 100%;
17+
@media screen and (max-width: 62rem) {
18+
min-width: 20rem;
1619
}
17-
}
18-
19-
.help {
20-
width: 60%;
21-
margin: 0;
2220

2321
@media screen and (max-width: 50rem) {
24-
width: 100%;
22+
min-width: unset;
2523
}
2624
}
2725

28-
.helpTitle {
29-
font-weight: bold;
30-
font-size: 1.25rem;
31-
margin-bottom: 1rem;
26+
.tile {
27+
width: 100%;
3228
}
3329

34-
.button {
35-
margin-top: 1rem;
30+
.tileMeta {
31+
display: block;
32+
margin-top: 0.25rem;
33+
color: var(--text-mention-grey);
34+
font-size: 0.875rem;
3635
}

‎src/components/Upload/Upload.tsx‎

Lines changed: 67 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -1,153 +1,78 @@
1-
"use client"
2-
import { Upload as UploadDSFR } from "@codegouvfr/react-dsfr/Upload"
3-
import { useCallback, useState } from "react"
4-
import { useRouter } from "next/navigation"
5-
import LoadingButton from "../Button/LoadingButton"
1+
import { Tile } from "@codegouvfr/react-dsfr/Tile"
2+
import { CallOut } from "@codegouvfr/react-dsfr/CallOut"
63
import styles from "./Upload.module.css"
74
import Link from "next/link"
8-
import { uploadFile } from "../../serverFunctions/upload"
9-
import Alert from "@codegouvfr/react-dsfr/Alert"
5+
import UploadPanel from "./UploadPanel"
106

117
const Upload = () => {
12-
const [file, setFile] = useState<File | null>(null)
13-
const [success, setSuccess] = useState(false)
14-
const [error, setError] = useState("")
15-
const [uploading, setUploading] = useState(false)
16-
17-
const router = useRouter()
18-
const upload = useCallback(() => {
19-
setError("")
20-
setSuccess(false)
21-
setUploading(true)
22-
if (file) {
23-
uploadFile(file).then((error) => {
24-
setUploading(false)
25-
setFile(null)
26-
if (error) {
27-
setError(error)
28-
} else {
29-
setSuccess(true)
30-
}
31-
router.refresh()
32-
})
33-
}
34-
}, [file, router])
35-
36-
const sizeError = file ? file.size > 1 * 1024 * 1024 : false
378
return (
38-
<div className={success || error ? "" : styles.container}>
39-
<Alert
40-
className={success || error ? "" : styles.help}
41-
title='Aide'
42-
severity='info'
43-
description={
44-
<>
45-
<span>Vous souhaitez un modèle ?</span>
46-
<br />
47-
<span>
48-
<span className='fr-icon-arrow-right-s-fill' aria-hidden='true' />{" "}
49-
<Link href='/exemple/exemple.xlsx' className='fr-link' prefetch={false}>
50-
Téléchargez notre template Excel
51-
</Link>
52-
</span>
53-
<br />
54-
<span>
55-
<span className='fr-icon-arrow-right-s-fill' aria-hidden='true' />{" "}
56-
<Link href='/exemple/exemple.csv' className='fr-link' prefetch={false}>
57-
Téléchargez notre template CSV
58-
</Link>
59-
</span>
60-
<br />
61-
<br />
62-
<span>
63-
Comment concevoir un fichier de déclaration pour le portail ?{" "}
64-
<Link href='/documentation' className='fr-link' prefetch={false}>
65-
Consultez l'aide en ligne
66-
</Link>
67-
.
68-
</span>
69-
<br />
70-
<br />
71-
<span>
72-
Si vous voulez faire un test avant de vous lancer, rejoignez{" "}
73-
<Link
74-
href='https://test-affichage-environnemental.ecobalyse.beta.gouv.fr/'
75-
className='fr-link'
76-
target='_blank'
77-
rel='noopener noreferrer'>
78-
le serveur de test
79-
</Link>
80-
.
81-
</span>
82-
<br />
83-
<br />
84-
<span>
85-
Si vous avez besoin d’aide,{" "}
86-
<Link
87-
className='fr-link'
88-
href={`mailto:${process.env.NEXT_PUBLIC_SUPPORT_MAIL}`}
89-
prefetch={false}
90-
target='_blank'
91-
rel='noopener noreferrer'>
92-
vous pouvez contacter le service support.
93-
</Link>
94-
</span>
95-
</>
96-
}
97-
/>
98-
{success || error ? (
99-
<Alert
100-
data-testid={`upload-${success ? "success" : "error"}`}
101-
className='fr-mt-4w'
102-
title={
103-
success
104-
? "Votre fichier a été correctement téléchargé"
105-
: "Une erreur est survenue lors de l'analyse du fichier"
9+
<div className={styles.layout}>
10+
<div>
11+
<h2>Nouvelle déclaration</h2>
12+
<p>
13+
Si vous souhaitez faire un test avant de vous lancer, rejoignez{" "}
14+
<Link
15+
href='https://test-affichage-environnemental.ecobalyse.beta.gouv.fr/'
16+
className='fr-link'
17+
target='_blank'
18+
rel='noopener noreferrer'>
19+
le serveur de test
20+
</Link>{" "}
21+
ou consultez les aides ci-contre.
22+
</p>
23+
<CallOut className='fr-mt-2w'>
24+
<span>
25+
Dans l'hypothèse où vous ne déclarez pas le champ "score", le calcul sera effectué automatiquement
26+
conformément à vos déclarations. Le score calculé demeure sous votre responsabilité.
27+
</span>
28+
<Link href='/documentation' className='fr-link' prefetch={false}>
29+
Consultez la méthode de calcul
30+
</Link>
31+
.
32+
</CallOut>
33+
<UploadPanel />
34+
</div>
35+
<aside className={styles.aside}>
36+
<Tile
37+
className={styles.tile}
38+
orientation='horizontal'
39+
title='Télécharger un modèle Excel'
40+
titleAs='h3'
41+
imageUrl='/images/document.svg'
42+
small
43+
desc={
44+
<>
45+
Le fichier type pour déclarer vos produits
46+
<span className={styles.tileMeta}>.xlsx - 13 Ko</span>
47+
</>
10648
}
107-
severity={success ? "success" : "error"}
108-
description={
109-
success ? (
110-
<>
111-
Le système va maintenant l’analyser pour vérifier qu’il contient l’ensemble des informations
112-
réglementaires au bon format. Cette étape peut prendre quelques minutes en fonction de la taille de
113-
votre CSV. <b>Une fois l’analyse terminée, vous recevrez un mail vous indiquant le résultat</b>. Vous
114-
pouvez fermer cet onglet.
115-
</>
116-
) : (
117-
<>
118-
{error}. Si l'erreur persiste n'hesitez pas à nous envoyer votre fichier par mail, à l'adresse suivante,
119-
pour analyse plus approfondie.
120-
<br />
121-
<Link
122-
className='fr-link'
123-
href={`mailto:${process.env.NEXT_PUBLIC_SUPPORT_MAIL}`}
124-
prefetch={false}
125-
target='_blank'
126-
rel='noopener noreferrer'>
127-
{process.env.NEXT_PUBLIC_SUPPORT_MAIL}
128-
</Link>
129-
</>
130-
)
49+
linkProps={{ href: "/exemple/exemple.xlsx", download: true }}
50+
/>
51+
<Tile
52+
className={styles.tile}
53+
orientation='horizontal'
54+
title='Télécharger un modèle CSV'
55+
titleAs='h3'
56+
imageUrl='/images/document.svg'
57+
small
58+
desc={
59+
<>
60+
Le fichier type pour déclarer vos produits
61+
<span className={styles.tileMeta}>.csv - 2 Ko</span>
62+
</>
13163
}
64+
linkProps={{ href: "/exemple/exemple.csv", download: true }}
65+
/>
66+
<Tile
67+
className={styles.tile}
68+
orientation='horizontal'
69+
title='Comment concevoir un fichier de déclaration pour le portail ?'
70+
titleAs='h3'
71+
small
72+
desc="Consultez l'aide en ligne"
73+
linkProps={{ href: "/notice-reglementaire.pdf", target: "_blank", rel: "noopener noreferrer" }}
13274
/>
133-
) : (
134-
<div className={styles.upload}>
135-
<UploadDSFR
136-
label='Déposez votre fichier pour déclarer vos produits.'
137-
disabled={uploading}
138-
hint='Format CSV ou XLSX, 1mb max'
139-
state={sizeError ? "error" : "default"}
140-
stateRelatedMessage={sizeError ? "Le fichier doit faire moins de 1mb" : ""}
141-
nativeInputProps={{
142-
accept: ".csv, .xlsx",
143-
onChange: (event) => setFile(event.target.files?.[0] || null),
144-
}}
145-
/>
146-
<LoadingButton disabled={!file || sizeError} onClick={upload} loading={uploading} className={styles.button}>
147-
Envoyer mon fichier pour validation
148-
</LoadingButton>
149-
</div>
150-
)}
75+
</aside>
15176
</div>
15277
)
15378
}

‎src/components/Upload/UploadPanel.module.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.uploadCard {
2+
border: 1px solid var(--border-default-grey);
3+
padding: 2rem;
4+
}
5+
6+
.button {
7+
margin-top: 2rem;
8+
}

0 commit comments

Comments
 (0)