fix(samgongustofa): Disable "Continue" button when selecting vehicle …

…with error (and user has over 20 vehicles) (#16752)

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

libs/application/templates/transport-authority/transfer-of-vehicle-ownership/src/fields/VehiclesField/index.tsx

@@ -60,9 +60,9 @@ export const VehiclesField: FC<React.PropsWithChildren<FieldBaseProps>> = (
     <Box paddingTop={2}>
       {currentVehicleList.totalRecords > 20 ? (
         <FindVehicleFormField
-          application={application}
           setFieldLoadingState={props.setFieldLoadingState}
           setSubmitButtonDisabled={props.setSubmitButtonDisabled}
+          {...props}
           field={{
             id: 'pickVehicle',
             title: information.labels.pickVehicle.title,

libs/application/ui-fields/src/lib/FindVehicleFormField/FindVehicleFormField.tsx

@@ -197,18 +197,19 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
         | VehicleDetails
         | MachineDetails
         | EnergyFundVehicleDetailsWithGrant = extractDetails(response)
+
       setValues(details)
 
       const isVehicleFound = !!details
       setVehicleNotFound(!isVehicleFound)
-      setSubmitButtonDisabled && setSubmitButtonDisabled(!isVehicleFound)
+      setSubmitButtonDisabled?.(!isVehicleFound)
     } catch (error) {
       console.error('error', error)
       setVehicleNotFound(true)
       setVehicleDetails(null)
       setMachineDetails(null)
       setEnergyDetails(null)
-      setSubmitButtonDisabled && setSubmitButtonDisabled(true)
+      setSubmitButtonDisabled?.(true)
     } finally {
       setIsLoading(false)
     }
@@ -229,27 +230,43 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
     }
   }
   const setVehicleValues = (vehicleDetails: VehicleDetails) => {
+    const vehicleDisabled =
+      additionalErrors &&
+      vehicleDetails &&
+      (!vehicleDetails.isDebtLess ||
+        !!vehicleDetails.validationErrorMessages?.length)
+
+    const permno = vehicleDisabled ? '' : vehicleDetails.permno || ''
+
     setValue('findVehicle', true)
+
     setValue(`${field.id}.type`, vehicleDetails.make)
     setValue(`${field.id}.make`, vehicleDetails.make)
-    setValue(`${field.id}.plate`, plate)
+    setValue(`${field.id}.plate`, permno)
     setValue(`${field.id}.color`, vehicleDetails.color || undefined)
     setValue(`${field.id}.requireMileage`, vehicleDetails.requireMileage)
     setValue(`${field.id}.mileageReading`, vehicleDetails.mileageReading)
+
     setValue('vehicleMileage.requireMileage', vehicleDetails?.requireMileage)
     setValue('vehicleMileage.mileageReading', vehicleDetails?.mileageReading)
-    setValue('vehicleInfo.plate', plate)
-    setValue('vehicleInfo.type', vehicleDetails.make)
+
+    if (permno) setValue('vehicleInfo.plate', permno)
+    if (permno) setValue('vehicleInfo.type', vehicleDetails.make)
+
+    setSubmitButtonDisabled?.(!vehicleDisabled || false)
+
     setVehicleDetails(vehicleDetails)
   }
 
   const setMachineValues = (machineDetails: MachineDetails) => {
+    const machineDisabled = machineDetails.disabled
+
     if (application.typeId === 'StreetRegistration') {
       const mustInspect = mustInspectBeforeStreetRegistration(
         application?.externalData,
         machineDetails.regNumber || '',
       )
-      if (mustInspect && !machineDetails.disabled) {
+      if (mustInspect && !machineDisabled) {
         machineDetails = {
           ...machineDetails,
           disabled: true,
@@ -264,6 +281,7 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
       }
     }
     setValue('findVehicle', true)
+
     setValue(
       `${field.id}.paymentRequiredForOwnerChange`,
       machineDetails.paymentRequiredForOwnerChange,
@@ -275,18 +293,21 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
     setValue(`${field.id}.plate`, machineDetails.plate || '')
     setValue(`${field.id}.ownerNumber`, machineDetails.ownerNumber || '')
     setValue(`${field.id}.id`, machineDetails.id)
-    setValue('pickMachine.id', machineDetails.id)
     setValue(`${field.id}.date`, new Date().toISOString())
-    setValue('pickMachine.isValid', machineDetails.disabled ? undefined : true)
-    setSubmitButtonDisabled &&
-      setSubmitButtonDisabled(!machineDetails.disabled || false)
+
+    setValue('pickMachine.id', machineDetails.id)
+    setValue('pickMachine.isValid', machineDisabled ? undefined : true)
+
+    setSubmitButtonDisabled?.(!machineDisabled || false)
+
     setMachineDetails(machineDetails)
   }
 
   const setEnergyFundsValues = (
     vehicleDetailsWithGrant: EnergyFundVehicleDetailsWithGrant,
   ) => {
     setValue('findVehicle', true)
+
     setValue(`${field.id}.type`, vehicleDetailsWithGrant.make)
     setValue(`${field.id}.plate`, plate)
     setValue(`${field.id}.color`, vehicleDetailsWithGrant.color || undefined)
@@ -304,25 +325,28 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
       `${field.id}.grantItemCode`,
       vehicleDetailsWithGrant.vehicleGrantItemCode,
     )
+
     setEnergyDetails(vehicleDetailsWithGrant)
   }
 
-  const isDisabled =
+  const vehicleDisabled =
     additionalErrors &&
     vehicleDetails &&
     (!vehicleDetails.isDebtLess ||
       !!vehicleDetails.validationErrorMessages?.length)
 
+  const machineDisabled = machineDetails?.disabled
+
   useEffect(() => {
     if (!submitButtonDisabledCalled) {
-      setSubmitButtonDisabled && setSubmitButtonDisabled(true)
+      setSubmitButtonDisabled?.(true)
       setSubmitButtonDisabledCalled(true)
     }
     if (plate.length === 5 || plate.length === 6 || plate.length === 7) {
       setButtonDisabled(false)
     }
-    if (machineDetails && machineDetails.disabled) {
-      setSubmitButtonDisabled && setSubmitButtonDisabled(true)
+    if (vehicleDisabled || machineDisabled) {
+      setSubmitButtonDisabled?.(true)
     }
     setFieldLoadingState?.(isLoading)
   }, [isLoading])
@@ -389,15 +413,15 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
             )}
             {vehicleDetails && !vehicleNotFound && (
               <ActionCard
-                backgroundColor={isDisabled ? 'red' : 'blue'}
+                backgroundColor={vehicleDisabled ? 'red' : 'blue'}
                 heading={vehicleDetails.make || ''}
                 text={`${vehicleDetails.color} - ${vehicleDetails.permno}`}
                 focused={true}
               />
             )}
             {machineDetails && !vehicleNotFound && (
               <ActionCard
-                backgroundColor={machineDetails.disabled ? 'red' : 'blue'}
+                backgroundColor={machineDisabled ? 'red' : 'blue'}
                 heading={machineDetails.regNumber || ''}
                 text={`${machineDetails.type} ${machineDetails.subType}`}
                 focused={true}
@@ -441,7 +465,7 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
                 }}
               />
             )}
-            {vehicleDetails && isDisabled && (
+            {vehicleDetails && vehicleDisabled && (
               <Box marginTop={2}>
                 <AlertMessage
                   type="error"
@@ -497,7 +521,7 @@ export const FindVehicleFormField: FC<React.PropsWithChildren<Props>> = ({
                 />
               </Box>
             )}
-            {machineDetails && machineDetails.disabled && (
+            {machineDetails && machineDisabled && (
               <Box marginTop={2}>
                 <AlertMessage
                   type="error"