Form modify distribution agreement

cypress/fixtures/mock_files/file-2.txt

@@ -0,0 +1 @@
+txtaa

cypress/integration/modDistAgreement/modDistAgreement.spec.js

@@ -0,0 +1,104 @@
+/// <reference types="cypress" />
+
+describe('Update distribution agreement form', () => {
+  const filepathJpg = 'mock_files/file-1.jpg'
+  const filepathTxt = 'mock_files/file-2.txt'
+  const jpgFileName = 'file-1.jpg'
+  const txtFileName = 'file-2.txt'
+  const urlTxt = '/form/upload_txt_attachment/1'
+  const urlAttachment = '/form/upload_attachment/0'
+  const modAgreementUrl = '/procedures/distribution_agreement'
+
+  Cypress.on('uncaught:exception', (error, runnable) => {
+    console.error(error)
+    return false
+  })
+
+  beforeEach(() => {
+    cy.visit('/mod-distribution-agreement')
+  })
+
+  describe('Update the distribution agreement', function () {
+    function uploadFile(fileName, url) {
+      cy.intercept('POST', url, {
+        data: { code: 'UPLOAD_OK', file_hash: fileName }
+      }).as('uploadFile')
+
+      cy.wait('@uploadFile').then((interception) => {
+        assert.isNotNull(interception.response.body.data.code, 'UPLOAD_OK')
+      })
+    }
+
+    it('Upload correct files', function () {
+      cy.get('#type9-input-file').attachFile({
+        filePath: filepathJpg
+      })
+
+      uploadFile(jpgFileName, urlAttachment)
+
+      cy.get('#type12-input-file').attachFile({
+        filePath: filepathTxt
+      })
+
+      uploadFile(txtFileName, urlTxt)
+
+      cy.intercept('POST', modAgreementUrl, { data: { statusCode: 200 } })
+      cy.get('#submit-button').click()
+    })
+
+    it('Upload incorrect files', function () {
+      cy.get('#type9-input-file').attachFile({
+        filePath: filepathTxt
+      })
+
+      uploadFile(txtFileName, urlAttachment)
+
+      cy.get('#type12-input-file').attachFile({
+        filePath: filepathJpg
+      })
+
+      uploadFile(jpgFileName, urlTxt)
+
+      cy.intercept('POST', modAgreementUrl, { data: { statusCode: 200 } })
+      cy.get('#submit-button').click()
+      cy.get('#accept-button').click()
+    })
+
+    it('Upload only one file and accept', function () {
+      cy.get('#type9-input-file').attachFile({
+        filePath: filepathJpg
+      })
+
+      uploadFile(jpgFileName, urlAttachment)
+
+      cy.intercept('POST', modAgreementUrl, { data: { statusCode: 200 } })
+      cy.get('#submit-button').click()
+      cy.get('#accept-button').click()
+    })
+
+    it('Upload only one file and decline', function () {
+      cy.get('#type9-input-file').attachFile({
+        filePath: filepathJpg
+      })
+
+      uploadFile(jpgFileName, urlAttachment)
+
+      cy.intercept('POST', modAgreementUrl, { data: { statusCode: 200 } })
+      cy.get('#submit-button').click()
+      cy.get('#decline-button').click()
+
+    })
+
+    it('Upload without files and accept', function () {
+      cy.intercept('POST', modAgreementUrl, { data: { statusCode: 200 } })
+      cy.get('#submit-button').click()
+      cy.get('#accept-button').click()
+    })
+
+    it('Upload without files and decline', function () {
+      cy.intercept('POST', modAgreementUrl, { data: { statusCode: 200 } })
+      cy.get('#submit-button').click()
+      cy.get('#decline-button').click()
+    })
+  })
+})

package.json

