WIP isolate autocomplete component.

src/layouts/insurance-company/insurance-company-question.vue

@@ -0,0 +1,184 @@
+<template>
+    <textboxQuestion
+        v-model="parentAccountNumber"
+        customInputId="autocomplete"
+        class="mb-4 mt-5"
+        cmsWidgetName="InsuranceCoQuestionWidget"
+        includeSearchIcon />
+</template>
+
+<script>
+// Components
+import textboxQuestion from "@/digital-components/textbox-question/textbox-question";
+
+// Supporting files
+import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
+import { settleAllPromises } from "@/helpers/layout-helper";
+import { storeActions } from "@/constants/store-actions";
+import { Form, defineRule } from "vee-validate";
+import baseMixin from "@/mixins/base-mixin.js";
+import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
+import $ from "jquery";
+
+// MAPPNG
+const termMapping = [
+    {
+        term: "1ST",
+        altTerm: "FIRST",
+    },
+    {
+        term: "FIRST",
+        altTerm: "1ST",
+    },
+    {
+        term: "AAA",
+        altTerm: "American",
+    },
+];
+
+export default {
+    name: "insurance-company-question",
+    props: {
+        originalList: Array,
+    },
+    // data() {
+    //     return {
+    //         searchableInsuranceCompanyList: [],
+    //     }
+    // },
+    computed: {
+        searchableInsuranceCompanyList() {
+
+            return this.originalList.map(
+                (insuranceCompany) => {
+                    insuranceCompany.altTerms = "";
+
+                    termMapping.forEach((matchingTerm) => {
+                        if (
+                            insuranceCompany.accountName
+                                .toUpperCase()
+                                .includes(matchingTerm.term.toUpperCase())
+                        ) {
+                            insuranceCompany.altTerms =
+                                insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " ";
+                        }
+                    });
+
+                    return insuranceCompany;
+                }
+            );
+        }
+    },
+    methods: {
+        findMatches(request, response) {
+            const matches = [];
+            const term = request?.term?.toUpperCase();
+            this.searchableInsuranceCompanyList.forEach((company, index) => { 
+                if (
+                    company.accountName.indexOf(term) !== -1 ||
+                    company.altTerms.indexOf(term) !== -1
+                ) {
+                    matches.push(company.accountName);
+                }
+            });
+            console.log("matches: ", matches);
+            response(matches);
+        },
+        selectParentAccountNumber(parentAccountName) {
+            if (!this.insuranceCompanyList) {
+                console.error("No insurance companies found");
+                return;
+            }
+
+            var selectedItem = this.insuranceCompanyList.filter((item) => {
+                return item.accountName === parentAccountName;
+            });
+
+            if (selectedItem) {
+                this.selectedParentAccount = selectedItem[0].parentAccountNumber;
+            } else {
+                console.error("Error locating " + parentAccountName);
+            }
+        },
+    },
+    mounted() {
+        const select = this.selectParentAccountNumber;
+        setTimeout(() => {
+            $("#autocomplete").autocomplete({
+                source: this.findMatches,
+                position: {
+                    my: "left top+6",
+                },
+                minLength: 0, // Necessary to display menu when clearing input
+
+                // Bold matching letters as you type in the input
+                search: function (event, ui) {
+                    setTimeout(() => {
+                        let w = $(this).autocomplete("widget").find("div");
+                        let regExpString = "(" + this.value + ")";
+                        let re = new RegExp(regExpString, "i");
+                        w.html((i, html) =>
+                            html.replace(re, "<span style='font-weight: bold;'>$1</span>")
+                        );
+                    }, 5);
+                },
+                select: function (event, ui) {
+                    select(ui.item.value);
+                },
+            });
+        }, 0);
+
+        console.log("searchableInsuranceCompanyList: ", this.searchableInsuranceCompanyList);
+    },
+    components: {
+        textboxQuestion,
+    },
+};
+</script>
+
+<style lang="scss">
+ul {
+    &.ui-autocomplete {
+        position: absolute;
+        list-style-type: none;
+        margin: 0;
+        padding: 0.25rem;
+        background: $white;
+        border: 1px solid $gray;
+        border-radius: 0.25rem;
+        height: auto;
+        max-height: 50%;
+        overflow: auto;
+        li {
+            &:hover,
+            .ui-state-active {
+                background-color: $gray-100;
+                cursor: pointer;
+            }
+            .ui-menu-item-wrapper {
+                border: 1px solid transparent;
+                border-radius: 2px;
+                padding-left: 0.25rem;
+                span {
+                    font-weight: 600;
+                }
+                &.ui-state-active {
+                    border: 1px solid $gray-200;
+                    border-radius: 2px;
+                    font-weight: 600;
+                }
+            }
+        }
+    }
+}
+.ui-helper-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+</style>

src/layouts/insurance-company/insurance-company.vue

@@ -10,12 +10,17 @@
             <div class="row justify-content-center">
                 <div class="col-md-6 col-xl-4">
                     <funnelSubHeader cmsWidgetName="FunnelSubHeaderWidget" class="mt-4" />
-                    <textboxQuestion
+
-                        v-model="selectedQuery"
+                    <insurance-company-question
-                        customInputId="autocomplete"
+                    v-model="parentAccountNumber"
-                        class="mb-4 mt-5"
+                    :originalList="originalList" />
-                        cmsWidgetName="InsuranceCoQuestionWidget"
+
-                        includeSearchIcon />
+                    <!-- 
+                    <insurance-company-question
+                    v-model="parentAccountNumber"
+                    :searchableInsuranceCompanyList="searchableInsuranceCompanyList"
+                    :originalList="originalList" /> 
+                    -->
 
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
@@ -34,8 +39,8 @@
 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 textboxQuestion from "@/digital-components/textbox-question/textbox-question";
 import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
