feat: add optional photo input for the adhesion form (#110)

Author: GreenGKH

migrations/20260610154707_add_adhesion_photos/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "Adhesion" ADD COLUMN     "photosPaths" TEXT[] DEFAULT ARRAY[]::TEXT[];

prisma/seed.ts

@@ -289,6 +289,12 @@ async function main() {
             category: "Adhésions",
             description: "Télécharger les dossiers d'adhésion"
         },
+        {
+            name: "download:adhesion-folder",
+            title: "Télécharger Dossier",
+            category: "Adhésions",
+            description: "Télécharger les dossiers d'adhésion"
+        },
 
         // Bouge Ta Prison
         {

schema.prisma

@@ -233,6 +233,7 @@ model Adhesion {
   lettreEngagementPath       String?
   reglementInterieurPath     String?
   bilanFinancierPath         String?
+  photosPaths                String[]
   bureau                     Json?
   linkedAssociation          Association?
 }

src/actions/adhesion/downloadFolderAction.tsx

@@ -57,7 +57,8 @@ async function downloadFolderActionImpl(
         adhesion.value.extraitPVPath,
         adhesion.value.lettreEngagementPath,
         adhesion.value.reglementInterieurPath,
-        adhesion.value.bilanFinancierPath
+        adhesion.value.bilanFinancierPath,
+        ...adhesion.value.photosPaths
     ].filter((path): path is string => Boolean(path))
 
     const supabase = await createClient()

src/app/(public)/a-propos/adhesion/form-schema.ts

@@ -14,6 +14,10 @@ export const bureauMemberSchema = type({
     adresse: "string >= 1"
 })
 
+const photosSchema = type(fileSchema({ mimeType: ["image", "pdf"] }))
+    .array()
+    .atMostLength(15)
+
 export const AdhesionFormSchema = type({
     // Basic info
     sigle: "string >= 2",
@@ -51,6 +55,7 @@ export const AdhesionFormSchema = type({
     "lettreEngagement?": fileSchema({ optional: true }),
     "reglementInterieur?": fileSchema({ optional: true }),
     "bilanFinancier?": fileSchema({ optional: true }),
+    "photos?": photosSchema,
 
     // Captcha
     captchaToken: "string >= 1"

src/app/(public)/a-propos/adhesion/form.tsx

@@ -55,6 +55,9 @@ import { processAdhesion } from "./process-adhesion"
 /** Max file size: 2 MB (in bytes) */
 const MAX_FILE_SIZE = 2 * 1024 * 1024
 
+/** Max photo size: 5 MB (in bytes) */
+const MAX_PHOTO_SIZE = 5 * 1024 * 1024
+
 const emptyBureauMember: BureauMember = {
     isAdmin: false,
     poste: "",
@@ -91,6 +94,7 @@ const emptyForm = {
     lettreEngagement: undefined as unknown as File,
     reglementInterieur: undefined as unknown as File,
     bilanFinancier: undefined as unknown as File,
+    photos: [] as File[],
     captchaToken: ""
 }
 
@@ -1380,6 +1384,61 @@ export function AdhesionForm(): React.ReactNode {
                                         )
                                     }}
                                 />
+
+                                <form.Field
+                                    name="photos"
+                                    children={(field) => {
+                                        const isInvalid =
+                                            field.state.meta.isTouched &&
+                                            !field.state.meta.isValid
+                                        return (
+                                            <Field data-invalid={isInvalid}>
+                                                <FieldLabel
+                                                    htmlFor={field.name}
+                                                >
+                                                    Trombinoscope{" "}
+                                                    <span className="text-muted-foreground">
+                                                        (optionnel)
+                                                    </span>
+                                                </FieldLabel>
+                                                <FieldDescription>
+                                                    Ajoutez une photo de votre
+                                                    bureau pour qu'on apprenne à
+                                                    vous reconnaître !<br />
+                                                    Formats acceptés : images
+                                                    (PNG, JPG, WebP, SVG) ou
+                                                    PDF. Jusqu'à 15 fichiers, 5
+                                                    Mo maximum par fichier.
+                                                </FieldDescription>
+                                                <FilePondInput
+                                                    allowMultiple
+                                                    maxFiles={15}
+                                                    maxFileSize={`${MAX_PHOTO_SIZE / (1024 * 1024)}MB`}
+                                                    acceptedFileTypes={[
+                                                        "image/png",
+                                                        "image/jpeg",
+                                                        "image/webp",
+                                                        "image/svg+xml",
+                                                        "application/pdf"
+                                                    ]}
+                                                    onChangeMultiple={(files) =>
+                                                        field.handleChange(
+                                                            files
+                                                        )
+                                                    }
+                                                />
+                                                {isInvalid && (
+                                                    <FieldError
+                                                        errors={
+                                                            field.state.meta
+                                                                .errors
+                                                        }
+                                                    />
+                                                )}
+                                            </Field>
+                                        )
+                                    }}
+                                />
                             </FieldGroup>
                         </FieldSet>
 

src/app/(public)/a-propos/adhesion/process-adhesion.tsx

@@ -23,7 +23,7 @@ const logoExtensionByMime: Record<string, string> = {
     "image/png": "png",
     "image/jpeg": "jpg",
     "image/webp": "webp",
-    "image/svg+xml": "svg"
+    "application/pdf": "pdf"
 }
 
 type Result = { success: true } | { success: false; message: string }
@@ -131,6 +131,37 @@ async function processAdhesionImpl(formData: TAdhesionForm): Promise<Result> {
         }
     }
 
+    const photoUploads = await tryCatch(
+        Promise.all(
+            (data.photos ?? []).map((photo, i) => {
+                const ext = logoExtensionByMime[photo.type]
+                return ext
+                    ? upload(`photo-${i + 1}.${ext}`, photo)
+                    : Promise.resolve(null)
+            })
+        )
+    )
+    if (!photoUploads.success) {
+        captureActionError(photoUploads.error)
+        await cleanup()
+        return {
+            success: false,
+            message:
+                "Échec de l'envoi des fichiers. Veuillez réessayer plus tard."
+        }
+    }
+    if (photoUploads.value.some((path) => !path)) {
+        await cleanup()
+        return {
+            success: false,
+            message:
+                "Échec de l'envoi des fichiers. Veuillez réessayer plus tard."
+        }
+    }
+    const photosPaths = photoUploads.value.filter(
+        (path): path is string => !!path
+    )
+
     const created = await tryCatch(
         prisma.adhesion.create({
             data: {
@@ -158,7 +189,8 @@ async function processAdhesionImpl(formData: TAdhesionForm): Promise<Result> {
                 extraitPVPath,
                 lettreEngagementPath,
                 reglementInterieurPath,
-                bilanFinancierPath
+                bilanFinancierPath,
+                photosPaths
             }
         })
     )

src/test/factories/adhesion.ts

@@ -78,6 +78,7 @@ export function validAdhesionRecord(
         lettreEngagementPath: null,
         reglementInterieurPath: null,
         bilanFinancierPath: null,
+        photosPaths: [],
         bureau: [bureauMember],
         ...overrides
     }