@@ -59,6 +59,7 @@
     ]
   },
   "devDependencies": {
+    "axios-mock-adapter": "^1.21.2",
     "cypress": "^9.5.1",
     "cypress-file-upload": "^5.0.8",
     "eslint-plugin-cypress": "^2.12.1",

src/App.js

@@ -66,6 +66,7 @@ const App = (props) => {
   const ModifyContract = lazy(() => import('./containers/ModifyContract'))
   const Tariff = lazy(() => import('./containers/Tariff'))
   const MailSubscriptions = lazy(() => import('./containers/MailSubscriptions'))
+  const ModDistAgreement = lazy(() => import('./containers/ModDistAgreement/ModDistAgreement'))
 
   const loadContractData = () => {
     const contractData =
@@ -323,6 +324,15 @@ const App = (props) => {
                     />
                   }
                 />
+                <Route
+                  exact
+                  path="/mod-distribution-agreement"
+                  element={<ModDistAgreement {...props} />}
+                />
+                 <Route
+                  path="/:language/mod-distribution-agreement/"
+                  element={<ModDistAgreement {...props} />}
+                />
               </Routes>
             </Router>
           </Suspense>

src/components/TermsDialog.js

@@ -31,10 +31,10 @@ const TermsDialog = (props) => {
           </DialogContentText>
         </DialogContent>
         <DialogActions>
-          <Button data-cy="decline" onClick={onClose}>
+          <Button data-cy="decline" id={'decline-button'} onClick={onClose}>
             {t('I_DECLINE')}
           </Button>
-          <Button data-cy="accept" onClick={onAccept} variant="contained" color="primary">
+          <Button data-cy="accept" id={'accept-button'} onClick={onAccept} variant="contained" color="primary">
             {t('I_ACCEPT')}
           </Button>
         </DialogActions>

src/components/Uploader.js

@@ -32,42 +32,66 @@ const useStyles = makeStyles((theme) => ({
   }
 }))
 
+/**
+ * testingCustomError : Variable to force the error for testing (not delete)
+ *
+ */
+
 const Uploader = (props) => {
-  const { name, callbackFn, fieldError, values, maxFiles } = props
+  const {
+    id,
+    name,
+    callbackFn,
+    fieldError,
+    values,
+    maxFiles,
+    validationFileFunction,
+    testingCustomError
+  } = props
+
   const { t } = useTranslation()
   const classes = useStyles()
 
+  const validTypeFiles = props.validTypeFiles || 'INSTALL_TYPE_ATTACHMENTS_INFO'
   const [uploads, setUploads] = useState([...values])
   const [inputKey, setInputKey] = useState(Date.now())
   const [isUploading, setUploading] = useState(false)
-  const [error, setError] = useState(false)
+  const [error, setError] = useState(testingCustomError || false)
 
   useEffect(() => {
     callbackFn(uploads)
   }, [uploads])
 
   const upload = useCallback(
     async (name, file) => {
-      return uploadFile(name, file)
-        .then((response) => {
-          if (response?.data?.code === 'UPLOAD_OK') {
-            setUploads([...uploads, response?.data?.file_hash])
-            setInputKey(Date.now())
-          } else {
-            const errorMsg = response?.data?.code
-              ? response?.data?.code
+      let validation = validationFileFunction
+        ? validationFileFunction(file.name)
+        : null
+      if (!validation || validation.result) {
+        setError('')
+        return uploadFile(name, file, props.uploadUrl)
+          .then((response) => {
+            if (response?.data?.code === 'UPLOAD_OK') {
+              setUploads([...uploads, response?.data?.file_hash])
+              setInputKey(Date.now())
+            } else {
+              const errorMsg = response?.data?.code
+                ? response?.data?.code
+                : 'MODIFY_POTTAR_UNEXPECTED'
+              setError(errorMsg)
+            }
+          })
+          .catch((error) => {
+            const errorMsg = error?.response?.data?.code
+              ? error.response.data.code
               : 'MODIFY_POTTAR_UNEXPECTED'
             setError(errorMsg)
-          }
-        })
-        .catch((error) => {
-          const errorMsg = error?.response?.data?.code
-            ? error.response.data.code
-            : 'MODIFY_POTTAR_UNEXPECTED'
-          setError(errorMsg)
-        })
+          })
+      } else {
+        setError(validation.msg)
+      }
     },
-    [uploads]
+    [uploads, props.uploadUrl]
   )
 
   const handleChange = useCallback(
@@ -99,6 +123,7 @@ const Uploader = (props) => {
   return (
     <>
       <TextField
+        id={id}
         key={inputKey}
         type="file"
         label=""
@@ -113,9 +138,9 @@ const Uploader = (props) => {
           endAdornment: (
             <InputAdornment position="end">
               {isUploading ? (
-                <CircularProgress size={24} />
+                <CircularProgress id={'uploader-circular-progress'} size={24} />
               ) : error ? (
-                <IconButton onClick={handleClean}>
+                <IconButton id={'clean-icon'} onClick={handleClean}>
                   <HighlightOffIcon />
                 </IconButton>
               ) : (
@@ -126,11 +151,7 @@ const Uploader = (props) => {
         }}
         error={(error || fieldError) && true}
         helperText={
-          error
-            ? t(error)
-            : fieldError
-            ? t(fieldError)
-            : t('INSTALL_TYPE_ATTACHMENTS_INFO')
+          error ? t(error) : fieldError ? t(fieldError) : t(validTypeFiles)
         }
       />
       <List>
@@ -142,6 +163,7 @@ const Uploader = (props) => {
             <ListItemText>{upload}</ListItemText>
             <ListItemSecondaryAction>
               <IconButton
+                id={'delete-icon' + index}
                 edge="end"
                 aria-label="delete"
                 onClick={(event) => handleDelete(event, index)}>

src/containers/Home.js

@@ -62,6 +62,7 @@ const options = [
   { title: 'Contractació 20', href: `${language}/contract-20` },
   { title: 'Contractació 30', href: '/contract-30' },
   { title: 'Modificació contractual', href: '/modify-contract' },
+  { title: 'Modificació acord de repartiment', href: '/mod-distribution-agreement' },
 ]
 
 const Home = (props) => {

src/containers/ModDistAgreement/ModDistAgreement.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLocation, useParams } from 'react-router-dom'
+import { distribution_agreement } from '../../services/api'
+import ModDistAgreementData from './ModDistAgreementData'
+
+const ModDistAgreement = (props) => {
+  const { i18n } = useTranslation()
+  const { state } = useLocation()
+  const { language } = useParams()
+
+  const templateProps = JSON.parse(props.d1)
+  const [type9Attachment, setType9Attachment] = useState([])
+  const [type12Attachment, setType12Attachment] = useState([])
+  const [error, setError] = useState('')
+  const [completed, setCompleted] = useState(false)
+  const [isSendingData, setSendingData] = useState(false)
+  const [isDialogOpen, setDialogOpen] = useState(false)
+
+  const [data] = useState(state?.d1CaseData || templateProps)
+
+  const handleSubmit = async () => {
+    setSendingData(true)
+    await distribution_agreement(
+      {
+        ...data,
+        rich_attachments: [...type9Attachment, ...type12Attachment]
+      },
+      data.token
+    )
+      .then(() => {
+        setCompleted(true)
+        setSendingData(false)
+      })
+      .catch(() => {
+        setSendingData(false)
+        setError('UPDATE_DIST_AGREEMENT_ERROR')
+      })
+  }
+
+  const updateAttachment = (values, type) => {
+    type === '09'
+      ? setType9Attachment(values.map((el) => ({ type: type, data: el })))
+      : setType12Attachment(values.map((el) => ({ type: type, data: el })))
+  }
+
+  useEffect(() => {
+    i18n.changeLanguage(language)
+  }, [language, i18n])
+
+
+  const handleSubmitButton = () => {
+    if ([...type9Attachment, ...type12Attachment].length < 2) {
+      setDialogOpen(true)
+    } else {
+      handleSubmit()
+    }
+  }
+
+  return (
+    <ModDistAgreementData
+      isDialogOpen={isDialogOpen}
+      setDialogOpen={setDialogOpen}
+      type9Attachment={type9Attachment}
+      type12Attachment={type12Attachment}
+      error={error}
+      isSendingData={isSendingData}
+      completed={completed}
+      data={data}
+      updateAttachment={updateAttachment}
+      handleSubmitButton={handleSubmitButton}
+      handleSubmit={handleSubmit}
+    />
+  )
+}
+
+export default React.memo(ModDistAgreement)