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

<template>
  <Form
    @submit="onSubmit"
    @invalidSubmit="onInvalidSubmit"
    ref="theForm"
    v-slot="{ meta }"
  >
    <div class="page-container-grouped-styles overflow-auto">
      <siteHeader cmsWidgetName="SiteHeaderWidget" />
      <vehicleBanner
        class="mb-3"
        cmsWidgetName="VehicleBannerWidget"
        :displayGenericVehicleImage="false"
      />
      <siteSubHeader cmsWidgetName="SiteSubHeaderWidget" />

      <div class="px-5">
        <alert
          cmsWidgetName="FoundMultipleVehicles"
          ref="alertFoundMultipleVehicles"
          class="my-5"
          alertClass="alert-warning"
          :manualHeadline="AlertFoundMultipleVehiclesHeader"
          manualCopy=""
          v-bind:isDismissible="false"
          id="multiple-vehicles-alert"
        />
      </div>

      <addressVehiclesQuestion
        ref="addressVehiclesQuestion"
        cmsWidgetName="VehicleConfirmationQuestion"
        :vehicles="VehiclesForQuestions"
        validationRules="vehicle-required"
        v-model="selectedVehicleVin"
        :isCarIdDifferent="isCarIdDifferent"
      />
      
      <div
        class="alert-provide-vin my-3 px-5"
        v-if="splitAlertProvideVinBodyForLink.length"
      >
        <span v-for="copy in splitAlertProvideVinBodyForLink" :key="copy">
          <span v-if="doesCopyContainRouterLink(copy)" class="text-body">
            <router-link
              :to="{
                query: { issPage: `${getRouterLinkRouteFromCopy(copy)}` },
                name: 'root',
              }"
              >{{ getRouterLinkDisplayTextFromCopy(copy) }}</router-link
            >
          </span>
          <span v-else class="m-0 text-body" v-html="copy"></span>
        </span>
      </div>
    </div>
    <siteFooter
      cmsWidgetName="SiteFooterWidget"
      :isForwardActionDisabled="!meta.valid"
      @backClicked="backButtonAction"
      @forwardClicked="forwardButtonAction"
      ref="siteFooter"
    />
  </Form>
</template>

<script>
// Import Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { useMainStore } from "@/store";
import { issPageValues } from "@/router/router-constants/issPage-values";
import { errorMessages } from "@/constants/error-messages";
import { required } from "@/helpers/validation-rules";
import { Form, defineRule } from "vee-validate";
import { isGlassAvailableForCarId } from "@/helpers/damage-helper";
import {
  doesCopyContainRouterLink,
  splitCopyOnCMSPlaceHolder,
  getRouterLinkRouteFromCopy,
  getRouterLinkDisplayTextFromCopy,
} from "@/helpers/cms-content-helper";
import { routerParams } from "@/router/router-constants/router-params";
import vinPagesMixin from "@/mixins/vin-pages-mixin";

// Import Component
import baseFormMixin from "@/mixins/base-form-mixin";
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 alert from "@/ux-components/alert/alert";
import addressVehiclesQuestion from "@/layouts/address-vehicles/address-vehicles-question/address-vehicles-question";

// DEFINE VALIDATION RULES
defineRule("vehicle-required", required(errorMessages.VEHICLE_REQUIRED));

