From 3d905c65e871e6b490b9f8f4f94897f46afbda35 Mon Sep 17 00:00:00 2001
From: Adam Caouette <adam.caouette@safelite.com>
Date: Tue, 3 May 2022 14:48:07 -0400
Subject: [PATCH] CSR-347: create page shell and routing

---
 src/layouts/address-lookup/address-lookup.vue |   2 +-
 .../address-vehicles/address-vehicles.spec.js |   0
 .../address-vehicles/address-vehicles.vue     | 381 ++++++++++++++++++
 src/router/router-constants/routing-table.js  |  15 +-
 4 files changed, 396 insertions(+), 2 deletions(-)
 create mode 100644 src/layouts/address-vehicles/address-vehicles.spec.js
 create mode 100644 src/layouts/address-vehicles/address-vehicles.vue

diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 103cc61fa..cc01e760e 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -261,7 +261,7 @@ export default {
 					// and one of them matches the car id entered
 					navigateAfterSaveToHeritageFunnel(this.$route);
 				} else {
-					// and there is no match, navigate to "address-vehicle" page
+					// and there is no match, navigate to "address-vehicles" page
 					this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_VEHICLES, this.$route, {}, {}, carsFound);
 				}
 			} 
diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
new file mode 100644
index 000000000..dbc2d5c06
--- /dev/null
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -0,0 +1,381 @@
+<template>
+  <Form
+    @submit="onSubmit"
+    @invalid-submit="onInvalidSubmit"
+    ref="theForm"
+    v-slot="{ meta }"
+  >
+    <div class="container-fluid shadow rounded-3 p-2 position-relative make-tall px-5">
+      <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
+      <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage="false" />
+      <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
+
+new section:
+      <div v-for="(item, i) in PartsForQuestions" :key="i">
+        <!-- Render horizontal lines if there is multi-glass (aka if i > 0) -->
+        <div class="container-fluid">
+            <hr v-if="i > 0" />
+        </div>
+
+        <h3>item.glassLocation: {{ item.glassLocation }}</h3>
+        <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>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <vinInformation />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion cmsWidgetName="ServiceZIP" v-model="zip" inputId="zip" mask="#####" isRequired disableAutoFill validationRules="zip-required" />
+        </div>
+      </div>
+      <div class="row my-2">
+        <div class="col">
+          <textboxQuestion cmsWidgetName="EmailAddress" v-model="email" inputId="email" isRequired disableAutoFill validationRules="email-address-required|email-address-format" />
+        </div>
+      </div>
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="matchedDifferentVehicle"
+        alertClass="alert-danger"
+        cmsWidgetName="MatchedDifferentVehicle"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="noMatchAlert"
+        alertClass="alert-warning"
+        cmsWidgetName="NoMatchAlertWidget"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="noServiceZip"
+        alertClass="alert-warning"
+        cmsWidgetName="NoServiceZipWidget"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="vinFound"
+        alertClass="alert-warning"
+        cmsWidgetName="VinFoundWidget"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="vinFoundReadOnly"
+        alertClass="alert-warning"
+        cmsWidgetName="VinFoundReadOnlyWidget"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="foundWindshieldAlert"
+        alertClass="alert-warning"
+        cmsWidgetName="FoundWindshieldAlert"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="vinNotFound"
+        alertClass="alert-warning"
+        cmsWidgetName="VinNotFound"
+      />
+      <alert
+        class="my-3"
+        v-model="customAlertData"
+        v-if="perfectMatchNewVinAlert"
+        alertClass="alert-warning"
+        cmsWidgetName="PerfectMatchNewVinAlert"
+      />
+      <funnelFooter
+        cmsWidgetName="FunnelFooterWidget"
+        ref="funnelFooter"
+        :isDisabled="!meta.valid"
+        @back-clicked="backButtonAction"
+        @ForwardClicked="forwardButtonAction"
+      />
+    </div>
+  </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/common-components/funnel-header/funnel-header";
+import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
+import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+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";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import store from "@/store";
+import baseMixin from "@/mixins/base-mixin.js";
+import { storeActions } from "@/constants/store-actions";
+import { storeMutations } from "@/constants/store-mutations";
+import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
+import { errorMessages } from "@/constants/error-messages";
+import { required, regex } from "@/helpers/validation-rules";
+import { Form, defineRule } from "vee-validate";
+
+// DEFINE VALIDATION RULES
+defineRule("zip-required", required(errorMessages.ZIP_REQUIRED));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule("email-address-format", regex(/^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9_\-.]+).([a-zA-Z]{2,})$/, errorMessages.EMAIL_ADDRESS_FORMAT));
+defineRule("vin-required", required(errorMessages.VIN_REQUIRED));
+defineRule("vin-format", regex(/^[A-HJ-NPR-Z0-9]{17}$/, errorMessages.VIN_FORMAT));
+
+export default {
+  name: "address-vehicles",
+  async beforeRouteEnter(to, from, next) {
+    // Call APIs
+    const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+
+    // Settle promises and get results
+    const promiseResultMap = [
+      {
+        resultKey: "cmsContent",
+        promise: cmsContentPromise,
+      },
+    ];
+
+    const resultMap = await settleAllPromises(promiseResultMap);
+
+    console.log('resultMap.cmsContent: ', resultMap.cmsContent);
+
+    // resultMap.cmsContent = 
+    // {
+    //     "FunnelHeaderWidget": {
+    //         "ImageId": "2da72d7b-340b-4c7c-94f4-76fb77e30b7e",
+    //         "LogoImage": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3"
+    //     },
+    //     "VehicleBannerWidget": {
+    //         "BlurredImageId": "28452dcb-7762-4cc9-ab09-7643d0b89203",
+    //         "CarIconImageId": "76a3cdf2-87e7-48e3-9e2e-7a607a9af487",
+    //         "TruckIconImageId": "27c777e4-ae72-4877-9cab-c4b74583c1ec",
+    //         "VanIconImageId": "06a2512c-df43-4379-8af8-b6b2409f0e3f",
+    //         "CommercialVanIconImageId": "601401c8-323e-46c6-bdf5-54ab67310db4",
+    //         "SuvIconImageId": "a411185f-51a5-486a-a26b-0aec40114074",
+    //         "GenericVehicleImage": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
+    //         "GenericVehicleImageFilePath": "images/default-source/default-album/blurred-image.jpg",
+    //         "CarUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/car-placeholder.jpg?sfvrsn=25acf847_6",
+    //         "TruckUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/truck-placeholder.jpg?sfvrsn=a001f519_6",
+    //         "VanUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/van-placeholder.jpg?sfvrsn=fcf77dd5_6",
+    //         "CommercialVanUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/commercial-placeholder.jpg?sfvrsn=3aedc8d2_6",
+    //         "SuvUnmatchedVehicleIcon": "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/icons/suv-placeholder.jpg?sfvrsn=4bdeea2b_6"
+    //     },
+    //     "FunnelSubHeaderWidget": {
+    //         "HeaderText": "2014 Jeep Cherokee",
+    //         "HeaderSubText": "4 door utility"
+    //     },
+    //     "FoundMultipleVehicles": {
+    //         "HeadlineText": "We found {custom:vehicleCount} vehicles linked to the address you provided.",
+    //         "BodyText": "",
+    //         "OptionalImage": ""
+    //     },
+    //     "VehicleConfirmationQuestion": {
+    //         "QuestionText": "Confirm which vehicle has glass damage",
+    //         "Answers": []
+    //     },
+    //     "FoundWindshield": {
+    //         "HeadlineText": "We found a {custom:damage}!",
+    //         "BodyText": "<p style=\"text-align:center;\">We found a {custom:damage}, but the vehicle you selected is not the same vehicle you originally entered.</p><p style=\"text-align:center;\">If this selection is correct, please continue scheduling with your {custom:vinlookupYear} {custom:vinlookupMake} {custom:vinlookupModel}.</p>",
+    //         "OptionalImage": ""
+    //     },
+    //     "ProvideVinAlert": {
+    //         "HeadlineText": "",
+    //         "BodyText": "<p style=\"text-align:center;\">Don't see your vehicle? Re-enter the information on the previous page or {routerLink:clickedChangeVinLookupMethod,provide your VIN} in a different way.</p>",
+    //         "OptionalImage": ""
+    //     },
+    //     "FunnelFooterWidget": {
+    //         "BackButtonText": "Back",
+    //         "ForwardButtonText": "Get my personalized quote"
+    //     }
+    // }
+
+    // Call the "next" function to complete the transition to this page.
+    next((vm) => {
+      vm.setCmsContent(resultMap.cmsContent);
+    });
+  },
+  props: {
+    validationRules: String,
+  },
+  data() {
+    return {
+      matchedDifferentVehicle: false,
+      noMatchAlert: false,
+      noServiceZip: false,
+      vinFound: false,
+      vinFoundReadOnly: false,
+      foundWindshieldAlert: false,
+      vinNotFound: false,
+      perfectMatchNewVinAlert: false,
+      vin: '',
+      zip: '',
+      email: '',
+      customAlertData: {},
+    };
+  },
+  computed: {
+    PartsForQuestions() {
+
+      return [];
+
+      // const partsData = this.PartsFromApi;
+
+      // // Map API result data, to vehicle-parts data structure
+      // const mappedData = partsData.partsOrQuestions.map((g) => {
+      //   return {
+      //     glassName: g.glassName,
+      //     glassLocation: g.glassLocation,
+      //     colorAnswers: g.parts.reduce((arr, p) => {
+      //       arr.push({
+      //         ColorAnswerText: p.color,
+      //         FeatureAnswers: [
+      //           {
+      //             FeatureAnswerText:
+      //               p.description === "" ? p.color : p.description,
+      //             PartNumber: p.partNumber,
+      //           },
+      //         ],
+      //       });
+      //       return arr;
+      //     }, []),
+      //   };
+      // });
+
+      // return mappedData;
+    },
+    PartsFromApi() {
+      return store.getters.pageData(fmgPageValues.VEHICLE_PARTS);
+    },
+    isVinFieldReadOnly(){
+        return this.$store.getters.payment.insuranceCoverage.isVerified;
+    }
+  },
+  methods: {
+    arePagePrerequisitesValid() {
+        if (
+            store.getters.order.vehicle.carId
+            // && store.getters.order.serviceLocation.zip // TODO - NEEDS TO BE INCLUDED
+            // && store.getters.order.customer.emailAddress // TODO - NEEDS TO BE INCLUDED
+            // && vehicles passed in via pageData // TODO - NEEDS TO BE INCLUDED
+        ) {
+            return true;
+        }
+        return false;
+    },
+    // resetDependentState() {
+    //   store.commit(storeMutations.UPDATE_REGISTRATION_ADDRESS, null);
+    //   store.commit(storeMutations.UPDATE_REGISTRATION_CITY, null);
+    //   store.commit(storeMutations.UPDATE_REGISTRATION_FIRST_NAME, null);
+    //   store.commit(storeMutations.UPDATE_REGISTRATION_LAST_NAME, null);
+    //   store.dispatch(storeActions.RESET_PARTS_STATE_AND_DEPENDENCIES);
+    // },
+    backButtonAction() {
+      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
+    },
+    async forwardButtonAction() {
+      const zipValidation = await this.validateZip(this.zip);
+      if (!zipValidation.data.isServiceable) {
+        this.customAlertData.zip = this.zip;
+        this.$refs.funnelFooter.removeLoader();
+        this.noServiceZip = true;
+        return;
+      }
+      const vinLookup = await this.lookupVin(this.vin).catch(() => {
+        this.$refs.funnelFooter.removeLoader();
+        this.noMatchAlert = true;
+        return;
+      });
+      if (vinLookup.data.carId !== store.getters.vehicle.carId) {
+        this.customAlertData.vehicleInfo = vinLookup.data.vehicle;
+        this.$refs.funnelFooter.removeLoader();
+        this.foundWindshieldAlert = true;
+        return;
+      }
+      const carInfo = this.vinDoesNotMatchCarId ? vinLookup.data : store.getters.vehicle;
+      this.updateStore(carInfo)
+      const partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(
+        this.storeActions.GET_PARTS_OR_QUESTIONS,
+        {
+          carId: store.getters.vehicle.carId,
+          glassArray: store.getters.damage.glassToReplace,
+          zipCode: this.zip,
+          vin: vinLookup.vin
+        },
+        false
+      );
+      this.navigateForward(partsData);
+    },
+    navigateForward(partsData){
+        if(partsData.data.partsOrQuestions[0].partQuestions && partsData.data.partsOrQuestions[0].partQuestions.length > 0){
+            this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_PARTS_QUESTION, this.$route, {}, {}, partsData.data);
+            return;
+        } else if((!partsData.data.partsOrQuestions[0].partQuestions || partsData.data.partsOrQuestions[0].partQuestions.length < 1) && partsData.data.partsOrQuestions[0].parts.length > 1) {
+           this.$router.navigateAfterSave(this.navigationScenarios.CONTINUING_WITH_MULTIPLE_PARTS, this.$route, {}, {}, partsData.data);
+           return;
+        } else {
+            this.$router.navigate(this.navigationScenarios.CONTINUING_WITH_SINGLE_PART, this.$route);
+        }
+    },
+    validateZip(zip) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.VALIDATE_ZIP,
+        { zip }
+      );
+    },
+    lookupVin(vin) {
+      return baseMixin.methods.dispatchNonBlockingStoreAction(
+        storeActions.LOOKUP_VEHICLE_BY_VIN,
+        { vin }
+      );
+    },
+    updateStore(carInfo) {
+      // if(vehicleDamage){
+      //     store.dispatch(storeActions.RESET_DAMAGE_STATE_AND_DEPENDENCIES);
+      // }
+      store.commit(storeMutations.UPDATE_VEHICLE_VIN, this.vin);
+      store.commit(storeMutations.UPDATE_YEAR, carInfo.year);
+      store.commit(storeMutations.UPDATE_MAKE, carInfo.make);
+      store.commit(storeMutations.UPDATE_MODEL, carInfo.model);
+      store.commit(storeMutations.UPDATE_STYLE, carInfo.style);
+      store.commit(storeMutations.UPDATE_CAR_ID, carInfo.carId);
+      store.commit(storeMutations.UPDATE_VEHICLE_CATEGORY, carInfo.category);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_URL, carInfo.imageUrl);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_VIF_NUMBER, carInfo.imageVifNumber);
+      store.commit(storeMutations.UPDATE_VEHICLE_IMAGE_COLOR, carInfo.imageColor);
+      store.commit(storeMutations.UPDATE_SERVICE_LOCATION_ZIP, this.zip);
+      store.commit(storeMutations.UPDATE_CUSTOMER_EMAIL_ADDRESS, this.email);
+    },
+  },
+  components: {
+    Form,
+    funnelHeader,
+    vehicleBanner,
+    funnelSubHeader,
+    textboxQuestion,
+    alert,
+    funnelFooter,
+    vinInformation,
+  },
+};
+</script>
diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js
index 3290c43eb..4f4aa6dd1 100644
--- a/src/router/router-constants/routing-table.js
+++ b/src/router/router-constants/routing-table.js
@@ -171,7 +171,20 @@ const routingTable = [
         destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
       },         
     ],
-  },  
+  },
+  {
+    fmgPageValue: fmgPageValues.ADDRESS_VEHICLES,
+    maps: [
+      {
+        scenario: navigationScenarios.CLICKED_BACK,
+        destinationFmgPageValue: fmgPageValues.ADDRESS_LOOKUP,
+      },
+      {
+        scenario: navigationScenarios.CLICKED_FORWARD,
+        destinationFmgPageValue: fmgPageValues.VEHICLE_DAMAGE,
+      },         
+    ],
+  }, 
 ];
 
 export { routingTable };