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

<template>
  <Form
    @submit="onSubmit"
    @invalidSubmit="onInvalidSubmit"
    v-slot="{ meta }"
  >
    <div class="page-container-grouped-styles overflow-auto">
      <siteHeader
        cmsWidgetName="SiteHeaderWidget"
      />
      <vehicleBanner
        cmsWidgetName="VehicleBannerWidget"
        :displayGenericVehicleImage="false"
      />
      <siteSubHeader
        cmsWidgetName="SiteSubHeaderWidget"
      />
      <div class="fade-on-route-transition sub-container make-tall mt-5">
        <vinLookupAlerts
          :activeAlertType="activeVehicleLookupAlertType"
        />

        <vinQuestion
          v-model="vin"
        />

        <vinLocationInformation />

        <siteFooter
          cmsWidgetName="SiteFooterWidget"
          :isForwardActionDisabled="!meta.valid"
          @backClicked="backButtonAction"
          @forwardClicked="forwardButtonAction"
          ref="siteFooter"
        />
      </div>
    </div>
  </Form>
</template>
<script>
// Import Supporting Files
import { computed } from 'vue';
import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types';
import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
import { isGlassAvailableForCarId } from '@/helpers/damage-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
import { routerParams } from '@/router/router-params';
import { useMainStore } from '@/store';

// Import Component
import baseFormMixin from '@/mixins/base-form-mixin';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin';
import { Form } from 'vee-validate';
import siteFooter from '@/iss-components/site-footer/site-footer.vue';
import siteHeader from '@/iss-components/site-header/site-header.vue';
import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue';
import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue';
import vinLocationInformation from './vin-location-information/vin-location-information.vue';
import vinLookupAlerts from './vin-lookup-alerts/vin-lookup-alerts.vue';
import vinQuestion from './vin-question/vin-question.vue';

export default {
  name: 'vin-lookup',
  mixins: [baseFormMixin, vehicleQuestionsMixin],
  components: {
    siteFooter,
    siteHeader,
    siteSubHeader,
    Form,
    vehicleBanner,
    vinLocationInformation,
    vinLookupAlerts,
    vinQuestion,
  },
  setup() {
    const mainStore = useMainStore();

    return { mainStore };
  },
  data() {
    return {
      activeVehicleLookupAlertType: null,
      needToLookupVehicle: true,
      vehicleFromLookup: null,
      vin: null,      
    };
  },
  provide() {
    return {
      vehicleFromLookup: computed(() => this.vehicleFromLookup),
    };
  },
  async beforeRouteEnter(to, from, next) {
    const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

    // Settle promises and get results
    const promiseResultMap = [
      {
        resultKey: 'cmsContent',
        promise: cmsContentPromise,
      },
    ];

    const resultMap = await settleAllPromises(promiseResultMap);

    next((vm) => {
      vm.setCmsContent(resultMap.cmsContent);
    });
  },
  computed: {
    isCarIdDifferentFromTheStore() {
      return (
        this.vehicleFromLookup !== null
        && this.vehicleFromLookup.carId !== this.mainStore.vehicle.carId
      );
    }
  },
  methods: {
    arePagePrerequisiteValid() {
      return true;
    },
    backButtonAction() {
      /**
       * this.navigationScenarios comes from base-mixin
       */
      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
    },
    // NOTE: If form is not valid, this method is not called when 'Continue' button is clicked
    async forwardButtonAction() {
      this.resetActiveAlert();
      // Temp solution to reset the 'disabled' style on the Continue button
      this.$refs.siteFooter.enableForwardAction();
      
      if (this.needToLookupVehicle) {
        const vehicleLookupResponse = await this.lookupVehicleByVin(this.vin);

        if (vehicleLookupResponse.error) {
          this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
          this.resetVehicleFromLookup();
          this.$refs.siteFooter.removeLoader();
          // Temp solution to turn on 'disabled' style on the Continue button
          //  because the form itself actually passes its client-side validation.
          //  SSR-189 Scenario #4.
          this.$refs.siteFooter.disableForwardButton();
          return;
        }

        // Add vin bcs the response from the service doesn't contain vin
        this.vehicleFromLookup = Object.assign(vehicleLookupResponse.data, { vin: this.vin });        
      }

      if (this.needToLookupVehicle && this.isCarIdDifferentFromTheStore) {                
        this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_MATCHED;          
        
        const vehicleYearMakeModel = `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model}`;
        this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModel}`);
        this.$refs.siteFooter.removeLoader();
        
        this.needToLookupVehicle = false;

        return;
      }

      let isSelectedGlassAvailableForVehicle = true;      
      if (this.isCarIdDifferentFromTheStore) {        
        isSelectedGlassAvailableForVehicle = 
          await isGlassAvailableForCarId(this.vehicleFromLookup.carId);        
      }            
      
      // navigate back to vehicle-damage
      if (this.isCarIdDifferentFromTheStore && !isSelectedGlassAvailableForVehicle) {              
        this.mainStore.updateVehicle(this.vehicleFromLookup);
        this.$router.navigate(
          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
          this.$route,
          {},
          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
        );

        // navigate() doesn't stop the processing flow
        return;
      }            
      
      this.mainStore.updateVehicle(this.vehicleFromLookup);
      const partsOrQuestionsResponse = await this.getPartsOrQuestions();
      if (partsOrQuestionsResponse.error) {
        // To Do: Need requirement on what to do here
        console.error('Error on retrieving PartsOrQuestions');
        this.$refs.siteFooter.removeLoader();
        return;
      }

      // Comes from vehicleQuestionsMixin.navigateForward()
      await this.navigateForward(partsOrQuestionsResponse.data.partsOrQuestions, this);
    },
    async getPartsOrQuestions() {
      try {        
        const response = await this.mainStore.getPartsOrQuestions();

        return response;
      } catch (responseError) {
        return {
          error: {
            status: responseError.status,
          },
        };
      }
    },
    async lookupVehicleByVin(vin) {
      try {
        return await this.mainStore.lookupVehicleByVin(vin);
      } 
      catch (responseError) {        
        return {
          error: {
            status: responseError.status,
          },
        };
      }
    },        
    resetActiveAlert() {
      this.activeVehicleLookupAlertType = null;
    },
    resetVehicleFromLookup() {
      this.vehicleFromLookup = null;
    },
    resetDependentState() {},
  },
  watch: {
    vin() {
      this.resetActiveAlert();
      this.$refs.siteFooter.enableForwardAction();
      this.needToLookupVehicle = true;
      this.$refs.siteFooter.updateButtonText(
        this.getCmsContent('SiteFooterWidget', 'ForwardButtonText')
      );
    }
  },
};
</script>