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

<template>
  <Form
    @submit="onSubmit"
    @invalidSubmit="onInvalidSubmit"
    v-slot="{ meta }"
  >
    <div class="page-container-grouped-styles">
      <siteHeader
        cmsWidgetName="SiteHeaderWidget"
      />
      <div class="fade-on-route-transition sub-container overflow-scroll  px-5">
        <textBlock
            cmsWidgetName="verifyingCoverageStatement"
            typeStyle="h5"
            justifyText="center"
            class="mt-0 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>
        <recalModal cmsWidgetName="RecalModal" />
        <siteFooter
          cmsWidgetName="SiteFooterWidget"
          :isForwardActionDisabled="!meta.valid"
          @backClicked="navigateBack"
          @forwardClicked="forwardButtonAction"
          ref="siteFooter"
        />
      </div>
    </div>
  </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 Supporting Files
import { fetchCmsContentForPage } 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";

export default {
  name: 'coverage-statement',
  mixins: [baseFormMixin, vehicleQuestionsMixin],
  components: {
    siteFooter,
    siteHeader,
    siteSubHeader,
    Form,
    textBlock,
    recalModal
  },
  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;
    },
  },
  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;
    },

    async forwardButtonAction() {
      return this.navigateForward();
    },

    navigateForward() {
      this.$router.navigate(
        this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT,
        this.$route
      );
    },
  },
};
</script>

<style lang="scss">
.overflow-scroll {    
    height: calc(100% - 168px);   
    overflow-X: hidden !important;   
}
ol {
    margin-left: -1rem;
      li {
          margin-bottom: .5rem;
      }
}
#coverage-statement-text-block {
    color: #000000;
}
p strong {
    color: #000000;
    font-weight: 500;
}
</style>