export default {
  name: "address-vehicles",
  mixins: [baseFormMixin, vinPagesMixin],
  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);
    });
  },
  props: {
    validationRules: String,
  },
  setup() {
    const mainStore = useMainStore();

    return { mainStore };
  },
  data() {
    return {
      selectedVehicleVin: "",
      isCarIdDifferent: false,
      isSelectedGlassAvailableForVehicle: true,
    };
  },
  computed: {
    vehicleCount() {
      return this.VehiclesForQuestions.length;
    },
    AlertFoundMultipleVehiclesHeader() {
      return this.getCmsContent(
        "FoundMultipleVehicles",
        "HeadlineText"
      ).replaceAll("{custom:vehicleCount}", this.vehicleCount);
    },
    AlertProvideVinBody() {
      return this.getCmsContent("ProvideVinAlert", "BodyText");
    },
    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.splitCopyOnCMSPlaceHolder(this.AlertProvideVinBody);
    },
    VehiclesForQuestions() {
      // Map API result data, to address-vehicles data structure
      const mappedData = this.VehiclesFromApi.map((v) => {
        const maskSymbol = "X";
        const vinStart = maskSymbol.repeat(v.vin.length - 6);
        const vinEnd = v.vin.substring(v.vin.length - 6);
        return {
          vin: v.vin,
          vehicle: v.vehicle,
          Text: v.vehicle.year + " " + v.vehicle.make + " " + v.vehicle.model,
          Name: v.vin,
          SubText: "VIN " + vinStart + vinEnd,
        };
      });
      return mappedData;
    },
    VehiclesFromApi() {
      return useMainStore().pageData(issPageValues.ADDRESS_VEHICLES);
    },
    selectedVehicle() {
      return this.VehiclesForQuestions.find(
        ({ vin }) => vin === this.selectedVehicleVin
      );
    },
  },
  methods: {
    doesCopyContainRouterLink,
    splitCopyOnCMSPlaceHolder,
    getRouterLinkRouteFromCopy,
    getRouterLinkDisplayTextFromCopy,
    arePagePrerequisitesValid() {
      if (this.mainStore.order.vehicle.carId) {
          return true;
      }
      return false;
    },
    backButtonAction() {
      this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route);
    },
    async forwardButtonAction() {
      const vinLookup = await useMainStore()
        .lookupVehicleByVin(this.selectedVehicle.vin)
        .catch(() => {
          this.$refs.siteFooter.removeLoader();
        });
      if (!vinLookup) {
        return;
      }
      this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(
        vinLookup.data.carId
      );
      await useMainStore().saveVin(
        {
          vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
            vin: this.selectedVehicle.vin,
          }),
          isSelectedGlassAvailableForVehicle:
            this.isSelectedGlassAvailableForVehicle,
        },
        false
      );

      return await this.navigateForward();
    },
    async navigateForward() {
      // If the vehicle selected on this page is different from the one originally entered and the selected glass is not available
      // for that vehicle, then navigate back to "vehicle-damage" and display vehicle changed alert on that page.
      if (this.isCarIdDifferent && !this.isSelectedGlassAvailableForVehicle) {
        this.$router.navigate(
          this.navigationScenarios.SELECTED_VIN_WITH_MISMATCHED_GLASS,
          this.$route,
          {},
          { [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true }
        );
      } else {
        await this.navigateForwardWithSingleCarMatch();
      }
    },
  },
  watch: {
    selectedVehicleVin: {
      handler() {
        // does this vehicle match the previously selected carId?
        this.isCarIdDifferent =
          this.selectedVehicle?.vehicle.carId !== useMainStore().vehicle.carId;
        if (this.isCarIdDifferent) {
          this.$refs.siteFooter.updateButtonText(
            `Continue with ${this.selectedVehicle.vehicle.year} ${this.selectedVehicle.vehicle.make} ${this.selectedVehicle.vehicle.model}`
          );
        } else {
          this.$refs.siteFooter.updateButtonText(
            this.getCmsContent("SiteFooterWidget", "ForwardButtonText")
          );
        }
      },
      deep: true,
    },
  },
  components: {
    siteFooter,
    siteHeader,
    siteSubHeader,
    Form,
    vehicleBanner,
    alert,
    addressVehiclesQuestion,
  },
};
</script>

<style lang="scss">
.alert-provide-vin {
  font-size: 0.875rem;
  line-height: 1.4;
  a {
    text-underline-offset: 4px; //Per Devyn. This can't be documented in Figma so there is a comment with the Prototype mocks on the Quote page in Figma
    line-height: inherit;
  }
}

#multiple-vehicles-alert p {
  margin-bottom: 0 !important; // Overrides extra margin-bottom on alert body text
}
</style>