Merging from develop, fixed merge conflict

azure-pipelines.yml

@@ -127,4 +127,45 @@ stages:
                     indexDeployVariables:
                       __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
                       __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
+                    cfDistributionId: $(cfDistributionId)
+
+  # Prod Build/Deploy
+    - stage: Prod
+      condition: eq(variables['Build.SourceBranch'], variables['prod-branch'] )
+      variables:
+        - group: FixMyGlassProd
+      jobs:
+      - deployment: prodBuildDeployment
+        displayName: Build and Deploy FMG - Prod
+        environment: digitalCloud-prod
+        container: node
+        workspace:
+          clean: all
+        strategy:
+          runOnce:
+            deploy:
+              steps:
+                - checkout: self
+                  clean: true
+                - template: templates/digital/step-build-vue.yml@AzureDevOps
+                  parameters:
+                    buildOutputDir: dist
+                - template: templates/digital/step-deploy-vue.yml@AzureDevOps
+                  parameters:
+                    artifactName: vueDist
+                    awsProfile: $(prodDeploymentProfile)
+                    outputPath: /fmg/
+                    deployBuckets:
+                      safelite-prod-fmg-us-east-1:
+                        clearFolder: true
+                        deployFolder: ''
+                        region: us-east-1
+                    appDeployVariables:
+                      __VUE_APP_CONSUMER_CF_DISTRO__: $(__VUE_APP_CONSUMER_CF_DISTRO__)
+                      __VUE_APP_GOOGLE_PLACES_API_KEY__: $(__VUE_APP_GOOGLE_PLACES_API_KEY__)
+                      __VUE_APP_HERITAGE_FUNNEL__: $(__VUE_APP_HERITAGE_FUNNEL__)
+                      __VUE_APP_CURRENT_ENVIRONMENT__: $(__VUE_APP_CURRENT_ENVIRONMENT__)
+                    indexDeployVariables:
+                      __VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__: $(__VUE_APP_GOOGLE_TAG_MANAGER_SCRIPT_BODY__)
+                      __VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__: $(__VUE_APP_GOOGLE_TAG_MANAGER_NOSCRIPT_FRAME_SRC__)
                     cfDistributionId: $(cfDistributionId)

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

@@ -41,7 +41,7 @@
       </fieldset>
     </div>
     <div class="row form-test-error">
-        <error-message class="mt-2" :name="groupName" v-if="!suppressError"></error-message>
+        <error-message :name="groupName" v-if="!suppressError"></error-message>
     </div>
   </div>
 </template>

src/common-components/loading-modal/loading-modal.vue

@@ -3,14 +3,7 @@
     <div class="loading-modal">
       <section class="loading-modal-body">
         <div class="modal-icon-container text-center">
-            <img class="loader-gif" alt="Loading" src="@/assets/img/loader.gif">
-            <img class="modal-icon" alt="" src="@/assets/img/windshield.png">
-        </div>
-        <div class="text-center fw-bold fs-5 loading-modal-text">
-            Please wait...
-        </div>
-        <div class="text-center fs-5 loading-modal-text">
-            This process can take up to 20 seconds.
+            <img class="" alt="Loading" src="@/assets/img/FMGTransitionAnimation.svg">
         </div>
        </section>
     </div>
@@ -60,23 +53,15 @@
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
     border-radius: 4px;
     top: 48px;
-    height: 246px;
+    height: 186px;
     width: 327px;
   }
 
-  .loading-modal-body {
-    position: relative;
-    padding: 20px 10px;
-  }
-
   .loading-modal-text {
       padding: 0 24px 0 24px;
   }
 
   .modal-icon-container {
-    position: relative;
-    width: 75px;
-    height: 75px;
     margin: 15px auto;
     padding-bottom: 26px;
   }
@@ -85,6 +70,8 @@
       position: absolute;
       vertical-align: middle;
       border: 0;
+      width: 327px;
+      height: 186px;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);

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

@@ -2,7 +2,7 @@
 	<div class="textbox-question" :class="(errors && errors.length) || hasError ? 'has-error' : ''">
 		<label :for="inputId" :aria-label="questionText" class="form-label" v-html="labelText"></label>
 		<!-- See https://stackoverflow.com/a/30976223 for information about "do-not-autofill" -->
-		<input 
+		<input
 			v-model="value"
 			v-maska="mask"
 			:type="type"
@@ -14,11 +14,11 @@
 			:aria-disabled="isDisabled"
 			:disabled="isDisabled"
 			:aria-required="isRequired"
-			autocomplete="do-not-autofill" 
+			autocomplete="do-not-autofill"
 			:class="[hasIcon ? 'has-icon' : '', iconRight ? 'icon-right' : '']"
 			:validationRules="validationRules"
 		/>
