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

<template>
  <Form
ref="theForm"
v-slot="{ meta }"
@submit="onSubmit"
@invalid-submit="onInvalidSubmit">
      <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
                                    id="coverage-statement-text-block"
                                    cmsWidgetName="verifyingCoverageStatement"
                                    typeStyle="h5"
                                    justifyText="center"
                                    class="mt-4 mb-4" />
                                  <div>
                                    <p
                                    class="mt-0 small"
                                    v-html="continueWithSchedulingBodyText"></p>
                                  </div>
                                  <textBlock
                                    id="coverage-statement-text-block"
                                    cmsWidgetName="whatHappensNextCopy"
                                    class="mt-4 mb-2 fw-bold" />
                                  <div>
                                    <p
                                    ref="coverageStatementBodyText"
                                    class="small"
                                    v-html="bodyText"></p>
                                  </div>
                                  <steeringText cmsWidgetName="MASteeringText"></steeringText>
                              </div>
                              <siteFooter
                                ref="siteFooter"
                                class="mt-5"
                                cmsWidgetName="SiteFooterWidget"
                                :isForwardActionDisabled="!meta.valid"
                                @backClicked="navigateBack"
                                @forwardClicked="forwardButtonAction" />
                          </div>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <recalModal
ref="RecalModal"
cmsWidgetName="RecalModal" />
  </Form>
</template>
<script>

// Import Component
import { Form } from 'vee-validate';
import siteFooter from '@/iss-components/site-footer/site-footer';
import siteHeader from '@/iss-components/site-header/site-header';
import textBlock from '@/digital-components/text-block/text-block';
import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal';
import steeringText from '@/iss-components/steering-text/steering-text';
// Import Supporting Files
import { fetchCmsContentForPage, setupModalLinks } from '@/helpers/cms-content-helper.js';
import { settleAllPromises } from '@/helpers/layout-helper.js';
import { getDamageString } from '@/helpers/damage-helper.js';
import { useMainStore } from '@/store/index.js';
import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
import baseFormMixin from '@/mixins/base-form-mixin.js';

export default {
    name: 'coverage-statement',
    components: {
        siteFooter,
        siteHeader,
        // eslint-disable-next-line vue/no-reserved-component-names
        Form,
        textBlock,
        recalModal,
        steeringText
    },
    mixins: [baseFormMixin, vehicleQuestionsMixin],
    async beforeRouteEnter(to, from, next) {
        // Call APIs
        const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);

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

        if (useMainStore().isClaimRegistrationRequired && !useMainStore().policy.noCoverage) {
            const registerClaimResponse = await useMainStore().registerClaim();
            promiseResultMap.push({
                resultKey: 'registerClaim',
                promise: registerClaimResponse
            });
        }

        const resultMap = await settleAllPromises(promiseResultMap);

        next((vm) => {
            vm.setCmsContent(resultMap.cmsContent);
        });
    },
    computed: {
        bodyText() {
            if (useMainStore().damage.isRepair) {
                return this.unverifiedNonADASRepairBodyText;
            }

            const parts = useMainStore().lineItems.glassParts;

            // if ADAS, display ADASNextSteps
            if (parts != null && parts.filter((part) =>
                part.requiresRecalibration).length > 0) {
                return this.unverifiedADASNextStepsBodyText;
            }
            // if non-ADAS, display NonADASNextSteps

            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() {
            const damageString = getDamageString();
            return damageString === 'match' ? '' : damageString;
        }
    },
    mounted() {
        setupModalLinks(this);
    },
    methods: {
        arePagePrerequisitesValid() {
            if (useMainStore().vehicle.vin) {
                return true;
            }
            return false;
        },

        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>