fix(financial-aid): revert back to previous version of file uploads (#…

…16825) (#16997)

* fix: revert back to previous version of filelist

* fix: adjust stateMachine

* fix: statemachine

* fix: add console.log to trace on feature-deploy

* Fix: revert back to the custom components

* fix: remove console.log

* fix: revert in the submitted forms

* fix: remove commented code and add environment check for easier testing

* fix: add back in a zod check

* fix: add return

---------

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

libs/application/templates/financial-aid/src/fields/Summary/FileList.tsx

@@ -1,31 +1,42 @@
 import React from 'react'
+import { useIntl } from 'react-intl'
+import cn from 'classnames'
 import { Text, Box, UploadFile } from '@island.is/island-ui/core'
-import { getFileType } from '@island.is/financial-aid/shared/lib'
+import {
+  getFileSizeInKilo,
+  getFileType,
+} from '@island.is/financial-aid/shared/lib'
 import { useFileUpload } from '../../lib/hooks/useFileUpload'
-import cn from 'classnames'
-
+import { missingFiles } from '../../lib/messages'
 import * as styles from './FileList.css'
 
-type Props = {
+interface Props {
   applicationSystemId: string
   files?: UploadFile[]
 }
 
-const FileList = ({ files }: Props) => {
+const FileList = ({ files, applicationSystemId }: Props) => {
+  const { formatMessage } = useIntl()
+  const { openFileById } = useFileUpload(files ?? [], applicationSystemId)
+
   if (files === undefined || files.length === 0) {
     return null
   }
 
   return (
     <Box marginBottom={2}>
       {files.map((file, i) => {
-        return file.key ? (
-          <div
+        return file.id ? (
+          <button
             className={cn({
               [`${styles.filesLink}`]: true,
               [styles.hoverState]: file.id,
             })}
             key={'file-' + i}
+            onClick={(e) => {
+              e.preventDefault()
+              openFileById(file.id as string)
+            }}
           >
             <div className={styles.container}>
               <div className={styles.type}>
@@ -36,12 +47,14 @@ const FileList = ({ files }: Props) => {
               <div className={styles.name}>
                 <Text variant="small">{file.name}</Text>
               </div>
+              <Text variant="small">{`${formatMessage(
+                missingFiles.confirmation.file,
+              )} • ${getFileSizeInKilo(file)} KB`}</Text>
             </div>
-          </div>
+          </button>
         ) : null
       })}
     </Box>
   )
 }
-
 export default FileList

libs/application/templates/financial-aid/src/fields/childrenFilesForm/ChildrenFilesForm.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { useIntl } from 'react-intl'
+import { Text, UploadFile } from '@island.is/island-ui/core'
+import { childrenFilesForm } from '../../lib/messages'
+import { UploadFileType } from '../..'
+import Files from '../files/Files'
+import { FieldBaseProps } from '@island.is/application/types'
+
+export const ChildrenFilesForm = ({ field, application }: FieldBaseProps) => {
+  const { formatMessage } = useIntl()
+  const { id, answers } = application
+
+  return (
+    <>
+      <Text marginTop={2} marginBottom={[3, 3, 5]}>
+        {formatMessage(childrenFilesForm.general.description)}
+      </Text>
+      <Files
+        fileKey={field.id as UploadFileType}
+        uploadFiles={answers[field.id] as unknown as UploadFile[]}
+        folderId={id}
+      />
+    </>
+  )
+}

libs/application/templates/financial-aid/src/fields/fileUploadController/FileUploadControler.tsx

@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react'
+import { useIntl } from 'react-intl'
+import { Text, Box, GridRow, GridColumn } from '@island.is/island-ui/core'
+import { filesText } from '../../lib/messages'
+import cn from 'classnames'
+import * as styles from './FileUploadController.css'
+interface Props {
+  children: ReactNode
+  hasError?: boolean
+}
+
+const FileUploadContainer = ({ children, hasError = false }: Props) => {
+  const { formatMessage } = useIntl()
+
+  return (
+    <GridRow marginBottom={3}>
+      <GridColumn
+        span={['12/12', '12/12', '12/12', '9/12']}
+        offset={['0', '0', '0', '1/12']}
+      >
+        <Box marginBottom={[1, 1, 2]}>{children}</Box>
+        <div
+          className={cn(styles.errorMessage, {
+            [`${styles.showErrorMessage}`]: hasError,
+          })}
+        >
+          <Text color="red600" fontWeight="semiBold" variant="small">
+            {formatMessage(filesText.errorMessage)}
+          </Text>
+        </div>
+      </GridColumn>
+    </GridRow>
+  )
+}
+
+export default FileUploadContainer

libs/application/templates/financial-aid/src/fields/fileUploadController/FileUploadController.css.ts

@@ -0,0 +1,11 @@
+import { style } from '@vanilla-extract/css'
+import { theme } from '@island.is/island-ui/theme'
+
+export const errorMessage = style({
+  overflow: 'hidden',
+  maxHeight: '0',
+  transition: 'max-height 250ms ease',
+})
+export const showErrorMessage = style({
+  maxHeight: theme.spacing[5],
+})

libs/application/templates/financial-aid/src/fields/files/Files.tsx

@@ -0,0 +1,71 @@
+import React, { useEffect } from 'react'
+import { InputFileUpload, UploadFile } from '@island.is/island-ui/core'
+
+import { useIntl } from 'react-intl'
+import { filesText } from '../../lib/messages'
+import { UploadFileType } from '../../lib/types'
+import { useFormContext } from 'react-hook-form'
+import { useFileUpload } from '../../lib/hooks/useFileUpload'
+import { FILE_SIZE_LIMIT, UPLOAD_ACCEPT } from '../../lib/constants'
+import FileUploadContainer from '../fileUploadController/FileUploadControler'
+
+interface Props {
+  uploadFiles: UploadFile[]
+  fileKey: UploadFileType
+  folderId: string
+  hasError?: boolean
+}
+
+const Files = ({ uploadFiles, fileKey, folderId, hasError = false }: Props) => {
+  const { formatMessage } = useIntl()
+  const { setValue } = useFormContext()
+
+  const {
+    files,
+    uploadErrorMessage,
+    onChange,
+    onRemove,
+    onRetry,
+    onUploadRejection,
+  } = useFileUpload(uploadFiles, folderId)
+
+  const fileToObject = (file: UploadFile) => {
+    return {
+      key: file.key,
+      name: file.name,
+      size: file.size,
+      status: file.status,
+      percent: file?.percent,
+    }
+  }
+
+  useEffect(() => {
+    const formFiles = files
+      .filter((f) => f.status === 'done')
+      .map((f) => {
+        return fileToObject(f)
+      })
+    setValue(fileKey, formFiles)
+  }, [files])
+
+  return (
+    <FileUploadContainer hasError={hasError}>
+      <InputFileUpload
+        fileList={files}
+        header={formatMessage(filesText.header)}
+        description={formatMessage(filesText.description)}
+        buttonLabel={formatMessage(filesText.buttonLabel)}
+        showFileSize={true}
+        errorMessage={uploadErrorMessage}
+        onChange={onChange}
+        onRemove={onRemove}
+        onRetry={onRetry}
+        onUploadRejection={onUploadRejection}
+        maxSize={FILE_SIZE_LIMIT}
+        accept={UPLOAD_ACCEPT}
+      />
+    </FileUploadContainer>
+  )
+}
+
+export default Files

libs/application/templates/financial-aid/src/fields/incomeFilesForm/IncomeFilesForm.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { useIntl } from 'react-intl'
+import { Text, UploadFile } from '@island.is/island-ui/core'
+import { incomeFilesForm } from '../../lib/messages'
+import { UploadFileType } from '../..'
+import { FieldBaseProps } from '@island.is/application/types'
+import { getValueViaPath } from '@island.is/application/core'
+import Files from '../files/Files'
+
+export const IncomeFilesForm = ({ field, application }: FieldBaseProps) => {
+  const { formatMessage } = useIntl()
+  const { id, answers, externalData } = application
+  const success = getValueViaPath<string>(
+    externalData,
+    'taxData.data.municipalitiesDirectTaxPayments.success',
+  )
+  return (
+    <>
+      <Text marginTop={2} marginBottom={[3, 3, 5]}>
+        {formatMessage(
+          success
+            ? incomeFilesForm.general.descriptionTaxSuccess
+            : incomeFilesForm.general.description,
+        )}
+      </Text>
+      <Files
+        fileKey={field.id as UploadFileType}
+        uploadFiles={answers[field.id] as unknown as UploadFile[]}
+        folderId={id}
+      />
+    </>
+  )
+}

libs/application/templates/financial-aid/src/fields/index.ts

@@ -5,3 +5,7 @@ export { SpouseSummaryForm } from './Summary/SpouseSummaryForm'
 export { ApplicantStatus } from './Status/ApplicantStatus'
 export { SpouseStatus } from './Status/SpouseStatus'
 export { MissingFilesConfirmation } from './Summary/MissingFilesConfirmation'
+export { ChildrenFilesForm } from './childrenFilesForm/ChildrenFilesForm'
+export { IncomeFilesForm } from './incomeFilesForm/IncomeFilesForm'
+export { TaxReturnFilesForm } from './taxReturnFilesForm/TaxReturnFilesForm'
+export { MissingFiles } from './missingFiles/MissingFiles'