-		<div v-show="errorMessage" class="row mt-2 form-test-error">
+		<div v-show="errorMessage" class="row my-2 form-test-error">
 			<span role="alert">{{ errorMessage }}</span>
 		</div>
 	</div>
@@ -60,7 +60,7 @@ export default {
 		let initialValue;
 
 		switch (typeof modelValue) {
-			case "number": 
+			case "number":
 				initialValue = modelValue;
 				break;
 			default:
@@ -182,4 +182,4 @@ export default {
 		display: none;
 	}
 }
-</style>
+</style>

src/layouts/address-lookup/address-lookup.vue

@@ -299,6 +299,7 @@ export default {
 				if (matchingCars.length === 1) {
 					// and one and only of them matches the car id entered
 					this.$refs.loadingModal.showModal();
+					this.updateVehicleInfo(matchingCar.vin, matchingCar.vehicle);
 					navigateAfterSaveToHeritageFunnel(this.$route);
 				} else {
 					// if there are no matches or there are multiple matches, navigate to "address-vehicles" page

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

@@ -46,25 +46,25 @@ import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
 // Supporting files
-import { 
-  fetchCmsContentForPage 
+import {
+  fetchCmsContentForPage
 } from "@/helpers/cms-content-helper";
 import {
-   settleAllPromises 
+   settleAllPromises
 } from "@/helpers/layout-helper";
 import store from "@/store";
 import baseMixin from "@/mixins/base-mixin.js";
 import {
-   storeActions 
+   storeActions
 } from "@/constants/store-actions";
 import {
-   storeMutations 
+   storeMutations
 } from "@/constants/store-mutations";
 import {
-   errorMessages 
+   errorMessages
 } from "@/constants/error-messages";
-import { 
-  navigateAfterSaveToHeritageFunnel 
+import {
+  navigateAfterSaveToHeritageFunnel
 } from "@/helpers/heritage-integration/navigation-helper";
 import {
   getDamageString,
@@ -256,7 +256,7 @@ export default {
         vinLookup.data.vehicle,
         zipValidation.data.state
       );
-      
+
       this.navigateForward();
     },
     navigateForward() {
@@ -335,4 +335,4 @@ export default {
     loadingModal,
   },
 };
-</script>
+</script>

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

@@ -58,14 +58,14 @@
           </div>
         </div>
         <alert
-          class="my-3"
+          class="my-4"
           v-model="customAlertData"
           v-if="noMatchAlert"
           alertClass="alert-warning"
           cmsWidgetName="NoMatchAlertWidget"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="PerfectMatchNewVinAlertReadOnlyHeader"
           :manualCopy="PerfectMatchNewVinAlertReadOnlyBody"
           v-model="customAlertData"
@@ -73,15 +73,15 @@
           alertClass="alert-success"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="MatchedDifferentVehicleAlertHeader"
           :manualCopy="MatchedDifferentVehicleAlertBody"
           v-model="customAlertData"
-          v-if="isCarIdDifferent"
+          v-if="isCarIdDifferent && !vinNotFound && !perfectMatchNewVinAlert"
           alertClass="alert-warning"
         />
         <alert
-          class="my-3"
+          class="my-4"
           :manualHeadline="NoServiceZipHeader"
           :manualCopy="NoServiceZipBody"
           v-model="customAlertData"
@@ -89,18 +89,19 @@
           alertClass="alert-danger"
         />
         <alert
-          class="my-3"
+          class="my-4"
           v-model="customAlertData"
           v-if="vinNotFound"
           alertClass="alert-danger"
           cmsWidgetName="VinNotFound"
         />
         <alert
-          class="my-3"
+          class="my-4"
+          :manualHeadline="PerfectMatchNewVinAlertHeader"
+          :manualCopy="PerfectMatchNewVinAlertBody"
           v-model="customAlertData"
-          v-if="perfectMatchNewVinAlert"
+          v-if="perfectMatchNewVinAlert && !noServiceZip && !vinNotFound && meta.valid"
           alertClass="alert-success"
-          cmsWidgetName="PerfectMatchNewVinAlert"
         />
         <funnelFooter
           cmsWidgetName="FunnelFooterWidget"
@@ -139,7 +140,10 @@ import { Form, defineRule } from "vee-validate";
 import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
-defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+defineRule(
+  "zip-required",
+  required(errorMessages.SERVICE_ZIP_REQUIRED)
+);
 defineRule(
   "email-address-required",
   required(errorMessages.EMAIL_ADDRESS_REQUIRED)
@@ -151,7 +155,10 @@ defineRule(
     errorMessages.EMAIL_ADDRESS_FORMAT
   )
 );
-defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
+defineRule(
+  "vin-required",
+  required(errorMessages.VIN_REQUIRED)
+);
 defineRule(
   "vin-format",
   regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT)