feat(Skilavottord): Handle number plates and information about pre-deregistered vehicles

apps/skilavottord/web/components/CarDetailsBox/CarDetailsBox.tsx

@@ -2,36 +2,19 @@ import { Box, Stack, Text } from '@island.is/island-ui/core'
 import { OutlinedBox } from '@island.is/skilavottord-web/components'
 import React, { FC } from 'react'
 
-import { useI18n } from '@island.is/skilavottord-web/i18n'
-
-import { InputController } from '@island.is/shared/form-fields'
-import { Control, FieldValues } from 'react-hook-form'
-
 interface BoxProps {
   vehicleId: string
   vehicleType: string
   modelYear: string
   vehicleOwner?: string | null
-  mileage?: number
-  control?: Control<FieldValues>
-  showMileage?: boolean
 }
 
 export const CarDetailsBox: FC<React.PropsWithChildren<BoxProps>> = ({
   vehicleId,
   vehicleType,
   modelYear,
   vehicleOwner,
-  mileage,
-  control,
-  showMileage,
 }) => {
-  const {
-    t: {
-      deregisterVehicle: { deregister: t },
-    },
-  } = useI18n()
-
   return (
     <OutlinedBox>
       <Box
@@ -43,23 +26,9 @@ export const CarDetailsBox: FC<React.PropsWithChildren<BoxProps>> = ({
       >
         <Stack space={1}>
           <Text variant="h3">{vehicleId}</Text>
-          {showMileage && <Text variant="h5">{mileage} km</Text>}
           <Text>{`${vehicleType}, ${modelYear}`}</Text>
         </Stack>
         <Text variant="h5">{vehicleOwner}</Text>
-
-        {showMileage && (
-          <Box>
-            <InputController
-              id="mileage"
-              control={control}
-              label={t.currentMileage}
-              name="mileage"
-              type="number"
-              defaultValue={mileage?.toString()}
-            />
-          </Box>
-        )}
       </Box>
     </OutlinedBox>
   )

apps/skilavottord/web/components/CarDetailsBox2/CarDetailsBox2.tsx

@@ -0,0 +1,181 @@
+import {
+  AlertMessage,
+  Box,
+  Checkbox,
+  GridColumn,
+  GridContainer,
+  GridRow,
+  Stack,
+  Text,
+} from '@island.is/island-ui/core'
+import React, { FC, useState } from 'react'
+
+import { useI18n } from '@island.is/skilavottord-web/i18n'
+
+import {
+  InputController,
+  SelectController,
+} from '@island.is/shared/form-fields'
+
+import {
+  OutInUsage,
+  PlateInfo,
+  UseStatus,
+} from '@island.is/skilavottord-web/utils/consts'
+import { Controller } from 'react-hook-form'
+
+interface BoxProps {
+  vehicleId: string
+  vehicleType: string
+  modelYear: string
+  mileage?: number
+  vehicleOwner?: string | null
+  vinNumber?: string
+  outInStatus: number
+  useStatus: string
+}
+
+export const CarDetailsBox2: FC<React.PropsWithChildren<BoxProps>> = ({
+  vehicleId,
+  vehicleType,
+  modelYear,
+  vehicleOwner,
+  vinNumber,
+  mileage,
+  outInStatus,
+  useStatus,
+}) => {
+  const {
+    t: {
+      deregisterVehicle: { deregister: t },
+    },
+  } = useI18n()
+
+  const [missingPlates, setMissingPlates] = useState(false)
+  const [lostPlate, setLostPlate] = useState(false)
+
+  return (
+    <GridContainer>
+      <Stack space={3}>
+        <GridRow>
+          <GridColumn span={['12/12', '12/12', '12/12', '6/12']}>
+            <Box
+              display="flex"
+              justifyContent="spaceBetween"
+              alignItems="center"
+            >
+              <Stack space={1}>
+                <Text variant="h3">{vehicleId}</Text>
+                <Text variant="h5">{mileage} km</Text>
+                <Text>{`${vehicleType}, ${modelYear}`}</Text>
+                {vinNumber && <Text variant="small">VIN: {vinNumber}</Text>}
+                <Text>{vehicleOwner}</Text>
+              </Stack>
+            </Box>
+          </GridColumn>
+          <GridColumn
+            span={['12/12', '12/12', '12/12', '6/12']}
+            paddingTop={[3, 3, 3, 2]}
+          >
+            <InputController
+              id="mileage"
+              label={t.currentMileage}
+              name="mileage"
+              type="number"
+              defaultValue={mileage?.toString()}
+            />
+          </GridColumn>
+        </GridRow>
+        <GridRow>
+          <GridColumn span="12/12" paddingTop={[3, 3, 3, 3]}>
+            <Text variant="h5">{t.numberplate.sectionTitle}</Text>
+          </GridColumn>
+        </GridRow>
+
+        {outInStatus === OutInUsage.OUT && (
+          <GridRow>
+            <GridColumn span="12/12">
+              {useStatus !== UseStatus.OUT_TICKET && (
+                <AlertMessage
+                  type="info"
+                  title={t.numberplate.alert.info.title}
+                  message={t.numberplate.alert.info.message}
+                />
+              )}
+              {useStatus === UseStatus.OUT_TICKET && (
+                <AlertMessage
+                  type="warning"
+                  title={t.numberplate.alert.warning.title}
+                  message={t.numberplate.alert.warning.message}
+                />
+              )}
+            </GridColumn>
+          </GridRow>
+        )}
+
+        {(outInStatus === OutInUsage.IN ||
+          (outInStatus === OutInUsage.OUT &&
+            useStatus === UseStatus.OUT_TICKET)) && (
+          <GridRow>
+            <GridColumn span="12/12">
+              <SelectController
+                label={t.numberplate.count}
+                id="plateCount"
+                name="plateCount"
+                options={[
+                  { label: '0', value: 0 },
+                  { label: '1', value: 1 },
+                  { label: '2', value: 2 },
+                ]}
+                onSelect={(option) => {
+                  if (option?.value === 2) {
+                    setMissingPlates(false)
+                    setLostPlate(false)
+                  } else {
+                    setMissingPlates(true)
+                  }
+                }}
+                defaultValue={2}
+              />
+            </GridColumn>
+          </GridRow>
+        )}
+        {missingPlates && (
+          <GridRow>
+            <GridColumn span="12/12">
+              <Controller
+                name="plateLost"
+                render={({ field: { onChange, value, name } }) => {
+                  return (
+                    <Checkbox
+                      large
+                      name={name}
+                      label={t.numberplate.lost}
+                      onChange={() => {
+                        if (!lostPlate) {
+                          onChange(PlateInfo.PLATE_LOST)
+                        } else {
+                          onChange()
+                        }
+
+                        setLostPlate(!lostPlate)
+                      }}
+                    />
+                  )
+                }}
+              />
+            </GridColumn>
+          </GridRow>
+        )}
+
+        {lostPlate && (
+          <GridRow>
+            <GridColumn span="12/12">
+              <AlertMessage type="info" message={t.numberplate.missingInfo} />
+            </GridColumn>
+          </GridRow>
+        )}
+      </Stack>
+    </GridContainer>
+  )
+}

apps/skilavottord/web/components/CarDetailsBox2/index.ts

@@ -0,0 +1 @@
+export * from './CarDetailsBox2'

apps/skilavottord/web/components/InlineError/InlineError.tsx

@@ -4,7 +4,7 @@ import { Box, Button, Icon, Stack, Text } from '@island.is/island-ui/core'
 export interface InlineErrorProps {
   title: string
   message: string
-  primaryButton: Button
+  primaryButton?: Button
   secondaryButton?: Button
 }
 
@@ -40,12 +40,14 @@ export const InlineError: FC<React.PropsWithChildren<InlineErrorProps>> = ({
             {secondaryButton.text}
           </Button>
         )}
-        <Button
-          variant={secondaryButton ? 'primary' : 'ghost'}
-          onClick={primaryButton.action}
-        >
-          {primaryButton.text}
-        </Button>
+        {primaryButton && (
+          <Button
+            variant={secondaryButton ? 'primary' : 'ghost'}
+            onClick={primaryButton.action}
+          >
+            {primaryButton.text}
+          </Button>
+        )}
       </Stack>
     </Box>
   )

apps/skilavottord/web/components/index.ts

@@ -13,6 +13,7 @@ export * from './Sidenav/Sidenav'
 export * from './GDPR'
 export * from './Modal/Modal'
 export * from './CarDetailsBox/CarDetailsBox'
+export * from './CarDetailsBox2/CarDetailsBox2'
 export * from './LinkProvider/LinkProvider'
 export * from './Layouts/AppLayout'
 export * from './Layouts/PageLayout'

apps/skilavottord/web/i18n/locales/en.json

@@ -329,7 +329,23 @@
         "primaryButton": "Try again",
         "secondaryButton": "Cancel"
       },
-      "currentMileage": "Current mileage"
+      "currentMileage": "Current mileage",
+      "numberplate": {
+        "sectionTitle": "Number plates information",
+        "alert": {
+          "info": {
+            "title": "The vehicle is registered out of use at the Icelandic Transport Authority.",
+            "message": "The number plates are deposited at the Icelandic Transport Authority"
+          },
+          "warning": {
+            "title": "The vehicle is registered out of use with a sticker at the Icelandic Transport Authority.",
+            "message": "The number plates must accompany the vehicle"
+          }
+        },
+        "count": "Number of license plates returned with the vehicle",
+        "lost": "Number plates are missing",
+        "missingInfo": "If the number plates are found, they must be returned to the Icelandic Transport Authority"
+      }
     }
   },
   "recyclingFundOverview": {

apps/skilavottord/web/i18n/locales/is.json

@@ -329,7 +329,23 @@
         "primaryButton": "Reyna aftur",
         "secondaryButton": "Hætta við"
       },
