Initial attempt to extract vin-capture business logic

src/common-components/textbox-question/textbox-question.vue

@@ -37,17 +37,17 @@
                 @focus="$emit('focus', $event.target.value)" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
             <template v-if="!isDisabled">
-                <label class="camera-icon-input" v-show="includeCameraIcon && !isLoading">
+                <label class="camera-icon-input" v-show="includeCameraIcon && !isImageLoading">
                     <input
                         type="file"
                         id="vin-input"
                         accept="image/jpeg,image/png"
                         aria-label="Camera icon/button"
                         data-test="image-upload"
-                        @change="submitImage" />
+                        @change="imageChanged" />
                 </label>
                 <loader
-                    v-show="includeCameraIcon && isLoading"
+                    v-show="includeCameraIcon && isImageLoading"
                     loaderColor="blue"
                     class="loading-icon"></loader>
             </template>
@@ -93,12 +93,12 @@ export default {
         cornerStyle: String, // Rounded or square. Square is default.
         includeSearchIcon: Boolean,
         includeCameraIcon: Boolean,
+        isImageLoading: Boolean,
     },
     setup(props) {
         const propsClone = Object.assign({}, props);
         const modelValue = propsClone.modelValue;
         let initialValue;
-        let isLoading = ref(false);
 
         switch (typeof modelValue) {
             case "number":
@@ -128,29 +128,11 @@ export default {
             validate,
             meta,
             errors,
-            isLoading,
         };
     },
     methods: {
-        async submitImage(e) {
+        imageChanged(e) {
-            this.isLoading = true;
+            this.$emit("fileChanged", e.target.files[0]);
-            await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, e.target.files[0])
-                .then(async (response) => {
-                    if (response.data.length > 0) {
-                        this.value = response.data[0];
-
-                        // Wait for DOM to update before firing change event to handle validation.
-                        await this.$nextTick();
-
-                        document.getElementById(this.inputId).dispatchEvent(new Event("change"));
-                    } else {
-                        this.$emit("imageLookupError");
-                    }
-                })
-                .catch((error) => {
-                    this.$emit("imageLookupError");
-                });
-            this.isLoading = false;
             e.target.value = null;
         },
     },

src/layouts/vin-lookup/vin-lookup.vue

@@ -20,9 +20,11 @@
                             :isDisabled="vinPopulatedOnPageLoad"
                             maxLength="17"
                             includeCameraIcon
+                            @file-changed="submitImage"
                             :mask="vinMask"
-                            @image-lookup-error="displayVinScanAlert"
+                            :isImageLoading="isVinLoading"
-                            data-test="vin-lookup-field" />
+                            data-test="vin-lookup-field"
+                            ref="vinLookupQuestion" />
                     </div>
                 </div>
                 <div class="row">
@@ -199,6 +201,7 @@ export default {
             displayVinNotFoundAlert: false,
             displayMatchedDifferentVehicleAlert: false,
             displayVinScanFailedAlert: false,
+            isVinLoading: false,
         };
     },
     methods: {
@@ -395,6 +398,27 @@ export default {
         displayVinScanAlert() {
             this.displayVinScanFailedAlert = true;
         },
+        async submitImage(e) {
+            this.isVinLoading = true;
+            await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, e)
+                .then(async (response) => {
+                    if (response.data.length > 0) {
+                        const result = response.data[0];
+
+                        this.vin = result;
+
+                        this.$refs.vinLookupQuestion.handleChange(result);
+
+                        this.resetAlerts();
+                    } else {
+                        this.displayVinScanAlert();
+                    }
+                })
+                .catch((error) => {
+                    this.displayVinScanAlert();
+                });
+            this.isVinLoading = false;
+        },
         resetAlerts() {
             this.displayMatchedDifferentVehicleAlert = false;
             this.displayNonServiceableZipAlert = false;