Merge pull request #3161 from Safelite/feature/CASH-612

CASH-612: Policy vehicle page

src/constants/insurance.js

@@ -79,6 +79,9 @@ export function coverageTypeEnum(strCoverageType) {
     }
 }
 
+export const parentAccountNumbers = {
+    CONNECT: "560636",
+};
 export const NON_MANAGED_SHOW_CLAIM_NUMBER_PARENTS = [
     { name: "KentuckyFarmBureau", value: "223499" },
 ];

src/layouts/policy-vehicle/policy-vehicle.spec.js

@@ -50,11 +50,18 @@ function setupMocks() {
         FunnelHeaderWidget: { Text: "Header" },
         FunnelSubHeaderWidget: { Text: "Subheader" },
         FunnelFooterWidget: { Text: "Footer" },
+        VehicleNotListedWidget: { Text: "Vehicle Not Listed" },
+        CancelVerificationWidget: { Text: "Cancel Verification" },
+        AmFamDisclaimerWidget: { Text: "Disclaimer" },
     };
 
     fetchCmsContentForPage.mockResolvedValue(mockCmsContent);
     settleAllPromises.mockResolvedValue({ cmsContent: mockCmsContent });
 
+    const getCmsContentMock = jest.fn().mockImplementation((widgetName, cmsFieldName) => {
+        return mockCmsContent[widgetName][cmsFieldName];
+    });
+
     const mountOptions = getMountOptions({
         route: { name: "policy-vehicle", query: {}, params: {} },
         router: {
@@ -64,7 +71,13 @@ function setupMocks() {
         },
     });
 
+    mountOptions.global = mountOptions.global || {};
+    mountOptions.global.mocks = {
+        ...(mountOptions.global.mocks || {}),
+        getCmsContent: getCmsContentMock,
+    };
+
     const wrapper = shallowMount(policyVehicle, mountOptions);
 
-    return { wrapper };
+    return { wrapper, getCmsContentMock };
 }

src/layouts/policy-vehicle/policy-vehicle.vue

@@ -4,16 +4,31 @@
         <div class="container">
             <div class="row">
                 <div class="col-12 col-md-10 col-lg-8 col-xl-7">
-                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" />
-                    <!--
-                            ... Page code goes here.
-                    -->
+                    <funnelSubHeader class="pb-4" cmsWidgetName="FunnelSubHeaderWidget" alignLeft />
+
+                    <buttonMain
+                        id="btn-vehicle-not-listed"
+                        :buttonText="vehicleNotListedQuestionText"
+                        :suppressLoader="true"
+                        class="mb-3"
+                        @click-event="forwardButtonAction" />
+
+                    <textLink
+                        class="pt-3"
+                        useLoadingModal
+                        linkType="text"
+                        href="javascript:void(0)"
+                        :text="cancelVerificationCopy"
+                        @click-event="cancelVerificationAction" />
+
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
                         :isForwardActionDisabled="!meta.valid"
                         @back-clicked="backButtonAction"
                         @ForwardClicked="forwardButtonAction" />
+
+                    <div v-if="showAmFamDisclaimer" v-html="amFamDisclaimerWidget"></div>
                 </div>
             </div>
         </div>
@@ -24,6 +39,11 @@
 import funnelHeader from "@/fmg-components/funnel-header/funnel-header";
 import navbar from "@/fmg-components/nav-bar/nav-bar";
 import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header";
+import store from "@/store";
+import buttonMain from "@/ux-components/button-main/button-main";
+import textLink from "@/ux-components/text-link/text-link.vue";
+import { parentAccountNumbers } from "@/constants/insurance";
+
 import { Form } from "vee-validate";
 
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -40,6 +60,8 @@ export default {
         funnelHeader,
         navbar,
         funnelSubHeader,
+        textLink,
+        buttonMain,
     },
     // Ensure CMS content is fetched during route navigation without depending on `to`/`from`
     async beforeRouteEnter(to, from, next) {
@@ -57,7 +79,34 @@ export default {
         });
     },
 
+    computed: {
+        vehicleNotListedQuestionText() {
+            return this.getCmsContent("VehicleNotListedWidget", "Text");
+        },
+        cancelVerificationCopy() {
+            return this.getCmsContent("CancelVerificationWidget", "Text");
+        },
+        amFamDisclaimerWidget() {
+            return this.getCmsContent("AmFamDisclaimerWidget", "Text");
+        },
+        showAmFamDisclaimer() {
+            return this.parentAccountNumberFromStore() === this.parentAccountNumbers.CONNECT;
+        },
+        parentAccountNumbers() {
+            return parentAccountNumbers;
+        },
+    },
+
     methods: {
+        parentAccountNumberFromStore() {
+            return store.getters.order?.payment?.parentAccountNumber;
+        },
+        cancelVerificationAction() {
+            this.$router.navigateWithoutSaving(
+                this.navigationScenarios.CLICKED_CANCEL_VERIFICATION,
+                this.pageName
+            );
+        },
         backButtonAction() {
             this.$router.navigateWithoutSaving(
                 this.navigationScenarios.CLICKED_BACK,
@@ -76,3 +125,10 @@ export default {
     },
 };
 </script>
+
+<style lang="scss" scoped>
+#btn-vehicle-not-listed {
+    background-color: $blue;
+    color: $white;
+}
+</style>

src/router/constants/navigation-scenarios.js

@@ -12,6 +12,7 @@ const navigationScenarios = {
     CLICKED_FORWARD: "CLICKED_FORWARD",
     CLICKED_FORWARD_WITH_CASH: "CLICKED_FORWARD_WITH_CASH",
     CLICKED_FORWARD_WITH_INSURANCE: "CLICKED_FORWARD_WITH_INSURANCE",
+    CLICKED_CANCEL_VERIFICATION: "CLICKED_CANCEL_VERIFICATION",
 
     // Bailout
     BAILOUT: "BAILOUT",

src/router/constants/routing-table.js

@@ -483,6 +483,10 @@ const routingTable = function () {
                     scenario: navigationScenarios.CLICKED_FORWARD,
                     destinationPageData: routeData.POLICY_DRIVER,
                 },
+                {
+                    scenario: navigationScenarios.CLICKED_CANCEL_VERIFICATION,
+                    destinationPageData: routeData.INSURANCE_COMPANY,
+                },
             ],
         },
         {