* Added direct link to details app.

* Help text for getting order number. * Added error messaging when Ford API fails. * Moved Window Sticker button to before output. * Added direct link for bookmarking.
TheSeg · Mar 19, 2021 · 1656ec5 · 1656ec5
1 parent 71c1804
commit 1656ec5
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 11 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mache-vin-finder",
-  "version": "0.1.0",
+  "version": "2.0.0",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

diff --git a/src/components/05_VinDetailsView.vue b/src/components/05_VinDetailsView.vue
@@ -7,9 +7,6 @@
       <div v-if="output.status" class="col-12">
         <h3>{{ output.status }}</h3>
       </div>
-      <div v-if="output.windowSticker" class="col-12">
-        <p><a class="btn btn-info" :href="'https://www.windowsticker.forddirect.com/windowsticker.pdf?vin=' + output.vin" target="_blank">Window Sticker</a></p>
-      </div>
     </div>
     <ul class="nav nav-pills nav-fill text-light" id="vin-details" role="tablist">
       <li class="nav-item" role="presentation">
@@ -175,6 +172,7 @@
       <button class="btn btn-secondary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="true" aria-controls="collapseExample">
         Show Raw Details
       </button>
+      <a class="btn btn-link" :href="`https://seg.fyi/mache-vin/#/details?vin=${output.vin}&order=${output.id.trim()}`">Direct Link</a>
       <div class="collapse p-3" id="collapseExample">
         <pre>{{ output }}</pre>
       </div>

diff --git a/src/views/Home.vue b/src/views/Home.vue
@@ -2,7 +2,7 @@
   <div class="container-fluid mt-2">
     <Introduction />
     <div class="row justify-content-center">
-      <div class="col-5">
+      <div class="col-5 mb-3">
         <router-link :to="{ path: 'findvin' }" v-slot="{ href }" custom>
           <div class="card text-light border-info bg-dark p-2">
             <div class="card-body">
@@ -13,7 +13,18 @@
           </div>
         </router-link>
       </div>
-      <div class="col-5">
+      <div class="col-5 mb-3">
+        <router-link :to="{ path: 'details' }" v-slot="{ href }" custom>
+          <div class="card text-light border-info bg-dark p-2">
+            <div class="card-body">
+              <h5 class="card-title">VIN Details</h5>
+              <p class="card-text">This tool replicates the Ford Vehicle Order Tracking tool, but shows you all the data and loads faster!</p>
+              <a class="btn btn-primary" :href="href">VIN Details</a>
+            </div>
+          </div>
+        </router-link>
+      </div>
+      <div class="col-5 mb-3">
         <router-link :to="{ path: 'show' }" v-slot="{ href }" custom>
           <div class="card text-light border-info bg-dark p-2">
             <div class="card-body">

diff --git a/src/views/VinDetails.vue b/src/views/VinDetails.vue
@@ -3,7 +3,9 @@
     <div class="row justify-content-center">
       <div class="col-4">
         <h1>VIN Details</h1>
-        <p><strong>This will contact Ford.com with your VIN number!</strong></p>
+        <p>This will contact Ford.com with your VIN and order number.</p>
+        <p><button class="btn btn-warning btn-sm" type="button" @click="showOrderHelp = !showOrderHelp">What's an order number?</button></p>
+        <p v-if="showOrderHelp">This is a four or five character long string that represents the Mach-E order placed at the factory. Put in your VIN and a Window Sticker button will show up. Click on it and if a valid sticker shows up, look for the "ITEM #" field. Find the string: AA-<strong>BBBB</strong> O/T 1. Take the numbers in the "B" section and enter it as the order number.</p>
       </div>
       <div class="col-4">
         <form @submit.prevent="fetchVIN()">
@@ -16,13 +18,20 @@
             <input id="inputOrder" v-model="inputOrder" placeholder="1234" type="text" class="form-control" maxlength="17" required style="text-transform:uppercase;" />
           </div>
           <div class="mb-3">
-            <button type="submit" class="btn btn-primary">Submit</button>
+            <p>
+              <button type="submit" class="btn btn-primary me-2">Submit</button>
+              <a v-if="inputVin" class="btn btn-info" :href="`https://www.windowsticker.forddirect.com/windowsticker.pdf?vin=${inputVin}`" target="_blank">Window Sticker</a>
+            </p>
           </div>
         </form>
       </div>
     </div>
-    <div class="row justify-content-center" v-if="output">
-      <div class="col-10">
+    <div class="row justify-content-center">
+      <div class="col-10" v-if="errors">
+        <h3 class="text-danger">Something's not right.</h3>
+        <p>Ford didn't like the information it recieved. Are you sure you have the right VIN and order number combination?</p>
+      </div>
+      <div class="col-10" v-if="output">
         <vin-details-view :output="output" />
       </div>
     </div>
@@ -42,7 +51,9 @@ export default {
     return {
       inputVin: null,
       inputOrder: null,
-      output: null
+      output: null,
+      errors: null,
+      showOrderHelp: false
     }
   },
   mounted () {
@@ -69,8 +80,11 @@ export default {
           }
         }).then((response) => {
           this.output = response.data[0]
+          this.errors = null
         }).catch((errors) => {
           console.error(errors)
+          this.output = null
+          this.errors = errors
         })
       }
     }