Added code to call image to vin service

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

@@ -6,7 +6,12 @@
             class="form-label"
             :class="[questionAlignment === 'center' ? 'text-center w-100 mb-5' : '']"
             v-html="labelText"></label>
-        <div class="input-wrapper" :class="[includeSearchIcon ? 'has-search-icon' : '', includeCameraIcon ? 'has-camera-icon' : '']">
+        <div
+            class="input-wrapper"
+            :class="[
+                includeSearchIcon ? 'has-search-icon' : '',
+                includeCameraIcon ? 'has-camera-icon' : '',
+            ]">
             <input
                 class="form-control"
                 v-model.trim="value"
@@ -32,7 +37,12 @@
                 @focus="$emit('focus', $event.target.value)" />
             <button v-if="includeSearchIcon" type="submit" aria-label="Search button" />
             <label class="camera-icon-input" v-if="includeCameraIcon">
-              <input type="file" id="vin-input" accept="image/*" aria-label="Camera icon/button" />
+                <input
+                    type="file"
+                    id="vin-input"
+                    accept="image/*"
+                    aria-label="Camera icon/button"
+                    @change="submitImage" />
             </label>
         </div>
         <div v-show="errorMessage" class="row my-2 form-test-error">
@@ -43,6 +53,7 @@
 
 <script>
 import { useField, validate } from "vee-validate";
+import { storeActions } from "@/constants/store-actions";
 
 export default {
     name: "textbox-question",
@@ -109,6 +120,18 @@ export default {
             errors,
         };
     },
+    methods: {
+        async submitImage(e) {
+            await this.dispatchStoreAction(storeActions.LOOKUP_VIN_BY_IMAGE, e.target.files[0])
+                .then((response) => {
+                    document.getElementById(this.inputId).value = response.data;
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
+            e.target.value = null;
+        },
+    },
     computed: {
         questionText() {
             return this.getCmsContent(this.cmsWidgetName, "QuestionText");

src/constants/store-actions.js

@@ -19,6 +19,7 @@ const storeActions = {
     LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin",
     LOOKUP_VIN_BY_PLATE: "lookupVinByPlate",
     LOOKUP_VIN_BY_ADDRESS: "lookupVinByAddress",
+    LOOKUP_VIN_BY_IMAGE: "lookupVinByImage",
     GET_PARTS_OR_QUESTIONS: "getPartsOrQuestions",
     GET_PARTS: "getParts",
     GET_WIPERS: "getWipers",

src/global-methods.js

@@ -53,6 +53,25 @@ export default {
         });
     },
 
+    callSimpleHttpClient({ method, endpoint, payload }) {
+        return new Promise((resolve, reject) => {
+            axios({
+                method: method,
+                url: endpoint,
+                data: payload,
+                crossDomain: true,
+                headers: { "Access-Control-Allow-Origin": "*" },
+            }).then(
+                (response) => {
+                    return resolve(response);
+                },
+                (error) => {
+                    return reject(error.response);
+                }
+            );
+        });
+    },
+
     /* istanbul ignore next */
     callMockHttpClient({ method, endpoint }) {
         // For Mock use only!

src/store/index.js

@@ -529,6 +529,15 @@ export const actions = {
             },
         });
     },
+    lookupVinByImage(context, image) {
+        const data = new FormData();
+        data.append("file", image);
+        return globalMethods.callSimpleHttpClient({
+            method: "POST",
+            endpoint: "https://slimagetovin.azurewebsites.net/home/FindVIN",
+            payload: data,
+        });
+    },
     getVehicleMakes(context, { year }) {
         return globalMethods.callHttpClient({
             method: endpoints.GetVehicleMakes.method,