Add first WIP

src/layouts/service-zip/service-zip.vue

@@ -0,0 +1,288 @@
+<template>
+    <!-- TODO: UPDATE -->
+    <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm" v-slot="{ meta }">
+        <loadingModal ref="loadingModal" />
+        <div class="container-fluid page-container-grouped-styles">
+            <div class="row justify-content-center">
+                <div class="col-md-6">
+                    <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
+                </div>
+            </div>
+            <div class="row justify-content-center">
+                <div class="col-md-6 col-xl-4">
+                    <vehicleBanner cmsWidgetName="VehicleBannerWidget" />
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
+                    <div>
+                        <textboxQuestion
+                            class="mb-4"
+                            cmsWidgetName="ServiceZipQuestionWidget"
+                            v-model="serviceZipCode"
+                            inputId="serviceZipCode"
+                            mask="#####"
+                            isRequired
+                            validationRules="zip-required|zip-format" />
+
+                        <textboxQuestion
+                            class="mb-0"
+                            cmsWidgetName="EmailAddressQuestionWidget"
+                            v-model="emailAddress"
+                            inputId="emailAddress"
+                            :isRequired="!IsEmailOptional"
+                            disableAutoFill
+                            :validationRules="EmailValidationRules"
+                            :addOptionalText="IsEmailOptional" />
+                        <textBlock cmsWidgetName="QuoteEmailTextBlockWidget" typeStyle="caption" />
+
+                        <alert
+                            ref="alertInvalidZip"
+                            v-if="displayInvalidZipAlert"
+                            class="my-4"
+                            cmsWidgetName="AlertInvalidZipWidget"
+                            alertClass="alert-danger"
+                            v-bind:isDismissible="false" />
+
+                        <alert
+                            class="my-4"
+                            :manualHeadline="AlertNonServiceableZipHeader"
+                            :manualCopy="AlertNonServiceableZipBody"
+                            v-model="customAlertData"
+                            v-if="displayNonServiceableZipAlert"
+                            alertClass="alert-danger" />
+
+                        <navbar
+                            cmsWidgetName="FunnelFooterWidget"
+                            ref="navbar"
+                            :isForwardActionDisabled="!meta.valid"
+                            @back-clicked="backButtonAction"
+                            @ForwardClicked="forwardButtonAction" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    </Form>
+</template>
+
+<script>
+// Components
+import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
+import navbar from "@/fmg-components/nav-bar/nav-bar";
+import vehicleBanner from "@/fmg-components/vehicle-banner/vehicle-banner";
+import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import buttonQuestion from "@/digital-components/button-question/button-question";
+import alert from "@/ux-components/alert/alert";
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+import textBlock from "@/digital-components/text-block/text-block";
+import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+
+//Supporting Files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { required, regex } from "@/helpers/validation-rules";
+import { errorMessages } from "@/constants/error-messages";
+import { Form, defineRule } from "vee-validate";
+import store from "@/store";
+import { storeActions } from "@/constants/store-actions";
+import { vinLookupMethodSelections } from "@/constants/vin-lookup-method-selections.js";
+import {
+    skipVinLookup,
+    skipVinLookupNotRepair,
+} from "@/helpers/heritage-integration/navigation-helper";
+import vinPagesMixin from "@/mixins/vin-pages-mixin";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import { saveSession } from "@/helpers/heritage-integration/order-helper.js";
+import baseMixin from "@/mixins/base-mixin.js";
+import { queryStrings } from "@/constants/query-strings";
+
+// Define Validation Rules
+defineRule("zip-required", required(errorMessages.SERVICE_ZIP_REQUIRED));
+defineRule("zip-format", regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, errorMessages.SERVICE_ZIP_FORMAT));
+defineRule("email-address-required", required(errorMessages.EMAIL_ADDRESS_REQUIRED));
+defineRule(
+    "email-address-format",
+    regex(
+        /^([a-zA-Z0-9_\-.+]+)@([a-zA-Z0-9-]+)\.([a-zA-Z]{2,})$/,
+        errorMessages.EMAIL_ADDRESS_FORMAT
+    )
+);
+defineRule("option-required", required(errorMessages.OPTION_REQUIRED));
+
+export default {
+    name: "service-zip",
+    mixins: [vinPagesMixin],
+    data() {
+        return {
+            serviceZipCode: this.getZipFromStore() ?? this.$route.query.zipcode,
+            emailAddress: this.getEmailFromStore(),
+            displayInvalidZipAlert: false,
+            displayNonServiceableZipAlert: false,
+        };
+    },
+
+    async beforeRouteEnter(to, from, next) {
+        //Call APIs
+        const cmsContentPromise = fetchCmsContentForPage(to.query.fmgPage);
+
+        const queryString = window.location.search;
+        const urlParams = new URLSearchParams(queryString);
+        const lowerCaseParams = new URLSearchParams();
+        for (const [name, value] of urlParams) {
+            lowerCaseParams.append(name.toLowerCase(), value);
+        }
+
+        const zip = lowerCaseParams.get(queryStrings.ZIP_CODE)
+            ? lowerCaseParams.get(queryStrings.ZIP_CODE)
+            : store.getters.order.serviceLocation.zipCode;
+
+        //Settle promises and get results
+        const promiseResultMap = [
+            {
+                resultKey: "cmsContent",
+                promise: cmsContentPromise,
+            },
+        ];
+
+        const resultMap = await settleAllPromises(promiseResultMap);
+
+        next((vm) => {
+            vm.setCmsContent(resultMap.cmsContent);
+        });
+    },
+    methods: {
+        getZipFromStore() {
+            return store.getters.order.serviceLocation.zipCode;
+        },
+        getEmailFromStore() {
+            return store.getters.order.customer.emailAddress;
+        },
+        arePagePrerequisitesValid() {
+            // TODO: REASSESS
+            return store.getters.damage.isRepair || store.getters.damage.glassToReplace?.length > 0;
+        },
+        backButtonAction() {
+            // route to move backwards
+            this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
+        },
+        async forwardButtonAction() {
+            const zipCodeData = await this.getZipCodeData(this.serviceZipCode);
+            await this.dispatchStoreAction(storeActions.SAVE_EMAIL, this.emailAddress, false);
+            await this.dispatchStoreAction(
+                storeActions.SAVE_SERVICE_ZIP_CODE_INFO,
+                {
+                    zipCode: this.serviceZipCode,
+                    state: zipCodeData.state,
+                    zipCodeCtu: zipCodeData.zipCodeCtu,
+                },
+                false
+            );
+
+            if (!zipCodeData.isValid) {
+                this.displayInvalidZipAlert = true;
+                return this.$refs.navbar.removeLoader();
+            }
+            this.displayInvalidZipAlert = false;
+
+            if (!zipCodeData.isServiceable) {
+                this.displayNonServiceableZipAlert = true;
+                return this.$refs.navbar.removeLoader();
+            }
+            this.displayNonServiceableZipAlert = false;
+
+            const payment = this.$store.getters.payment;
+            const policy = this.$store.getters.policy;
+
+            const vehicleChangedDuringPolicyLookupInHeritage =
+                payment.isInsurance &&
+                payment.insuranceCoverage.coverageStatus &&
+                policy.policyNumber !== "";
+
+            if (vehicleChangedDuringPolicyLookupInHeritage) {
+                navigateToHeritageFunnel({
+                    shouldSaveSession: true,
+                    pageNameToLog: "estimate",
+                });
+            } else if (this.$store.getters.order.referralNumber?.length === 6) {
+                await this.navigateForwardWithSingleCarMatch();
+            } else if (this.isRepair) {
+                const supportingItemsPromise = await this.dispatchStoreActionWithLogging(
+                    storeActions.GET_SUPPORTING_ITEMS,
+                    null,
+                    "estimate"
+                );
+
+                const promiseResultMap = [
+                    {
+                        resultKey: "supportingItems",
+                        promise: supportingItemsPromise,
+                    },
+                ];
+
+                const resultMap = await settleAllPromises(promiseResultMap);
+
+                this.dispatchStoreAction(
+                    this.storeActions.SAVE_SUPPORTING_ITEMS,
+                    resultMap.supportingItems,
+                    false
+                );
+
+                // call saveSession here - navigateWithSaving saves too late in the flow
+                await saveSession({ pageNameToLog: "estimate" });
+                return this.$router.navigateWithSaving(
+                    this.navigationScenarios.CLICKED_FORWARD_WITH_NO_QUESTIONS,
+                    this.$route
+                );
+            } else {
+                // if we're skipping the vin-lookup but it's not a repair, we still need to get the parts
+                await this.navigateForwardWithSingleCarMatch();
+            }
+        },
+    },
+    computed: {
+        AlertNonServiceableZipHeader() {
+            return this.getCmsContent("AlertNonServiceableZipWidget", "HeadlineText").replaceAll(
+                "{custom:serviceZip}",
+                this.serviceZipCode
+            );
+        },
+        AlertNonServiceableZipBody() {
+            return this.getCmsContent("AlertNonServiceableZipWidget", "BodyText");
+        },
+        isRepair() {
+            return store.getters.damage.isRepair;
+        },
+        alertInfo() {
+            return this.skipVinNotRepair ? "AlertQuoteVinOptional" : "AlertQuoteReady";
+        },
+    },
+    watch: {
+        serviceZipCode() {
+            this.displayNonServiceableZipAlert = false;
+        },
+    },
+    components: {
+        funnelHeader,
+        vehicleBanner,
+        funnelSubHeader,
+        navbar,
+        buttonQuestion,
+        Form,
+        alert,
+        textboxQuestion,
+        textBlock,
+        loadingModal,
+    },
+};
+</script>
+
+<style lang="scss">
+.vinlookupquestion p {
+    margin-bottom: 0;
+}
+.vinlookupquestion strong {
+    font-weight: 500;
+    color: $black;
+}
+.vinlookupquestion p:nth-child(2) {
+    font-size: 0.875rem;
+    margin-bottom: 1rem;
+}
+</style>

