Merge branch 'develop' into feature/CSR-2130

src/constants/endpoints.js

@@ -33,15 +33,15 @@ const endpoints = {
         method: "GET",
     },
     LookupVehicleByVin: {
-        url: "/vehicle/api/v1/vehicle/Lookup",
+        url: "/vehicle/api/v1/vehicle/lookup",
         method: "POST",
     },
     LookupVinByPlate: {
-        url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate",
+        url: "/vehicle/api/v1/vehicle/lookup-by-plate",
         method: "POST",
     },
     LookupVinByAddress: {
-        url: "/vehicle/api/v1/vehicle/lookup-vin-by-address",
+        url: "/vehicle/api/v1/vehicle/lookup-by-address",
         method: "POST",
     },
     LookupVinByImage: {

src/constants/experiments.js

@@ -4,6 +4,7 @@ const experimentUniverses = {
 
 const experimentSettings = {
     GOOGLE_CUSTOM_DIMENSION_INDEX: "Google Custom Dimension Index",
+    SUPPRESS_VIN_CAPTURE: "SuppressVinCapture",
     DISPLAY_AVAILABILITY_INDICATORS: "DisplayAvailabilityIndicators",
     PIA_EXPERIENCE: "PIA Experience",
     PIA_INSURANCE: "DisplayPIAInsurance",

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

@@ -213,7 +213,7 @@ export default {
                     classes = "ui-checkbox d-flex";
                     break;
                 case "servicePackageRadio":
-                    classes = "package-main d-md-flex justify-content-center";
+                    classes = "package-main d-md-flex justify-content-md-center";
                     break;
             }
             return classes;
@@ -255,7 +255,7 @@ export default {
                 buttonFooterCopy: answer.buttonFooterCopy ?? answer.buttonFooterCopy,
                 buttonImage: answer.buttonImage ?? answer.AnswerImageUrl,
                 buttonImageId: answer.buttonImageId ?? answer.ImageId,
-                additionalButtonData: answer.additionalButtonData,
+                additionalButtonData: answer.additionalButtonData ?? answer.additionalButtonData,
                 groupName: this.formatString(this.groupName),
                 value:
                     answer.value ??

src/helpers/heritage-integration/navigation-helper.js

@@ -5,6 +5,9 @@ import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"
 import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
 import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
 import { storeActions } from "@/constants/store-actions.js";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import experimentMixin from "@/mixins/experiment-mixin";
+import { experimentSettings } from "@/constants/experiments";
 import { includesWindshieldReplacement } from "@/helpers/damage-helper";
 import store from "@/store";
 import router from "@/router";
@@ -139,7 +142,11 @@ export async function skipVinLookup() {
         ? await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE)
         : false;
 
-    return isVinOptionalVehicle || !includesWindshieldReplacement();
+    return (
+        isVinOptionalVehicle ||
+        !includesWindshieldReplacement() ||
+        experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
+    );
 }
 
 export async function skipVinLookupNotRepair() {
@@ -151,7 +158,11 @@ export async function skipVinLookupNotRepair() {
         ? await store.dispatch(storeActions.IS_VIN_OPTIONAL_VEHICLE)
         : false;
 
-    return isVinOptionalVehicle || !includesWindshieldReplacement();
+    return (
+        isVinOptionalVehicle ||
+        !includesWindshieldReplacement() ||
+        experimentMixin.methods.hasSettingEqualTo(experimentSettings.SUPPRESS_VIN_CAPTURE, "true")
+    );
 }
 
 async function getLazyLoadedComponent(pageName) {

src/helpers/heritage-integration/navigation-helper.spec.js

@@ -115,6 +115,16 @@ describe("getPageToRouteExistingOrderTo", () => {
             store.commit(storeMutations.UPDATE_IS_REPAIR, false);
             store.commit(storeMutations.UPDATE_MAKE, "acura");
 
+            const mockExperimentsList = [
+                {
+                    universeName: "ConceptFunnel",
+                    settings: {
+                        SuppressVinCapture: false,
+                    },
+                },
+            ];
+            store.commit(storeMutations.UPDATE_EXPERIMENTS, mockExperimentsList);
+
             // Mock out the lazy load calls for all components.
             mockLazyLoadComponentReturnValues({
                 [fmgPageValues.VEHICLE]: true,

src/layouts/quote/quote.vue

@@ -1,7 +1,7 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
         <loadingModal ref="loadingModal" />
-        <div class="container-fluid page-container-grouped-styles quote">
+        <div class="container-fluid page-container-grouped-styles">
             <div class="row justify-content-center">
                 <div class="col-md-6">
                     <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
@@ -23,7 +23,7 @@
                 </div>
             </div>
             <div class="row justify-content-center">
-                <div class="col-md-6 col-lg-4">
+                <div class="col-md-12 col-xl-8">
                     <servicePackageQuestion
                         ref="servicePackage"
                         cashCmsWidgetName="CashServicePackageQuestionWidget"
@@ -49,13 +49,14 @@
                         :lineItems="lineItems" />
 
                     <recalDisclaimer
+                        class="mb-0"
                         cmsWidgetName="RecalDisclaimerWidget"
                         v-if="isRecalibrationOnOrder"
                         v-on="{ textLinkClicked: openModalAction }"
                         alertClass="alert-info" />
 
                     <promoModalQuestion
-                        class="small mt-4"
+                        class="small mt-6 d-md-flex justify-content-md-center"
                         v-model="lineItems"
                         :addableVaps="addableVaps"
                         pageName="quote"
@@ -67,7 +68,7 @@
                         cmsWidgetName="quoteDisclaimer"
                         justifyText="left"
                         typeStyle="caption"
-                        class="mt-4" />
+                        class="mt-6" />
 
                     <contentGroupModal ref="RainDefenseModal" cmsWidgetName="RainDefenseModal" />
                     <contentGroupModal ref="FrontWiperModal" cmsWidgetName="FrontWiperModal" />

src/layouts/quote/service-package-question/service-package-radio/service-package-radio.vue

@@ -12,9 +12,7 @@
             ]"
             for="testradio">
             <div class="package-specs">
-                <div
+                <div v-if="this.additionalButtonData.servicePackageDiscount" class="row">
-                    v-if="this.additionalButtonData.servicePackageDiscount"
-                    class="row justify-content-between">
                     <div class="col md-6">
                         <p class="m-0">
                             <span v-html="this.buttonLabel"></span>
@@ -140,18 +138,24 @@ export default {
 <style lang="scss">
 .package-main {
     .package-wrapper {
-        margin: 1rem 0;
+        margin: 0.5rem 0;
-        @include media-breakpoint-up(md) {
-            margin: 0.5rem 0;
-        }
-        position: relative;
         @include media-breakpoint-up(md) {
             margin: 1rem 0.5rem;
+            display: flex;
+            flex-direction: column;
+            align-self: flex-end;
         }
 
         label {
             display: block;
-            height: 100%;
+            @include media-breakpoint-up(md) {
+                display: flex;
+                min-height: 320px;
+            }
+            @include media-breakpoint-up(xl) {
+                display: flex;
+                min-height: 276px;
+            }
         }
 
         input[type="radio"] {
@@ -172,21 +176,13 @@ export default {
                 border-radius: 0.5rem;
                 overflow: hidden;
                 min-height: 60px;
-                @include media-breakpoint-up(md) {
-                    max-height: 500px;
-                    height: 100%;
-                }
 
                 &.has-subheader {
                     min-height: 80px;
                 }
                 &.has-text {
                     border-radius: 0 0 0.5rem 0.5rem;
-                    border: 1px solid #469d2a;
+                    border: 1px solid #469d2a; //Temp color
-                    @include media-breakpoint-up(md) {
-                        border-radius: 0.5rem;
-                        padding-top: 3.75rem;
-                    }
                 }
 
                 &:before {
@@ -263,26 +259,35 @@ export default {
 
         .package-footer {
             color: $red;
+            font-weight: 600;
         }
 
         .package-specs {
             display: flex;
             flex-direction: column;
             width: 100%;
-            max-height: 0;
             transition: all 0.5s ease;
             @include media-breakpoint-up(md) {
                 max-height: 500px;
             }
 
             p {
-                font-weight: 500;
+                font-weight: 600;
                 display: flex;
                 justify-content: space-between;
                 span {
                     &.pricing-info {
                         color: $green;
                         font-size: 0.875rem;
+                        @include media-breakpoint-up(md) {
+                            position: absolute;
+                            bottom: 0.75rem;
+                            left: 0;
+                            width: 100%;
+                            text-align: center;
+                            font-size: 1.125rem;
+                            color: $gray-500;
+                        }
                         span.strikethrough-price {
                             text-decoration: line-through;
                             font-size: 0.75rem;
@@ -300,23 +305,30 @@ export default {
             }
             span {
                 &.service-package-discount {
-                    color: #469d2a;
+                    color: #469d2a; //Temp color
                     text-align: end;
                     font-weight: 500;
                     font-size: 13px;
                     div.strikethrough-discount-price {
                         text-decoration: line-through;
                         margin-right: 0;
-                        font-weight: 500;
+                        font-weight: 400;
-                        font-size: 14px;
+                        font-size: 0.875rem;
                         line-height: 20px;
-                        color: $gray-550;
+                        color: $gray-500;
                         padding-right: 2px;
                     }
                     div.discount-price {
-                        color: #469d2a;
+                        color: #469d2a; //Temp color
                         font-weight: 600;
-                        font-size: 26px;
+                        font-size: 1.625rem;
+                    }
+                    @include media-breakpoint-up(md) {
+                        position: absolute;
+                        bottom: 0.75rem;
+                        left: 0;
+                        width: 100%;
+                        text-align: center;
                     }
                 }
             }
@@ -327,6 +339,7 @@ export default {
                     margin-bottom: 0.5rem;
                     font-size: 0.875rem;
                     line-height: 1.714;
+                    color: $gray-550;
                     a {
                         line-height: 1.714;
                         padding: 0;
@@ -353,28 +366,19 @@ export default {
             }
         }
         .discount-text {
-            line-height: 36px;
+            height: 2rem;
             display: flex;
             border-top-right-radius: 0.5rem;
             border-top-left-radius: 0.5rem;
-            background-color: #469d2a;
+            background-color: #469d2a; //Temp color
             align-items: center;
             justify-content: center;
-            padding: 5px;
             width: 100%;
             color: white;
-            height: 2.875rem;
+            text-transform: uppercase;
-            @include media-breakpoint-up(md) {
+            font-size: 0.875rem;
-                position: absolute;
+            font-weight: 600;
-                z-index: 1;
+            letter-spacing: 0.75px;
-                ~ label {
-                    .package-label {
-                        &:after {
-                            top: 68px;
-                        }
-                    }
-                }
-            }
         }
     }
 }

src/layouts/service-zip/service-zip.spec.js

@@ -10,6 +10,7 @@ import router from "@/router";
 import { navigationScenarios } from "@/router/router-constants/navigation-scenarios";
 import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
 import vinPagesMixin from "@/mixins/vin-pages-mixin";
+import { experimentSettings } from "../../constants/experiments";
 
 // Constants
 
@@ -23,6 +24,16 @@ let mockCmsContent = {
 let mockStoreActionData = {};
 
 let mockStoreData = {};
+let mockExperimentSettings = {
+    experiments: [
+        {
+            universeName: "ConceptFunnel",
+            settings: {
+                SuppressVinCapture: false,
+            },
+        },
+    ],
+};
 
 function resetMockStoreData() {
     mockStoreData = {
@@ -159,12 +170,14 @@ function resetMockStoreData() {
 
 function applyMockStoreDataToGetters() {
     store.getters = {
+        experimentSettings: mockExperimentSettings,
         order: mockStoreData,
         damage: mockStoreData.damage,
         payment: mockStoreData.payment,
         policy: mockStoreData.policy,
     };
     store.state.order = mockStoreData;
+    store.state.applicationUser.experiments = mockExperimentSettings;
 }
 
 async function mockDispatchStoreAction(actionName) {

src/styles/common-styles.scss

@@ -37,18 +37,9 @@ body {
                 max-width: 100%;
             }
         }
-        // Quote page desktop
+        //Quote page max-width for service packages
-        &.quote {
+        .col-xl-8 {
-            .col-md-6,
+            max-width: 1200px;
-            .col-lg-4 {
-                max-width: 1200px;
-            }
-            .col-md-6.col-lg-4 {
-                @include media-breakpoint-up(lg) {
-                    width: 100%;
-                    max-width: 910px;
-                }
-            }
         }
         //END set max-width on columns
     }