chore: heygermany customer project

apps/website/components/jobs/form/ProfessionalExperience.tsx

@@ -0,0 +1,58 @@
+'use client'
+
+import React from 'react'
+import { Controller, useFormContext } from 'react-hook-form'
+import type { DB } from '@heygermany/sdk'
+import { ApplicationCandidateData, ApplicationCandidateWorkExperience, CandidateDocumentTypes } from '@heygermany/sdk'
+import { FileUpload } from '../../ui/FileUpload'
+import { useUploadCandidateFiles } from '@/hooks/useUploadCandidateFiles'
+import { CandidateSection } from './CandidateSection'
+import { Box, Text } from '@pikku/mantine/core'
+import { useI18n } from '@/context/i18n-provider'
+import { asI18n } from '@pikku/react'
+
+export const ProfessionalExperience: React.FunctionComponent<{ candidate: ApplicationCandidateData }> = ({ candidate }) => {
+  const t = useI18n()
+  const { control, trigger, formState: { errors } } = useFormContext<ApplicationCandidateWorkExperience>()
+  const { uploadFiles, deleteFile } = useUploadCandidateFiles(candidate.candidateId, CandidateDocumentTypes.WORK_EXPERIENCE, trigger)
+
+  const validateWorkExperience = (files: any[]): boolean | string => {
+    if (files && files.length > 5) {
+      return t('jobs.professionalexperience.validation.maxfiles')
+    }
+    return true
+  }
+
+  return (
+    <CandidateSection
+      title={t('jobs.professionalexperience.title')}
+      example={t('jobs.professionalexperience.example')}
+      description={t('jobs.professionalexperience.description')}
+    >
+      <Box>
+        <Controller
+          name="workExperience"
+          control={control}
+          rules={{
+            validate: () => validateWorkExperience(candidate.workExperience)
+          }}
+          render={() => (
+            <Box mt="xs">
+              <FileUpload
+                files={candidate.workExperience.map((file: DB.CandidateDocument) => ({ id: file.documentId, fileName: file.fileName }))}
+                uploadFiles={uploadFiles}
+                deleteFile={deleteFile}
+              />
+            </Box>
+          )}
+        />
+
+        {errors.workExperience && (
+          <Text size="sm" c="dimmed" mt="xs">
+            {asI18n(errors.workExperience?.message ?? '')}
+          </Text>
+        )}
+      </Box>
+    </CandidateSection>
+  )
+}