DigitalConsumer.FixMyGlass/src/layouts/quote/quote.vue

<template>
  <Form
  @submit="onSubmit"
  @invalid-submit="onInvalidSubmit"
  ref="theForm"
  v-slot="{ meta }"
  >
  <div class="page-container-grouped-styles">
    <funnelHeader cmsWidgetName="FunnelHeaderWidget" />
    <vehicleBanner cmsWidgetName="VehicleBannerWidget" :displayGenericVehicleImage=false />
    <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" />
    <div class="fade-on-route-transition sub-container make-tall">
      <textBlock
      cmsWidgetName="paymentServiceOptionsCopy"
      justifyText="center"
      typeStyle="small"
      class="mt-2 mb-5"
      />
      <cashOrInsuranceQuestion
            ref="cashOrInsurance"
            cmsWidgetName="CashOrInsuranceQuestionWidget"
            v-model="isInsuranceSelected"
            groupName="CashOrInsuranceQuestion"
          />
      <radioServicePackage/>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="caption"
      class="mt-4"
      />
      <h3 style="m-0">h1</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="h1"
      class="mt-4"
      />
      <h3 style="m-0">h2</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="h2"
      class="mt-4"
      />
      <h3 style="m-0">h3</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="h3"
      class="mt-4"
      />
      <h3 style="m-0">h4</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="h4"
      class="mt-4"
      />
      <h3 style="m-0">h5</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="h5"
      class="mt-4"
      />
      <h3 style="m-0">h6</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="h6"
      class="mt-4"
      />
      <h3 style="m-0">Body</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="body"
      class="mt-4"
      />
      <h3 style="m-0">Label</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="label"
      class="mt-4"
      />
      <h3 style="m-0">Small</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="small"
      class="mt-4"
      />
      <h3 style="m-0">Caption</h3>
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="caption"
      class="mt-4"
      />
      <funnel-footer
      cmsWidgetName="FunnelFooterWidget"
      :isForwardActionDisabled="!meta.valid"
      :isBackButtonHidden=shouldHideBackButton
      @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 radioServicePackage from "@/ux-components/radio-service-package/radio-service-package";
import cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
import textBlock from "@/common-components/text-block/text-block";
import store from "@/store";

import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { Form } from "vee-validate";


export default {
  name: "quote",
  async beforeRouteEnter(to, from, next) {
    // Call APIs
    const cmsContent = await fetchCmsContentForPage(to.query.fmgPage);

    // TODOS - modify as needed, just a rough sketch to place initializations

    // get supporting lineitems

    // get wiper and rain defense lineitems

    // Settle promises and get results

    // get price of supporting, rain defense & wipers, and parts

    // Settle pricing promise and get results


    // Call the "next" function to complete the transition to this page.
    next((vm) => {
      vm.setCmsContent(cmsContent);
      vm.isInsuranceSelected = vm.getDefaultisInsuranceSelectedValue();
    });
  },
  data(){
    return {
      pricingRequestResult: null,
      isInsurance: null,
    }
  },
  methods: {
    arePagePrerequisitesValid() {
      return store.getters.order.damage.isRepair || (store.getters.order.lineItems?.glassParts != null && store.getters.order.lineItems.glassParts.length > 0);
    },
    getDefaultisInsuranceSelectedValue() {
      var defaultisInsuranceSelectedValue = this.$store.getters.order.payment.isInsurance;
      if(defaultisInsuranceSelectedValue != null) {
        return defaultisInsuranceSelectedValue;
      } else {
        return this.economyPackagePrice > 600;
      }
    }
  },
  computed: {
    economyPackagePrice() {
      //TODO build out the pricing logic CSR-504
      return 0;
    },
    selectedChipCountValues: {
      get: function() {
        return this.modelValue;
      },
      set: function(newValue) {
        this.$emit("update:modelValue", newValue);
      },
    },
  },
  components: {
    funnelHeader,
    funnelFooter,
    vehicleBanner,
    funnelSubHeader,
    Form,
    radioServicePackage,
    textBlock,
    cashOrInsuranceQuestion
  },

};
</script>