From 98ef72f8b71788d785671ade89c69c3030c68e9f Mon Sep 17 00:00:00 2001
From: Kroell <Katie.Kroell@safelite.com>
Date: Thu, 29 Dec 2022 16:13:37 -0500
Subject: [PATCH] Added textbox components to license-plate-lookup page

---
 .../license-plate-lookup.vue                  | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index e6eb61f9..8818cc46 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -1,24 +1,30 @@
 <template>  
-  <VeeValidateForm @submit="onSubmit" @invalid-submit="onInvalidSubmit">
+  <VeeValidateForm
+    @submit="onSubmit"
+    @invalid-submit="onInvalidSubmit" >
     <div class="page-container-grouped-styles overflow-auto">
-      <SiteHeader
-        cms-widget-name="SiteHeaderWidget"
-      />
-      <VehicleBanner
+      <siteHeader
+        cms-widget-name="SiteHeaderWidget"  />
+      <vehicleBanner
         cms-widget-name="VehicleBannerWidget"
-        :display-generic-vehicle-image="false"
-      />
-      <SiteSubHeader
-        cms-widget-name="SiteSubHeaderWidget"
-      />
-      <div class="fade-on-route-transition sub-container make-tall">
-        <p>License Plate Lookup Page Placeholder</p>
-        <SiteFooter
+        :display-generic-vehicle-image="false" />
+      <siteSubHeader
+        cms-widget-name="SiteSubHeaderWidget" />
+      <div class="fade-on-route-transition sub-container make-tall mt-5">
+        <textboxQuestion
+          inputId="licensePlateField"
+          cmsWidgetName="LicensePlateNumberQuestionWidget"
+          v-model="licensePlate" />
+        <textboxQuestion 
+          class="mt-4"
+          inputId="registrationZipField"
+          cmsWidgetName="RegistrationZipQuestionWidget"
+          v-model="registrationZip" />
+        <siteFooter
           cms-widget-name="SiteFooterWidget"
           :is-forward-action-disabled="isForwardActionDisabled"
           @back-clicked="backButtonAction"
-          @forward-clicked="forwardButtonAction"
-        />
+          @forward-clicked="forwardButtonAction" />
       </div>
     </div>
   </VeeValidateForm>
@@ -31,20 +37,22 @@ import { Form } from 'vee-validate';
 import BaseFormMixin from '@/mixins/base-form-mixin.js';
 
 // Import Component
-import SiteFooter from '@/common-components/site-footer/site-footer.vue';
-import SiteHeader from '@/common-components/site-header/site-header.vue';
-import SiteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
-import VehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import siteFooter from '@/common-components/site-footer/site-footer.vue';
+import siteHeader from '@/common-components/site-header/site-header.vue';
+import siteSubHeader from '@/common-components/site-sub-header/site-sub-header.vue';
+import vehicleBanner from '@/common-components/vehicle-banner/vehicle-banner.vue';
+import textboxQuestion from '../../common-components/textbox-question/textbox-question.vue';
 
 export default {
   name: 'license-plate-lookup',
   mixins: [BaseFormMixin],
   components: {
     VeeValidateForm: Form,
-    SiteFooter,
-    SiteHeader,
-    SiteSubHeader,
-    VehicleBanner,    
+    siteFooter,
+    siteHeader,
+    siteSubHeader,
+    vehicleBanner,
+    textboxQuestion,    
   },
   data() {
     return {};