Merge branch 'develop' into feature/CSR-104

azure-pipelines.yml

@@ -30,6 +30,7 @@ resources:
 
 variables:
   - group: Digital-Infrastructure
+  - group: FixMyGlass-BuildBranches
 
 stages:
   # PR's
@@ -47,6 +48,7 @@ stages:
   # Dev Build/Deploy
   - ${{ else }}:
     - stage: Dev
+      condition: eq(variables['Build.SourceBranch'], variables['dev-branch'] )
       variables:
         - group: FixMyGlassDev
       jobs:
@@ -88,6 +90,7 @@ stages:
 
   # QA Build/Deploy
     - stage: Qa
+      condition: eq(variables['Build.SourceBranch'], variables['qa-branch'] )
       variables:
         - group: FixMyGlassQa
       jobs:

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

@@ -105,6 +105,7 @@ export default {
 .dropdown-question {
 	label {
 		color: $black;
+		font-weight: 500; 
 	}
 	.form-label {
 		margin-bottom: .25rem;

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

@@ -10,7 +10,7 @@
             Please wait...
         </div>
         <div class="text-center fs-5 loading-modal-text">
-            This process can take up 20 seconds.
+            This process can take up to 20 seconds.
         </div>
        </section>
     </div>

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

@@ -52,13 +52,26 @@ export default {
 			default: '',
 		},
 		validationRules: String,
-		cmsWidgetName: String,
+		cmsWidgetName: String
 	},
 	setup(props) {
+		const propsClone = Object.assign({}, props);
+		const modelValue = propsClone.modelValue;
+		let initialValue;
+
+		switch (typeof modelValue) {
+			case "number": 
+				initialValue = modelValue;
+				break;
+			default:
+				initialValue = (modelValue && modelValue.length > 0) ? modelValue : "";
+				break;
+		}
+
 		const fieldOptions = {
 			type: "text",
-			value: props.modelValue,
-			initialValue: (props.modelValue && props.modelValue.length > 0) ? props.modelValue : "",
+			value: modelValue,
+			initialValue: initialValue
 		};
 
 		const {
@@ -124,6 +137,7 @@ export default {
 .textbox-question {
 	label {
 		color: $black;
+		font-weight: 500;
 	}
 	input {
 		&.has-icon {

src/constants/error-messages.js

@@ -13,6 +13,7 @@ const errorMessages = {
     ZIP_REQUIRED: "Please enter your ZIP",
     ZIP_FORMAT: "Please enter a valid ZIP",
     LICENSE_PLATE_REQUIRED: "Please enter your license plate number",
+    REGISTRATION_ZIP_REQUIRED: "Please enter your registration ZIP code",
     FIRST_NAME_REQUIRED: "Please enter your first name",
     LAST_NAME_REQUIRED: "Please enter your last name",
     EMAIL_ADDRESS_REQUIRED: "Please enter your email address",
@@ -20,7 +21,7 @@ const errorMessages = {
     SERVICE_ZIP_REQUIRED: "Please enter your Service ZIP",
     SERVICE_ZIP_FORMAT: "Please enter a valid Service ZIP",
     VIN_REQUIRED: "Please enter your VIN",
-    VIN_FORMAT: "Please enter a valid VIN",
+    VIN_FORMAT: "Invalid VIN. Please make sure that you entered the correct 17-digit, alpha-numeric number. VINs do not contain the letters I, O, or Q",
     OPTION_REQUIRED: "Please select an option",
 };
 

src/helpers/damage-helper.js

@@ -26,7 +26,6 @@ export function getDamageString() {
   export function getIsWindshieldOnly () {
     const damageLocations = store.getters.damage.glassToReplace;
     const returnString = damageLocations.length === 1 && damageLocations[0]?.location === "Windshield" ? "windshield" : "glass";
-    console.log(damageLocations);
     return returnString;
   }
 

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

@@ -8,7 +8,7 @@
 		<div class="page-container-grouped-styles">
 			<loadingModal ref="loadingModal"/>
 			<funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
-			<vehicleBanner ref="vehicleBanner" :displayGenericVehicleImage=false />
+			<vehicleBanner cmsWidgetName="VehicleBannerWidget" ref="vehicleBanner" :displayGenericVehicleImage=false />
 			<funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" ref="funnelSubHeader" />	
 			<div class="fade-on-route-transition sub-container make-tall">
 				<customerQuestions ref="customerQuestions" v-model="customerQuestions" />

src/layouts/estimate/estimate.vue

@@ -11,7 +11,7 @@
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
       <div class="fade-on-route-transition sub-container make-tall">
         <alert
-        class=""
+        class="vinLookupMethodHeading"
         v-model="customAlertData"
         alertClass=""
         cmsWidgetName="AlertVinLookupQuestion"
@@ -138,12 +138,12 @@ export default {
 </script>
 
 <style lang="scss">
-  .alert p{
+  .vinLookupMethodHeading p {
     font-size: 1rem;
     font-weight: 500; 
     color: $black; 
   }
-  div .current_car_info-text{
+  div .current_car_info-text {
     padding-bottom: 16px; 
   }
 </style>

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

@@ -84,7 +84,7 @@ defineRule(
   "license-plate-required",
   required(errorMessages.LICENSE_PLATE_REQUIRED)
 );
-defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("zip-required", required(errorMessages.REGISTRATION_ZIP_REQUIRED));
 defineRule(
   "email-address-required",
   required(errorMessages.EMAIL_ADDRESS_REQUIRED)

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

@@ -64,14 +64,6 @@
           alertClass="alert-warning"
           cmsWidgetName="NoMatchAlertWidget"
         />
-        <alert
-          class="my-3"
-          :manualHeadline="NoServiceZipHeader"
-          :manualCopy="NoServiceZipBody"
-          v-model="customAlertData"
-          v-if="noServiceZip"
-          alertClass="alert-warning"
-        />
         <alert
           class="my-3"
           v-model="customAlertData"
@@ -93,7 +85,7 @@
           :manualCopy="MatchedDifferentVehicleAlertBody"
           v-model="customAlertData"
           v-if="isCarIdDifferent"
-          alertClass="alert-danger"
+          alertClass="alert-warning"
         />
         <alert
           class="my-3"
@@ -101,7 +93,7 @@
           :manualCopy="NoServiceZipBody"
           v-model="customAlertData"
           v-if="noServiceZip"
-          alertClass="alert-warning"
+          alertClass="alert-danger"
         />
         <alert
           class="my-3"
@@ -154,7 +146,7 @@ import { Form, defineRule } from "vee-validate";
 import { navigateAfterSaveToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 // DEFINE VALIDATION RULES
-defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
 defineRule(
   "email-address-required",
   required(errorMessages.EMAIL_ADDRESS_REQUIRED)
@@ -262,13 +254,13 @@ export default {
       store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
     },
     getEmailFromStore(){
-      return store.getters.order.customer.emailAddress
+      return store.getters.order.customer.emailAddress;
     },
     getVinFromStore(){
-      return store.getters.vehicle.vin
+      return store.getters.vehicle.vin;
     },
     getZipFromStore(){
-      return store.getters.vehicle.registration.zipCode
+      return store.getters.order.serviceLocation.zipCode;
     },
     attachCustomEvents() {
       this.prependActionToMethod(this, this.forwardButtonAction, () => {

src/mixins/analytics-mixin.js

@@ -6,12 +6,10 @@ import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from
 
 import baseMixin from "@/mixins/base-mixin";
 
-// We will need current page name for multiple methods, define it once to re-use.
-const currentPageName = getPageNameByQueryString();
-
 export default {
   methods: {
     logPageView(pageEvent) {
+      const currentPageName = getPageNameByQueryString();
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
@@ -26,6 +24,7 @@ export default {
     },
 
     logCustomEvent(category, action, label, value) {
+      const currentPageName = getPageNameByQueryString();
       var payload = {
         userId: getDeviceIdValue(),
         sessionKey: getSessionKeyValue(),
@@ -42,6 +41,7 @@ export default {
     },
 
     pushEventToGA(category, action, label, pushToLogApp = false) {
+      const currentPageName = getPageNameByQueryString();
       const eventToBePushed = {
         'event': GaEvents.GENERIC_EVENT,
         'category': category,
@@ -60,6 +60,7 @@ export default {
     },
 
     pushPageViewToGA() {
+      const currentPageName = getPageNameByQueryString();
       const pageViewEvent = {
         'event': GaEvents.PAGE_VIEW_EVENT,
         'pagePath': `/fmg/?${queryStrings.FMG_PAGE}=${currentPageName}`,

src/styles/common-error-styles.scss

@@ -1,7 +1,8 @@
 html {
   .has-error {
     &.list-button,
-    &.list-card {
+    &.list-card, 
+    &.list-card.list-button {
       border: 1px solid $red;
       color: $red;
       input[type=checkbox]:focus + label,
@@ -15,6 +16,14 @@ html {
         box-shadow: 0px 0px 0px 4px $red-200;
         border-radius: 10px;
       }
+      label {
+        border: 1px solid transparent; 
+      }
+      label:hover {
+        box-shadow: 0px 0px 0px 4px $red-200;
+        border-radius: 10px;
+        border: 1px solid $red; 
+      }
     }
     &.list-button-horizontal {
       color: $red;
@@ -106,14 +115,17 @@ html {
     color: $red;
     font-size: .875rem;
     font-weight: 500;
+    height: 1.5rem; 
+    margin-top: .25rem !important; 
   }
 
   .form-test-invalid {
     &.btn.btn-primary {
-      color: $gray;
+      color: $gray-600;
       background: $gray-200;
       cursor: pointer;
       pointer-events: all;
+      font-weight: $font-weight-normal;
     }
     &.btn.btn-primary:hover,
     &.btn.btn-primary:focus,

src/ux-components/alert/alert.vue

@@ -4,16 +4,16 @@
     role="alert"
     :class="[isDismissible ? 'alert-dismissible' : '', this.alertClass]"
   >
-    <p class="m-0 fw-bold small alert-heading">{{ alertHeadline }}</p>
+    <p class="m-0 fw-bold alert-heading">{{ alertHeadline }}</p>
     <p v-if="splitAlertCopyForLink.length">
       <template v-for="copy in splitAlertCopyForLink" :key="copy">
-        <span v-if="copy.includes('routerLink:')" class="m-0 text-body small">
+        <span v-if="copy.includes('routerLink:')" class="m-0 text-body">
           <router-link :to="{query: {fmgPage: `${copy.split(':')[1].split(',')[0]}`}, name: 'root'}">{{ copy.split(':')[1].split(',')[1] }}</router-link>
         </span>
-        <span v-else class="m-0 text-body small" v-html="copy"></span>
+        <span v-else class="m-0 text-body" v-html="copy"></span>
       </template>
     </p>
-    <p v-else class="m-0 text-body small" v-html="alertCopy"></p>
+    <p v-else class="m-0 text-body" v-html="alertCopy"></p>
     <button
       type="button"
       class="btn-close p-2"
@@ -129,8 +129,8 @@ export default {
     }
   }
   & p {
-    font-size: 14px;
-    margin-bottom: 0px;
+    font-size: .875rem;
+    margin-bottom: 0.25rem !important;
   }
 }
 </style>

src/ux-components/list-button/list-button.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="list-group list-button d-flex flex-column w-100 mb-2"
+    class="list-group list-button rounded-3 d-flex flex-column w-100 mb-2"
     :class="[(errors.length > 0 || hasError) ? 'has-error' : '']"
     @keyup.space="triggerButton()"
     @keyup.up="handleKeyupArrow()"

src/ux-components/text-link/text-link.vue

@@ -44,7 +44,6 @@ a {
   &.navigation-link {
     color: $black;
     line-height: 26px;
-    text-transform: capitalize;
     white-space: nowrap;
   }
   &.footer-link {