refactoring to license-plate-lookup based on team convo

src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue

@@ -0,0 +1,50 @@
+<template>
+    <div
+      id="vin-lookup-alerts-wrapper"
+      :class="wrapperCssClass"
+    >
+      <vehicleNotFoundAlert
+        v-if="isVehicleNotFoundVisible"
+      />
+      <vehicleNotMatchedAlert
+        v-else-if="isVehicleNotMatchedVisible"
+      />
+    </div>
+  </template>
+  <script>
+  import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
+  import vehicleNotFoundAlert from './vehicle-not-found-alert/vehicle-not-found-alert.vue';
+  import vehicleNotMatchedAlert from './vehicle-not-matched-alert/vehicle-not-matched-alert.vue';
+  
+  export default {
+    name: 'license-plate-lookup-alerts',
+    components: {
+      vehicleNotFoundAlert,
+      vehicleNotMatchedAlert,
+    },
+    props: {
+      activeAlertType: {
+        type: String,
+        validator(value) {
+          const acceptedValues = [null];
+          acceptedValues.push(...Object.values(vehicleLookupAlertTypes));
+          return acceptedValues.includes(value);
+        },
+      },
+    },
+    computed: {
+      isVehicleNotFoundVisible() {
+        return this.activeAlertType === vehicleLookupAlertTypes.NOT_FOUND;
+      },
+      isVehicleNotMatchedVisible() {
+        return this.activeAlertType === vehicleLookupAlertTypes.NOT_MATCHED;
+      },
+      wrapperCssClass() {
+        return {
+          'mb-5': this.activeAlertType !== null,
+        };
+      },
+    },
+  };
+  </script>
+  

src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue

@@ -0,0 +1,26 @@
+<template>
+    <alert
+      alertClass="alert-danger"
+      cmsWidgetName="AlertVinNotFoundWidget"
+      id="vehicle-not-found-alert"
+    />
+  </template>
+  <script>
+  import alert from '@/ux-components/alert/alert.vue';
+  
+  export default {
+    name: 'vehicle-not-found-alert',
+    components: {
+      alert,
+    },
+  };
+  </script>
+  <style>
+  /**
+    Override wrong margin-bottom rule in the Alert component.
+  */
+  #vehicle-not-found-alert p:last-of-type {
+    margin-bottom: 0 !important;
+  }
+  </style>
+  

src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue

@@ -0,0 +1,49 @@
+<template>
+    <alert
+      alertClass="alert-warning"
+      cmsWidgetName="AlertMatchedDifferentVehicleWidget"
+      :manualCopy="body"
+      :manualHeadline="header"
+    />
+  </template>
+  <script>
+  import { getDamageString } from '@/helpers/damage-helper';
+  
+  import alert from '@/ux-components/alert/alert.vue';
+  
+  export default {
+    name: 'vehicle-not-matched-alert',
+    components: {
+      alert,
+    },
+    inject: ['vehicleFromLookup'],
+    computed: {
+      header() {
+        return (
+          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
+            .replaceAll('{custom:damage}', getDamageString())
+        );
+      },
+      body() {
+        let year = '';
+        let make = '';
+        let model = '';
+  
+        if (this.vehicleFromLookup) {
+          year = this.vehicleFromLookup.year;
+          make = this.vehicleFromLookup.make;
+          model = this.vehicleFromLookup.model;
+        }
+  
+        return (
+          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
+            .replaceAll('{custom:damage}', getDamageString())
+            .replaceAll('{custom:vinlookupYear}', year)
+            .replaceAll('{custom:vinlookupMake}', make)
+            .replaceAll('{custom:vinlookupModel}', model)
+        );
+      },
+    },
+  };
+  </script>
+  

src/layouts/license-plate-lookup/license-plate-lookup.vue

@@ -10,22 +10,8 @@
         :display-generic-vehicle-image="false" />
       <siteSubHeader cms-widget-name="SiteSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall mt-5">