-      "currentMileage": "Núverandi kílómetrastaða"
+      "currentMileage": "Núverandi kílómetrastaða",
+      "numberplate": {
+        "sectionTitle": "Upplýsingar um númeraplötur",
+        "alert": {
+          "info": {
+            "title": "Ökutækið er skráð úr umferð hjá Samgöngustofu",
+            "message": "Númeraplöturnar eru innlagðar hjá Samgöngustofu"
+          },
+          "warning": {
+            "title": "Ökutækið er skráð úr umferð (miði) hjá Samgöngustofu",
+            "message": "Númeraplöturnar eiga að fylgja ökutækinu"
+          }
+        },
+        "count": "Fjöldi númeraplatna skilað með ökutækinu",
+        "lost": "Númeraplötur eru týndar",
+        "missingInfo": "Ef að númeraplöturnar finnast skal skila þeim til Samgöngustofu"
+      }
     }
   },
   "recyclingFundOverview": {

apps/skilavottord/web/i18n/locales/translation.d.ts

@@ -273,6 +273,24 @@ export interface Deregister {
   success: string
   error: CompletedError
   currentMileage: string
+  numberplate: NumberPlate
+}
+
+export interface NumberPlate {
+  sectionTitle: string
+  alert: DeregisteredMessages
+  count: string
+  lost: string
+  missingInfo: string
+}
+
+export interface DeregisteredMessages {
+  info: Message
+  warning: Message
+}
+export interface Message {
+  title: string
+  message: string
 }
 
 export interface DeregisterButtons {