CSR-347: WIP, more elements and data setup for address-vehicles page

src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue

@@ -0,0 +1,76 @@
+<template>
+  <buttonQuestion
+    class="radioQuestion"
+    :questionText="questionText"
+    :answers="vehicles"
+    groupName="ChooseAddressVehicle"
+    textPosition="text-start"
+    v-model="selectedValueAsArray"
+    isRequired=true
+  />
+</template>
+
+<script>
+import buttonQuestion from "@/common-components/button-question/button-question";
+// Supporting files
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions.js";
+import baseMixin from "@/mixins/base-mixin.js";
+
+export default {
+  name: "address-vehicles-question",
+  data() {
+    return {
+      // makes: Array,
+    //   questionText: String,
+    };
+  },
+  props: {
+    vehicles: Array,
+    modelValue: String,
+    cmsWidgetName: String,
+  },
+  computed: {
+    differentVehicleAlertHeader() {
+        return [];
+    },
+    differentVehicleAlertBody() {
+        return [];
+    },
+    selectedValue() {
+        return [];
+    },
+    questionText(){
+      return this.getCmsContent(this.cmsWidgetName, 'QuestionText');
+    },
+    // selectedValueAsArray: {
+    //   get: function() {
+    //     const modelValueAsArray = this.modelValue ? [this.modelValue] : [];
+    //     return modelValueAsArray;
+    //   },
+    //   set: function(newValue) {
+    //     const newValueAsScalar = newValue && newValue.length > 0 ? newValue[0] : null;
+    //     this.$emit("update:modelValue", newValueAsScalar);
+    //   }
+    // }
+  },
+  components: {
+    buttonQuestion,
+  },
+  methods: {
+    loadInitialData() {
+      return baseMixin.methods.dispatchStoreAction(
+        storeActions.GET_VEHICLE_MAKES,
+        { year: store.getters.vehicle.year }
+      );
+    },
+    // initializeComponent(initialData) {
+    //   this.makes = initialData;
+    // },
+    initializeComponent(initialData) {
+        console.log('initializeComponent... initialData: ', initialData)
+    //   this.makes = initialData;
+    },
+  },
+};
+</script>

src/layouts/address-vehicles/address-vehicles.vue

@@ -9,23 +9,27 @@
       <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
       <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
       <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+      <alert 
+        ref="alertFoundMultipleVehicles"
+				class="my-3"
+				alertClass="alert-warning"
+				:manualHeadline="AlertFoundMultipleVehiclesHeader"
+        manualCopy=""
+				v-bind:isDismissible="false"
+			/>
       
-new section:
+      <addressVehiclesQuestion cmsWidgetName="VehicleConfirmationQuestion" :vehicles="VehiclesForQuestions" />
-      <div v-for="(item, i) in PartsForQuestions" :key="i">
+
-        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+      <div class="alert-provide-vin" v-if="splitAlertProvideVinBodyForLink.length">
-        <div class="container-fluid">
+        <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
-            <hr v-if="i > 0" />
+          <span v-if="copy.includes('routerLink:')" class="m-0 text-body small">
+            <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>
       </div>
 
-        <h3>item.glassLocation: {{ item.glassLocation }}</h3>
+      <!-- <div class="row my-2">
-        <h3>item.glassName: {{ item.glassName }}</h3>
-        <h3>item.colorAnswers: {{ item.colorAnswers }}</h3>
-
-      </div>
-
-
-
-      <div class="row my-2">
         <div class="col">
           <textboxQuestion cmsWidgetName="VinNumber" v-model="vin" inputId="vin" isRequired disableAutoFill validationRules="vin-required|vin-format" :isDisabled=isVinFieldReadOnly />
         </div>
@@ -100,7 +104,7 @@ new section:
         v-if="perfectMatchNewVinAlert"
         alertClass="alert-warning"
         cmsWidgetName="PerfectMatchNewVinAlert"
-      />
+      /> -->
       <funnelFooter
         cmsWidgetName="FunnelFooterWidget"
         ref="funnelFooter"
@@ -121,6 +125,7 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
 import alert from "@/ux-components/alert/alert";
 import textboxQuestion from "@/common-components/textbox-question/textbox-question";
 import vinInformation from "@/layouts/vin-lookup/vin-information/vin-information";
+import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -220,6 +225,7 @@ export default {
   },
   data() {
     return {
+
       matchedDifferentVehicle: false,
       noMatchAlert: false,
       noServiceZip: false,
@@ -235,14 +241,34 @@ export default {
     };
   },
   computed: {
-    PartsForQuestions() {
+    vehicleCount() {
+      return this.VehiclesForQuestions.length;
+    },
+    AlertFoundMultipleVehiclesHeader(){
+			// let zip = this.serviceZip ? this.serviceZip : this.customerQuestions.addressQuestions.zip;
+      let count = 88;
+			let text = this.getCmsContent("FoundMultipleVehicles", "HeadlineText").replaceAll("{custom:vehicleCount}", this.vehicleCount);
+			return text;
+		},
+    AlertProvideVinBody(){
+			// let text = this.getCmsContent("ProvideVinAlert", "BodyText").replaceAll("{routerLink:clickedChangeVinLookupMethod,provide your VIN}", "LINKHERE");
+      let text = this.getCmsContent("ProvideVinAlert", "BodyText");
+			return text;
+		},
+    splitAlertProvideVinBodyForLink(){
+      // Splits content when brackets are found in text so that text can be looped through and router-link can be injected when needed
+      return this.AlertProvideVinBody.split(/{(.*?)}/g);
+    },
+    VehiclesForQuestions() {
 
-      return [];
+      const vehiclesData = this.VehiclesFromApi;
 
-      // const partsData = this.PartsFromApi;
+      console.log('vehiclesData: ', vehiclesData)
 
-      // // Map API result data, to vehicle-parts data structure
+      return vehiclesData;
-      // const mappedData = partsData.partsOrQuestions.map((g) => {
+
+      // // Map API result data, to address-vehicles data structure
+      // const mappedData = vehiclesData.partsOrQuestions.map((g) => {
       //   return {
       //     glassName: g.glassName,
       //     glassLocation: g.glassLocation,
@@ -264,8 +290,8 @@ export default {
 
       // return mappedData;
     },
-    PartsFromApi() {
+    VehiclesFromApi() {
-      return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+      return store.getters.pageData(fmgPageValues.ADDRESS_VEHICLES);
     },
     isVinFieldReadOnly(){
         return this.$store.getters.payment.insuranceCoverage.isVerified;
@@ -372,10 +398,11 @@ export default {
     funnelHeader,
     vehicleBanner,
     funnelSubHeader,
-    textboxQuestion,
+    // textboxQuestion,
     alert,
     funnelFooter,
-    vinInformation,
+    // vinInformation,
+    addressVehiclesQuestion,
   },
 };
 </script>

src/ux-components/alert/alert.vue

@@ -41,7 +41,7 @@ export default {
     isDismissible: Boolean,
     /*
     alertClass class names:
-    alert-sucess (green)
+    alert-success (green)
     alert-danger (red)
     alert-warning (yellow)
     alert-info (blue)