feat(register-new-machine): making location required if category is o…

…f certain type (#17276)

* Making location required if category is of certain type

* making const

---------

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

libs/application/templates/aosh/register-new-machine/src/fields/LocationInputField/index.tsx

@@ -0,0 +1,50 @@
+import { FieldBaseProps } from '@island.is/application/types'
+import { FC, useState } from 'react'
+import { useFormContext } from 'react-hook-form'
+import { coreErrorMessages } from '@island.is/application/core'
+import { AboutMachine } from '../../lib/dataSchema'
+import { Box } from '@island.is/island-ui/core'
+import { InputController } from '@island.is/shared/form-fields'
+import { useLocale } from '@island.is/localization'
+import { machine } from '../../lib/messages'
+
+export const LocationInputField: FC<React.PropsWithChildren<FieldBaseProps>> = (
+  props,
+) => {
+  const { field, setBeforeSubmitCallback } = props
+  const { formatMessage } = useLocale()
+  const { watch } = useFormContext()
+  const [displayError, setDisplayError] = useState<boolean>(false)
+  const watchMachine = watch('machine.aboutMachine') as AboutMachine
+  const location = watch(field.id) as string
+  const categoryValue = 'Fólkslyftur og vörulyftur'
+
+  setBeforeSubmitCallback?.(async () => {
+    if (
+      watchMachine.category?.nameIs === categoryValue &&
+      location.length === 0
+    ) {
+      setDisplayError(true)
+      return [false, '']
+    }
+    return [true, null]
+  })
+
+  return (
+    <Box paddingTop={2}>
+      <InputController
+        id={field.id}
+        label={formatMessage(machine.labels.basicMachineInformation.location)}
+        backgroundColor="blue"
+        required={watchMachine.category?.nameIs === categoryValue}
+        maxLength={255}
+        onChange={() => setDisplayError(false)}
+        error={
+          displayError && location.length === 0
+            ? formatMessage(coreErrorMessages.defaultError)
+            : undefined
+        }
+      />
+    </Box>
+  )
+}

libs/application/templates/aosh/register-new-machine/src/fields/index.ts

@@ -3,3 +3,4 @@ export { Overview } from './Overview'
 export { AboutMachine } from './AboutMachine'
 export { TechnicalInfo } from './TechnicalInfo'
 export { ChangeAnswers } from './ChangeAnswers'
+export { LocationInputField } from './LocationInputField'

libs/application/templates/aosh/register-new-machine/src/forms/RegisterMachineForm/MachineSection/MachineBasicInformation.ts

@@ -122,11 +122,11 @@ export const MachineBasicInformation = buildSubSection({
           titleVariant: 'h5',
           marginTop: 3,
         }),
-        buildTextField({
+        buildCustomField({
           id: 'machine.basicInformation.location',
-          title: machine.labels.basicMachineInformation.location,
+          title: '',
           width: 'half',
-          maxLength: 255,
+          component: 'LocationInputField',
         }),
         buildTextField({
           id: 'machine.basicInformation.cargoFileNumber',

libs/application/templates/aosh/register-new-machine/tsconfig.lib.json

@@ -2,23 +2,22 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "../../../../../dist/out-tsc",
-    "types": [
-      "node",
-
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "types": ["node"]
   },
+  "files": [
+    "../../../../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../../../../node_modules/@nx/react/typings/image.d.ts"
+  ],
   "exclude": [
-    "jest.config.ts",
-    "src/**/*.spec.ts",
-    "src/**/*.test.ts",
-    "src/**/*.spec.tsx",
-    "src/**/*.test.tsx",
-    "src/**/*.spec.js",
-    "src/**/*.test.js",
-    "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx",
+    "jest.config.ts"
   ],
-  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
 }