DigitalConsumer.FixMyGlass/src/layouts/estimate/estimate.vue

<template>
  <Form
    @submit="onSubmit"
    @invalid-submit="onInvalidSubmit"
    ref="theForm"
    v-slot="{ meta }"
  >
    <div class="page-container-grouped-styles">
      <loadingModal ref="loadingModal"/>
      <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
      <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
      <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
      <div class="fade-on-route-transition sub-container make-tall">
        <div v-if="!isRepair">
          <alert
            class="vinLookupMethodHeading"
            cmsWidgetName="AlertVinLookupQuestion"
            alertClass=""
          />
          <buttonQuestion
            cmsWidgetName="VinLookupMethod"
            :answers="answersFromCms"
            groupName="vinLookupMethodOption"
            buttonType="listButton"
            v-model="selectedVinLookupMethod"
            isRequired
            validationRules="option-required"
          />
        </div>
        <div v-if="isRepair">
          <alert
            class="my-4"
            cmsWidgetName="AlertQuoteReady"
            alertClass="alert-info"
            v-bind:isDismissible="false"
          />
          <div class="row my-2">
            <div class="col">
              <textboxQuestion
                cmsWidgetName="ServiceZipQuestionWidget"
                v-model="serviceZipCode"
                inputId="serviceZipCode"
                mask="#####"
                isRequired
                disableAutoFill
                validationRules="zip-required|zip-format"
              />
            </div>
          </div>
          <div class="row mt-2">
            <div class="col">
              <textboxQuestion
                cmsWidgetName="EmailAddressQuestionWidget"
                v-model="emailAddress"
                inputId="emailAddress"
                isRequired
                disableAutoFill
                validationRules="email-address-required|email-address-format"
              />
            </div>
          </div>
          <div class="row mb-2">
            <div class="col">
              <textBlock 
                cmsWidgetName="QuoteEmailTextBlockWidget" 
                typeStyle="caption"
              />
            </div>
          </div>
          <alert ref="alertInvalidZip"
            v-if="displayInvalidZipAlert"
            class="my-4"
            cmsWidgetName="AlertInvalidZipWidget"
            alertClass="alert-danger"
            v-bind:isDismissible="false"
          />
          <alert
            class="my-4"
            :manualHeadline="AlertNonServiceableZipHeader"
            :manualCopy="AlertNonServiceableZipBody"
            v-model="customAlertData"
            v-if="displayNonServiceableZipAlert"
            alertClass="alert-danger"
          />          
        </div>
        <funnel-footer
          cmsWidgetName="FunnelFooterWidget"
          ref="funnelFooter"
          :isForwardActionDisabled="!meta.valid"
          @isDisabled="!meta.valid"
          @back-clicked="backButtonAction"
          @ForwardClicked="forwardButtonAction"
        />
      </div>
    </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 buttonQuestion from "@/common-components/button-question/button-question";
import alert from "@/ux-components/alert/alert";
import textboxQuestion from "@/common-components/textbox-question/textbox-question";
import loadingModal from '@/common-components/loading-modal/loading-modal.vue';
import textBlock from "@/common-components/text-block/text-block";

//Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import { required, regex } from "@/helpers/validation-rules";
import { errorMessages } from "@/constants/error-messages";
import { Form, defineRule } from "vee-validate";
import store from "@/store";
import { storeActions } from "@/constants/store-actions";
import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";

// Define Validation Rules
defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
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("option-required", required(errorMessages.OPTION_REQUIRED));

export default {
  name: "estimate",
  data() {
    return {
      selectedVinLookupMethod: "",
      serviceZipCode: this.getZipFromStore(),
      emailAddress: this.getEmailFromStore(),
      displayInvalidZipAlert: false,
      displayNonServiceableZipAlert: false,
    };
  },
  
  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);
    next((vm) => {
      vm.setCmsContent(resultMap.cmsContent);
    });
  },
  methods: {
    getZipFromStore(){
      return store.getters.order.serviceLocation.zipCode;
    },
    getEmailFromStore(){
      return store.getters.order.customer.emailAddress;
    },
    arePagePrerequisitesValid() {
      return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
    },
    backButtonAction() {
      // route to move backwards
      this.$router.navigateWithoutSaving(
        this.navigationScenarios.CLICKED_BACK, 
        this.$route
      );
    },
    async forwardButtonAction() {
      if (this.isRepair){
          const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
          //todo: validation
          await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
          await this.dispatchStoreAction(storeActions.SAVE_SERVICE_LOCATION, {
            zipCode: this.serviceZipCode,
            state: zipCodeData.state,
          }, false);

          if (!zipCodeData.isZipValid) {
            this.displayInvalidZipAlert = true;
            return this.$refs.funnelFooter.removeLoader();
          }
          this.displayInvalidZipAlert = false;

          if (!zipCodeData.isZipServiceable) {
            this.displayNonServiceableZipAlert = true;
            return this.$refs.funnelFooter.removeLoader();
          }
          this.displayNonServiceableZipAlert = false;

          this.$refs.loadingModal.showModal();
          navigateToHeritageFunnel();
      }

      if (this.selectedVinLookupMethod === vinLookupMethodSelections.MANUALVIN) {
        await this.dispatchStoreAction(storeActions.CLEAR_VIN);
        return this.$router.navigateWithSaving(
          this.navigationScenarios.SELECTED_MANUAL_VIN,
          this.$route
        );
      }
      if (this.selectedVinLookupMethod === vinLookupMethodSelections.LICENSEPLATE) {
        return this.$router.navigateWithSaving(
          this.navigationScenarios.SELECTED_LICENSE_PLATE,
          this.$route
        ); 
      }
      if (this.selectedVinLookupMethod === vinLookupMethodSelections.HOMEADDRESS) {
        return this.$router.navigateWithSaving(
          this.navigationScenarios.SELECTED_HOME_ADDRESS,
          this.$route
        );
      }
    },
  },
  computed: {
    AlertNonServiceableZipHeader(){
      console.log(this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText"));
      return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll("{custom:serviceZip}", this.serviceZipCode);
    },
    AlertNonServiceableZipBody(){
      return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
    },
    questionText() {
      return this.getCmsContent("VinLookupMethod", "QuestionText");
    },
    answersFromCms() {
      return this.getCmsContent("VinLookupMethod", "Answers");
    },
    isRepair() {
      return store.getters.damage.isRepair;
    },
  },
  watch: {
    serviceZipCode() {
      this.displayNonServiceableZipAlert = false;
    },
  },  
  components: {
    funnelHeader,
    vehicleBanner,
    funnelSubHeader,
    funnelFooter,
    buttonQuestion,
    Form,
    alert,
    textboxQuestion,
    loadingModal,
    textBlock
  },
};
</script>

<style lang="scss">
  .vinLookupMethodHeading p {
    font-size: 1rem;
    font-weight: 500; 
    color: $black; 
  }
  div .current_car_info-text {
    padding-bottom: 16px; 
  }
</style>