DigitalConsumer.ISS/src/layouts/coverage-statement/coverage-statement.vue

<template>
  <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm"  v-slot="{ meta }" >
      <div class="page-container-grouped-styles">
          <div class="fade-on-route-transition position-relative">
              <siteHeader cmsWidgetName="SiteHeaderWidget" />
              <div class="select-car">
                  <div class="container-fluid pb-2">
                      <div class="row px-3">
                          <div class="col">
                              <div class="select-car-form rounded pb-1">
                                  <textBlock
                                    cmsWidgetName="verifyingCoverageStatement"
                                    typeStyle="h5"
                                    justifyText="center"
                                    class="mt-4 mb-4"
                                    id="coverage-statement-text-block" />
                                  <div>
                                    <p v-html="continueWithSchedulingBodyText" class="mt-0 small" ></p>
                                  </div>
                                  <textBlock
                                    cmsWidgetName="whatHappensNextCopy"
                                    class="mt-4 mb-2 fw-bold"
                                    id="coverage-statement-text-block" />
                                  <div>
                                    <p class="small" v-html="bodyText" ref="coverageStatementBodyText"></p>
                                  </div>
                                  <steeringText  cmsWidgetName="MASteeringText" ></steeringText>
                                  
                              </div>
                              <siteFooter
                                cmsWidgetName="SiteFooterWidget"
                                :isForwardActionDisabled="!meta.valid"
                                @backClicked="navigateBack"
                                @forwardClicked="forwardButtonAction"
                                ref="siteFooter" />
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <recalModal ref="RecalModal" cmsWidgetName="RecalModal" />	
  </Form>
</template>
<script>

// Import Component
import baseFormMixin from '@/mixins/base-form-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 textBlock from "@/digital-components/text-block/text-block";
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue';
import steeringText from "@/iss-components/steering-text/steering-text.vue";
import { issPageValues } from "@/router/router-constants/issPage-values";
// Import Supporting Files
import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper';
import { settleAllPromises } from '@/helpers/layout-helper';
import { getDamageString } from '@/helpers/damage-helper.js';
import { useMainStore } from "@/store";
import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";

const store = useMainStore();

export default {
  name: 'coverage-statement',
  mixins: [baseFormMixin, vehicleQuestionsMixin],
  components: {
      siteFooter,
      siteHeader,
      siteSubHeader,
      Form,
      textBlock,
      recalModal,
      steeringText
  },
  data () {
    return {
        isITAC: false,
        deductible: "",
        policyVehicles: useMainStore().pageData(issPageValues.POLICY_VEHICLES)
    }
  },
  mounted() { 
    setupModalLinks(this);
    this.getPriceInfo();
  },
  computed: {
      bodyText() {
          if (useMainStore().order.damage.isRepair) {
              return this.unverifiedNonADASRepairBodyText;
          }
          else {
              let parts = useMainStore().order.lineItems.glassParts;

              // if ADAS, display ADASNextSteps
              if (parts.filter(part => part.requiresRecalibration).length > 0) {
                  return this.unverifiedADASNextStepsBodyText;
              }
              // if non-ADAS, display NonADASNextSteps
              else {
                  return this.unverifiedNonADASNextStepsBodyText;
              }
          }
      },
      continueWithSchedulingBodyText() {
        return this.getCmsContent("continueWithSchedulingCopy", "BodyText");
      },
      unverifiedADASNextStepsBodyText() {
        return this.getCmsContent("UnverifiedADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
      },
      unverifiedNonADASNextStepsBodyText() {
        return this.getCmsContent("UnverifiedNonADASNextStepsWidget", "BodyText").replaceAll("{custom:damage}", this.damageText);
      },
      unverifiedNonADASRepairBodyText() {
        return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText");
      },
      damageText() {
        var damageString = getDamageString();
        return damageString == "match" ? "" : damageString;
      },
      selectedVehiclePolicyInfo() {
        const matchingVehicle = this.policyVehicles.filter(
          (vehicle) => vehicle.vin === store.order.vehicle.vin
        )
        return matchingVehicle;
      },
      vehicleDeductible() {
        //console.log(this.selectedVehicle[0].coverages[0].deductible);
        const deductible = this.selectedVehiclePolicyInfo[0].coverages[0].deductible;
        //console.log(!this.selectedVehiclePolicyInfo[0].coverages[0]);
        return deductible;
      },
      isDeductibleZero() {
        return this.vehicleDeductible === 0;
      },
      coverageVerified() {
        const isCoverageVerified = store.order.payment.insuranceCoverage.isVerified;
        return isCoverageVerified;
      },
      verifiedNoComp() {
        if (!this.policyVehicles.coverages || this.policyVehicles.noCoverage === true) {
            return true;
        }
      },
      verifiedITAC() {
        this.getPriceInfo();
        return this.ITAC;
      },
      verifiedDeductible() {
        return !this.isITAC;
      },
      ADASReplace() {
        let parts = store.order.lineItems.glassParts;

        if (parts.filter(part => part.requiresRecalibration).length > 0) {
          return true;
        }
      },
      nonADASReplace() {
        return !this.ADASReplace;
      },
      nonADASRepair() {
        if (store.order.damage.isRepair) {
          return true;
        }
      }
  },
  async beforeRouteEnter(to, from, next) {
      // Call APIs
      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);
      });
  },
  methods: {
      arePagePrerequisitesValid() {
          if (useMainStore().order.vehicle.vin) {
              return true;
          }
          return false;
      },
      getPriceInfo() {
        const servicePrice = store.getPriceOrderItems();
  
        if (servicePrice > this.vehicleDeductible) {
          return this.isITAC = true;
        }
      },
      async forwardButtonAction() {
          return this.navigateForward();
      },
      navigateForward() {
          this.$router.navigate(
              this.navigationScenarios.CLICKED_FORWARD,
              this.$route
          );
      },
  },
};
</script>

<style lang="scss">
ol {
  margin-left: -1rem;
  margin-bottom:0;
  li {
      margin-bottom: .5rem;
      line-height: 1.5rem;
      a {
          line-height: 1.5rem;
          padding: 0;
      }
  }
}
#coverage-statement-text-block {
  color: $black;
}
p strong {
  color: $black;  
  font-weight: 500;
}
p.small{
    margin-bottom:0;
}
</style>