-        <alert
+        <licensePlateLookupAlerts
-          v-if="isVehicleNotFoundVisible"
-          cmsWidgetName="AlertVinNotFoundWidget"
           :activeAlertType="activeVehicleLookupAlertType"
-          alertClass="alert-danger"
-          class="mb-5"
-          ref="vehicleNotFoundAlert"
-        />
-        <alert
-          v-if="isVehicleNotMatchedVisible"
-          cmsWidgetName="AlertMatchedDifferentVehicleWidget"
-          :activeAlertType="activeVehicleLookupAlertType"
-          :manualHeadline="header"
-          :manualCopy="body"
-          alertClass="alert-warning"
-          class="mb-5"
         />
         <textboxQuestion
           cmsWidgetName="LicensePlateNumberQuestionWidget"
@@ -61,10 +47,9 @@ import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
 import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 import { settleAllPromises } from '@/helpers/layout-helper';
 import { useMainStore } from '@/store';
-import { defineRule } from 'vee-validate';
+import { errorMessages } from "@/constants/error-messages";
-import { regex, required } from '@/helpers/validation-rules';
+import { required, regex } from "@/helpers/validation-rules";
-import { errorMessages } from '@/constants/error-messages';
+import { defineRule } from "vee-validate";
-import { getDamageString } from "@/helpers/damage-helper";
 
 // Import Component
 import baseFormMixin from '@/mixins/base-form-mixin';
@@ -74,13 +59,12 @@ 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';
-import alert from '@/ux-components/alert/alert.vue';
+import licensePlateLookupAlerts from '@/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue';
 
 // Define Validation Rules
 defineRule("license-plate-required", required(errorMessages.LICENSE_PLATE_REQUIRED));
 defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
-defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.ZIP_FORMAT));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
-
 
 export default {
   name: 'license-plate-lookup',
@@ -92,7 +76,7 @@ export default {
     siteSubHeader,
     vehicleBanner,
     textboxQuestion,
-    alert,
+    licensePlateLookupAlerts,
   },
   setup() {
     const mainStore = useMainStore();
@@ -105,8 +89,6 @@ export default {
       vehicleFromLookup: null,
       licensePlate: null, 
       registrationZipCode: null,
-      isVehicleNotFoundVisible: false,
-      isVehicleNotMatchedVisible: false,
    };
   },
   provide() {
@@ -151,7 +133,6 @@ export default {
       const vehicleLookupResponse = await this.mainStore.lookupVinByPlate(this.licensePlate);
 
       if (vehicleLookupResponse.error) {
-        this.isVehicleNotFoundVisible = true;
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
         this.resetVehicleFromLookup();
         this.$refs.siteFooter.removeLoader();
@@ -160,7 +141,6 @@ export default {
 
       this.vehicleFromLookup = vehicleLookupResponse.data.vehicle;
       if (this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId) {
-        this.isVehicleNotMatchedVisible = true;
         this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;
         
         const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
@@ -180,32 +160,5 @@ export default {
     },
     resetDependentState() {},
   },
-  computed: {
-      header() {
-        return (
-          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'HeadlineText')
-            .replaceAll('{custom:damage}', getDamageString())
-        );
-      },
-      body() {
-        let year = '';
-        let make = '';
-        let model = '';
-  
-        if (this.vehicleFromLookup) {
-          year = this.vehicleFromLookup.year;
-          make = this.vehicleFromLookup.make;
-          model = this.vehicleFromLookup.model;
-        }
-  
-        return (
-          this.getCmsContent('AlertMatchedDifferentVehicleWidget', 'BodyText')
-            .replaceAll('{custom:damage}', getDamageString())
-            .replaceAll('{custom:vinlookupYear}', year)
-            .replaceAll('{custom:vinlookupMake}', make)
-            .replaceAll('{custom:vinlookupModel}', model)
-        );
-      },
-    },
 };
 </script>