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"
          />
      <servicePackageQuestion
        ref="servicePackage"
        cashCmsWidgetName="CashServicePackageQuestionWidget"
        insuranceCmsWidgetName="InsuranceServicePackageQuestionWidget"
        v-model="selectedPackage"
        groupName="ServicePackageQuestion"
        :availableLineItems="availableLineItems"
        :isInsuranceSelected="isInsuranceSelected"
      />
      <textBlock
      cmsWidgetName="quoteDisclaimer"
      justifyText="left"
      typeStyle="caption"
      class="mt-4"
      />
      <modal
        cmsWidgetName="EstimateRainDefenseModal"
      />
      <modal
        cmsWidgetName="EstimateFrontWiperModal"
      />
      <modal
        cmsWidgetName="EstimateRearWiperModal"
      />
      <modal
        cmsWidgetName="EstimateRecalModal"
      />
      <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 cashOrInsuranceQuestion from "./cash-or-insurance-question/cash-or-insurance-question";
import servicePackageQuestion from "./service-package-question/service-package-question";
import textBlock from "@/common-components/text-block/text-block";
import modal from "@/common-components/modal/modal";
import baseMixin from "@/mixins/base-mixin.js";

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 availableLineItems

    // get wiper and rain defense availableLineItems

    // 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.availableLineItems = [
        {
          partNumber : "001",
          Description : "Windshield with Recal",
          partType : "Windshield",
          Quantity : "1",
          BasePartNumber : "001",
          Color : "Green",
          CanSafeliteRecalibrate: true,
          price : 350.22
        },
        {
          "partNumber": "SBB16",
          "description": "SAFELITE BEAM BLADE 16",
          "partType": "FRONT WIPER",
          "price": 32.64,
        },
        {
          "partNumber": "A DISPOSAL FEE",
          "partType" : "DISPOSAL FEE",
          "price" : 15.00,
        },
        {
          "partNumber": "SBB26",
          "description": "SAFELITE BEAM BLADE 26",
          "partType": "FRONT WIPER",
          "price": 53.04,
        },
        {
          "partNumber": "SBBR12A",
          "description": "SAFELITE REAR BLADE 12A",
          "partType": "REAR WIPER",
          "price": 24.48,
        },
        {
          "partNumber": "RAIN DEFENSE",
          "description": null,
          "partType": "RAIN DEFENSE",
          "price": 35.50,
        },
        {
          partNumber : "RECAL STATIC",
          Description : "Recalibration",
          partType : "recalibration",
          Quantity : "1",
          price : 150.00,
        },
      ];
      vm.isInsuranceSelected = vm.getDefaultIsInsuranceSelectedValue();
    });
  },
  data(){
    return {
      pricingRequestResult: null,
      isInsuranceSelected: null,
      selectedPackage: null,
      availableLineItems: null,
    }
  },
  methods: {
    arePagePrerequisitesValid() {
      return true;
      //return store.getters.order.damage.isRepair || (store.getters.order.lineItems?.glassParts != null && store.getters.order.lineItems.glassParts.length > 0);
    },
    getDefaultIsInsuranceSelectedValue() {
      const defaultIsInsuranceSelectedValue = this.$store.getters.order.payment.isInsurance;
      if(defaultIsInsuranceSelectedValue != null) {
        return defaultIsInsuranceSelectedValue;
      } else {
        return this.availableLineItems ? baseMixin.methods.getTierOnePackagePrice(this.availableLineItems) > 500 : null;
      }
    },
  },
  components: {
    funnelHeader,
    funnelFooter,
    vehicleBanner,
    funnelSubHeader,
    Form,
    textBlock,
    cashOrInsuranceQuestion,
    servicePackageQuestion,
    modal,
  },

};
</script>