+import insuranceCompanyQuestion from "@/layouts/insurance-company/insurance-company-question";
 
 // Supporting files
 import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
@@ -46,23 +51,6 @@ import baseMixin from "@/mixins/base-mixin.js";
 import { navigateToHeritageFunnel } from "@/helpers/heritage-integration/navigation-helper";
 
 import store from "@/store";
-import $ from "jquery";
-
-// MAPPNG
-const termMapping = [
-    {
-        term: "1ST",
-        altTerm: "FIRST",
-    },
-    {
-        term: "FIRST",
-        altTerm: "1ST",
-    },
-    {
-        term: "AAA",
-        altTerm: "American",
-    },
-];
 
 export default {
     name: "insurance-company",
@@ -89,55 +77,30 @@ export default {
 
         const resultMap = await settleAllPromises(promiseResultMap);
 
-        const searchableInsuranceCompanyList = resultMap.insuranceCompanyList.map(
+        
-            (insuranceCompany) => {
+        console.log("originalList: ", resultMap.insuranceCompanyList);
-                insuranceCompany.altTerms = "";
-
-                termMapping.forEach((matchingTerm) => {
-                    if (
-                        insuranceCompany.accountName
-                            .toUpperCase()
-                            .includes(matchingTerm.term.toUpperCase())
-                    ) {
-                        insuranceCompany.altTerms =
-                            insuranceCompany.altTerms + matchingTerm.altTerm?.toUpperCase() + " ";
-                    }
-                });
-
-                return insuranceCompany;
-            }
-        );
 
         // Call the "next" function to complete the transition to this page.
         next((vm) => {
             vm.setCmsContent(resultMap.cmsContent);
             vm.originalList = resultMap.insuranceCompanyList;
-            vm.searchableInsuranceCompanyList = searchableInsuranceCompanyList;
         });
     },
+    //Added
     data() {
         return {
+            parentAccountNumber: this.selectedParentAccountNumber(),
             searchableInsuranceCompanyList: [],
             originalList: [],
-        };
+        }
     },
     methods: {
+        selectedParentAccountNumber() {
+            return store?.order?.payment?.parentAccountNumber;
+        },
         arePagePrerequisitesValid() {
             return store.getters.vehicle.carId !== null;
         },
-        findMatches(request, response) {
-            const matches = [];
-            const term = request?.term?.toUpperCase();
-            this.originalList.forEach((company, index) => {
-                if (
-                    company.accountName.indexOf(term) !== -1 ||
-                    company.altTerms.indexOf(term) !== -1
-                ) {
-                    matches.push(company.accountName);
-                }
-            });
-            response(matches);
-        },
         backButtonAction() {
             // Go back to Quote page
             this.$router.navigateWithoutSaving(this.navigationScenarios.CLICKED_BACK, this.$route);
@@ -155,102 +118,14 @@ export default {
                 loadingModal: this.$refs.loadingModal,
             });
         },
-        selectParentAccountNumber(parentAccountName) {
-            if (!this.insuranceCompanyList) {
-                console.error("No insurance companies found");
-                return;
-            }
-
-            var selectedItem = this.insuranceCompanyList.filter((item) => {
-                return item.accountName === parentAccountName;
-            });
-
-            if (selectedItem) {
-                this.selectedParentAccount = selectedItem[0].parentAccountNumber;
-            } else {
-                console.error("Error locating " + parentAccountName);
-            }
-        },
-    },
-    mounted() {
-        const select = this.selectParentAccountNumber;
-        setTimeout(() => {
-            $("#autocomplete").autocomplete({
-                source: this.findMatches,
-                position: {
-                    my: "left top+6",
-                },
-                minLength: 0, // Necessary to display menu when clearing input
-
-                // Bold matching letters as you type in the input
-                search: function (event, ui) {
-                    setTimeout(() => {
-                        let w = $(this).autocomplete("widget").find("div");
-                        let regExpString = "(" + this.value + ")";
-                        let re = new RegExp(regExpString, "i");
-                        w.html((i, html) =>
-                            html.replace(re, "<span style='font-weight: bold;'>$1</span>")
-                        );
-                    }, 5);
-                },
-                select: function (event, ui) {
-                    select(ui.item.value);
-                },
-            });
-        }, 0);
     },
     components: {
         funnelHeader,
         navbar,
         funnelSubHeader,
-        textboxQuestion,
         Form,
         loadingModal,
+        insuranceCompanyQuestion,
     },
 };
 </script>
-<style lang="scss">
-ul {
-    &.ui-autocomplete {
-        position: absolute;
-        list-style-type: none;
-        margin: 0;
-        padding: 0.25rem;
-        background: $white;
-        border: 1px solid $gray;
-        border-radius: 0.25rem;
-        height: 50%;
-        overflow: auto;
-        li {
-            &:hover,
-            .ui-state-active {
-                background-color: $gray-100;
-                cursor: pointer;
-            }
-            .ui-menu-item-wrapper {
-                border: 1px solid transparent;
-                border-radius: 2px;
-                padding-left: 0.25rem;
-                span {
-                    font-weight: 600;
-                }
-                &.ui-state-active {
-                    border: 1px solid $gray-200;
-                    border-radius: 2px;
-                    font-weight: 600;
-                }
-            }
-        }
-    }
-}
-.ui-helper-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-</style>