src/router/router-constants/fmgPage-values.js

@@ -9,6 +9,7 @@ const fmgPageValues = {
     CAPABILITY_QUESTIONS: "capability-questions",
     LICENSE_PLATE_LOOKUP: "license-plate-lookup",
     ESTIMATE: "estimate",
+    SERVICE_ZIP: "service-zip",
     ADDRESS_VEHICLES: "address-vehicles",
     QUOTE: "quote",
     INSURANCE_COMPANY: "insurance-company",

src/router/router-constants/navigation-scenarios.js

@@ -21,11 +21,13 @@ const navigationScenarios = {
     CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE:
         "CLICKED_FORWARD_WITH_REPLACE_AND_VERIFIED_INSURANCE",
     CLICKED_FORWARD_WITHOUT_VIN: "CLICKED_FORWARD_WITHOUT_VIN",
+    CLICKED_FORWARD_WITH_SKIP_VIN: "CLICKED_FORWARD_WITH_SKIP_VIN",
     CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES: "CLICKED_FORWARD_WITH_MULTIPLE_VEHICLES",
     SELECTED_VIN_WITH_MISMATCHED_GLASS: "SELECTED_VIN_WITH_MISMATCHED_GLASS",
     SELECTED_MANUAL_VIN: "SELECTED_MANUAL_VIN",
     SELECTED_LICENSE_PLATE: "SELECTED_LICENSE_PLATE",
     SELECTED_HOME_ADDRESS: "SELECTED_HOME_ADDRESS",
+    SELECTED_NO_VIN: "SELECTED_NO_VIN",
     CLICKED_FORWARD_WITH_NO_QUESTIONS: "CLICKED_FORWARD_WITH_NO_QUESTIONS",
     CLICKED_VIN_RETRY: "CLICKED_VIN_RETRY",
 

src/router/router-constants/routing-table.js

@@ -27,7 +27,7 @@ const routingTable = function (store) {
                 },
                 {
                     scenario: navigationScenarios.CLICKED_FORWARD_WITHOUT_VIN,
-                    destinationFmgPageValue: fmgPageValues.ESTIMATE,
+                    destinationFmgPageValue: fmgPageValues.SERVICE_ZIP,
                 },
                 {
                     scenario: