From ec0a595d44f910955f5ed64fa248061e29ca3f85 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Fri, 24 May 2024 17:59:17 -0700
Subject: [PATCH 1/3] Functionality to search OrgBook API for organization
 names

---
 .../src/components/intake/ShasIntakeForm.vue  | 41 +++++++++++++++----
 frontend/src/services/index.ts                |  1 +
 frontend/src/services/orgBookService.ts       | 17 ++++++++
 frontend/src/utils/constants.ts               |  2 +
 4 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 frontend/src/services/orgBookService.ts

diff --git a/frontend/src/components/intake/ShasIntakeForm.vue b/frontend/src/components/intake/ShasIntakeForm.vue
index 42f46f19..81556f32 100644
--- a/frontend/src/components/intake/ShasIntakeForm.vue
+++ b/frontend/src/components/intake/ShasIntakeForm.vue
@@ -4,6 +4,8 @@ import { Form, FieldArray, ErrorMessage } from 'vee-validate';
 import { onBeforeMount, ref } from 'vue';
 
 import FileUpload from '@/components/file/FileUpload.vue';
+import { EditableDropdown } from '@/components/form';
+
 import {
   Calendar,
   Checkbox,
@@ -29,7 +31,7 @@ import {
   useConfirm,
   useToast
 } from '@/lib/primevue';
-import { permitService, submissionService } from '@/services';
+import { orgBookService, permitService, submissionService } from '@/services';
 import { useTypeStore } from '@/store';
 import {
   ContactPreferenceList,
@@ -42,6 +44,7 @@ import {
 } from '@/utils/constants';
 import { BASIC_RESPONSES, INTAKE_FORM_CATEGORIES, PROJECT_LOCATION } from '@/utils/enums';
 
+import type { IInputEvent } from '@/interfaces';
 import type { Ref } from 'vue';
 
 // Props
@@ -71,6 +74,7 @@ const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
 const geomarkAccordionIndex: Ref<number | undefined> = ref(undefined);
 const isSubmittable: Ref<boolean> = ref(false);
 const initialFormValues: Ref<any | undefined> = ref(undefined);
+const orgBookOptions: Ref<Array<any>> = ref([]);
 const parcelAccordionIndex: Ref<number | undefined> = ref(undefined);
 const spacialAccordionIndex: Ref<number | undefined> = ref(undefined);
 const validationErrors: Ref<string[]> = ref([]);
@@ -161,6 +165,21 @@ async function onSubmit(data: any) {
   }
 }
 
+const onRegisteredNameInput = async (e: IInputEvent) => {
+  const input = e.target.value;
+
+  if (input.length >= 3) {
+    const results = (await orgBookService.searchOrgBook(input))?.data?.results ?? [];
+    orgBookOptions.value = results.map((x: { [key: string]: string }) => x?.value);
+  } else {
+    orgBookOptions.value = [];
+  }
+};
+
+const getRegisteredNameLabel = (e: any) => {
+  return e;
+};
+
 onBeforeMount(async () => {
   let response;
   if (props.activityId) {
@@ -189,6 +208,7 @@ onBeforeMount(async () => {
 </script>
 
 <template>
+  <div>{{ formRef?.values }}</div>
   <div v-if="!assignedActivityId">
     <Form
       v-if="initialFormValues"
@@ -334,15 +354,22 @@ onBeforeMount(async () => {
                       :disabled="!editable"
                       :options="YesNo"
                     />
+                    <EditableDropdown
+                      v-if="values.basic.isDevelopedInBC === BASIC_RESPONSES.YES"
+                      class="col-6 pl-0"
+                      name="basic.registeredName"
+                      :get-option-label="getRegisteredNameLabel"
+                      :options="orgBookOptions"
+                      :placeholder="'Type to search the B.C registered name'"
+                      :bold="false"
+                      :disabled="!editable"
+                      @on-input="onRegisteredNameInput"
+                    />
                     <InputText
-                      v-if="values.basic.isDevelopedInBC"
+                      v-else-if="values.basic.isDevelopedInBC === BASIC_RESPONSES.NO"
                       class="col-6 pl-0"
                       name="basic.registeredName"
-                      :placeholder="
-                        values.basic.isDevelopedInBC === BASIC_RESPONSES.YES
-                          ? 'Type to search the B.C registered name'
-                          : 'Type the business/company/organization name'
-                      "
+                      :placeholder="'Type the business/company/organization name'"
                       :bold="false"
                       :disabled="!editable"
                     />
diff --git a/frontend/src/services/index.ts b/frontend/src/services/index.ts
index 5a031e5b..d242d470 100644
--- a/frontend/src/services/index.ts
+++ b/frontend/src/services/index.ts
@@ -4,6 +4,7 @@ export { default as comsService } from './comsService';
 export { default as documentService } from './documentService';
 export { default as enquiryService } from './enquiryService';
 export { default as noteService } from './noteService';
+export { default as orgBookService } from './orgBookService';
 export { default as permitService } from './permitService';
 export { default as roadmapService } from './roadmapService';
 export { default as submissionService } from './submissionService';
diff --git a/frontend/src/services/orgBookService.ts b/frontend/src/services/orgBookService.ts
new file mode 100644
index 00000000..5a89fbfd
--- /dev/null
+++ b/frontend/src/services/orgBookService.ts
@@ -0,0 +1,17 @@
+import { appAxios } from './interceptors';
+
+import type { AxiosResponse } from 'axios';
+
+import { ORG_BOOK_API_URL } from '@/utils/constants';
+
+export default {
+  /**
+   * @function searchOrgBook
+   * Calls OrgBook API to search for company names
+   * @param {string} nameSearch SearchUsersOptions object containing the data to filter against
+   * @returns {Promise<AxiosResponse>} An axios response or empty array
+   */
+  searchOrgBook(nameSearch: string): Promise<AxiosResponse> {
+    return appAxios().get(`${ORG_BOOK_API_URL}`, { params: { q: nameSearch } });
+  }
+};
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 0380577c..2cc4917f 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -175,3 +175,5 @@ export const NumResidentialUnits = [
  */
 
 export const ProjectLocation = [PROJECT_LOCATION.LOCATION_COORDINATES, PROJECT_LOCATION.STREET_ADDRESS];
+
+export const ORG_BOOK_API_URL = 'https://orgbook.gov.bc.ca/api/v4/search/autocomplete';

From b86f90936d8cf444491e71260391f74516b9d639 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Thu, 30 May 2024 16:55:57 -0700
Subject: [PATCH 2/3] Functionality to search Geocoder BC API for addresses

---
 app/config/custom-environment-variables.json  |   4 +
 app/src/routes/v1/submission.ts               |   2 +-
 frontend/src/components/form/AutoComplete.vue |  79 +++++++++++++
 frontend/src/components/form/index.ts         |   1 +
 .../src/components/intake/ShasIntakeForm.vue  | 105 +++++++++++++-----
 frontend/src/lib/primevue/index.ts            |   1 +
 frontend/src/services/externalApiService.ts   |  26 +++++
 frontend/src/services/index.ts                |   2 +-
 frontend/src/services/interceptors.ts         |  59 ++++++++++
 frontend/src/services/orgBookService.ts       |  17 ---
 frontend/src/utils/constants.ts               |  23 +++-
 .../unit/service/externalApiService.spec.ts   |  55 +++++++++
 12 files changed, 329 insertions(+), 45 deletions(-)
 create mode 100644 frontend/src/components/form/AutoComplete.vue
 create mode 100644 frontend/src/services/externalApiService.ts
 delete mode 100644 frontend/src/services/orgBookService.ts
 create mode 100644 frontend/tests/unit/service/externalApiService.spec.ts

diff --git a/app/config/custom-environment-variables.json b/app/config/custom-environment-variables.json
index 4e5dd9e0..46f1430a 100644
--- a/app/config/custom-environment-variables.json
+++ b/app/config/custom-environment-variables.json
@@ -8,6 +8,10 @@
       "apiPath": "FRONTEND_COMS_APIPATH",
       "bucketId": "FRONTEND_COMS_BUCKETID"
     },
+    "externalApi": {
+      "geocoderApi": "FRONTEND_GEOCODER_APIPATH",
+      "orgBookApi": "FRONTEND_ORGBOOK_APIPATH"
+    },
     "notificationBanner": "FRONTEND_NOTIFICATION_BANNER",
     "oidc": {
       "authority": "FRONTEND_OIDC_AUTHORITY",
diff --git a/app/src/routes/v1/submission.ts b/app/src/routes/v1/submission.ts
index 3d15885b..f053794e 100644
--- a/app/src/routes/v1/submission.ts
+++ b/app/src/routes/v1/submission.ts
@@ -23,7 +23,7 @@ router.get(
 );
 
 // Submission create draft endpoint
-router.put('/draft', submissionValidator.createDraft, (req: Request, res: Response, next: NextFunction): void => {
+router.put('/draft', (req: Request, res: Response, next: NextFunction): void => {
   submissionController.createDraft(req, res, next);
 });
 
diff --git a/frontend/src/components/form/AutoComplete.vue b/frontend/src/components/form/AutoComplete.vue
new file mode 100644
index 00000000..200ca240
--- /dev/null
+++ b/frontend/src/components/form/AutoComplete.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { toRef } from 'vue';
+import { useField, ErrorMessage } from 'vee-validate';
+
+import { AutoComplete } from '@/lib/primevue';
+
+import type { IInputEvent } from '@/interfaces';
+import type { AutoCompleteChangeEvent, AutoCompleteCompleteEvent } from 'primevue/autocomplete';
+
+// Props
+type Props = {
+  helpText?: string;
+  label?: string;
+  name: string;
+  placeholder?: string;
+  disabled?: boolean;
+  suggestions: Array<unknown>;
+  getOptionLabel: Function;
+  bold?: boolean;
+  forceSelection?: boolean;
+  loading?: boolean;
+  editable?: boolean;
+  delay?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  helpText: '',
+  type: 'text',
+  label: '',
+  placeholder: '',
+  disabled: false,
+  bold: true,
+  forceSelection: false,
+  loading: false,
+  editable: false,
+  delay: 300
+});
+
+// Emits
+const emit = defineEmits(['onChange', 'onComplete', 'onInput']);
+const { errorMessage, value } = useField<string>(toRef(props, 'name'));
+</script>
+
+<template>
+  <div class="field">
+    <label
+      :class="{ 'font-bold': bold }"
+      :for="name"
+    >
+      {{ label }}
+    </label>
+    <AutoComplete
+      v-model="value"
+      :aria-describedby="`${name}-help`"
+      class="w-full"
+      :class="{ 'p-invalid': errorMessage }"
+      :delay="delay"
+      :disabled="disabled"
+      :editable="editable"
+      :force-selection="forceSelection"
+      input-class="w-full"
+      :loading="false"
+      :name="name"
+      :option-label="(option: any) => props.getOptionLabel(option)"
+      :placeholder="placeholder"
+      :suggestions="props.suggestions"
+      @input="(e: IInputEvent) => emit('onInput', e)"
+      @change="(e: AutoCompleteChangeEvent) => emit('onChange', e)"
+      @complete="(e: AutoCompleteCompleteEvent) => emit('onComplete', e)"
+    />
+    <small :id="`${name}-help`">{{ helpText }}</small>
+    <div class="mt-2">
+      <ErrorMessage
+        :name="name"
+        class="app-error-message"
+      />
+    </div>
+  </div>
+</template>
diff --git a/frontend/src/components/form/index.ts b/frontend/src/components/form/index.ts
index 1b23d0dc..63d506ed 100644
--- a/frontend/src/components/form/index.ts
+++ b/frontend/src/components/form/index.ts
@@ -1,3 +1,4 @@
+export { default as AutoComplete } from './AutoComplete.vue';
 export { default as Calendar } from './Calendar.vue';
 export { default as Checkbox } from './Checkbox.vue';
 export { default as CopyToClipboard } from './CopyToClipboard.vue';
diff --git a/frontend/src/components/intake/ShasIntakeForm.vue b/frontend/src/components/intake/ShasIntakeForm.vue
index 81556f32..7ff3f284 100644
--- a/frontend/src/components/intake/ShasIntakeForm.vue
+++ b/frontend/src/components/intake/ShasIntakeForm.vue
@@ -7,6 +7,7 @@ import FileUpload from '@/components/file/FileUpload.vue';
 import { EditableDropdown } from '@/components/form';
 
 import {
+  AutoComplete,
   Calendar,
   Checkbox,
   Dropdown,
@@ -31,7 +32,7 @@ import {
   useConfirm,
   useToast
 } from '@/lib/primevue';
-import { orgBookService, permitService, submissionService } from '@/services';
+import { externalApiService, permitService, submissionService } from '@/services';
 import { useTypeStore } from '@/store';
 import {
   ContactPreferenceList,
@@ -46,6 +47,14 @@ import { BASIC_RESPONSES, INTAKE_FORM_CATEGORIES, PROJECT_LOCATION } from '@/uti
 
 import type { IInputEvent } from '@/interfaces';
 import type { Ref } from 'vue';
+import type { DropdownChangeEvent } from 'primevue/dropdown';
+import type { AutoCompleteCompleteEvent } from 'primevue/autocomplete';
+
+// Types
+type GeocoderEntry = {
+  geometry: { coordinates: Array<number>; [key: string]: any };
+  properties: { [key: string]: string };
+};
 
 // Props
 type Props = {
@@ -68,6 +77,7 @@ const { getPermitTypes } = storeToRefs(typeStore);
 
 // State
 const activeStep: Ref<number> = ref(0);
+const addressGeocoderOptions: Ref<Array<any>> = ref([]);
 const assignedActivityId: Ref<string | undefined> = ref(undefined);
 const editable: Ref<boolean> = ref(true);
 const formRef: Ref<InstanceType<typeof Form> | null> = ref(null);
@@ -93,15 +103,50 @@ function displayErrors(a: any) {
 }
 
 function confirmSubmit(data: any) {
+  const tempData = Object.assign({}, data);
+  delete tempData['addressSearch'];
+
   confirm.require({
     message: 'Are you sure you wish to submit this form? Please review the form before submitting.',
     header: 'Please confirm submission',
     acceptLabel: 'Confirm',
     rejectLabel: 'Cancel',
-    accept: () => onSubmit(data)
+    accept: () => onSubmit(tempData)
   });
 }
 
+const getAddressSearchLabel = (e: GeocoderEntry) => {
+  return e?.properties?.fullAddress;
+};
+
+function handleProjectLocationClick() {
+  formRef?.value?.setFieldValue('location.latitude', null);
+  formRef?.value?.setFieldValue('location.longitude', null);
+}
+
+const onAddressSearchInput = async (e: IInputEvent) => {
+  const input = e.target.value;
+  addressGeocoderOptions.value =
+    ((await externalApiService.searchAddressCoder(input))?.data?.features as Array<GeocoderEntry>) ?? [];
+};
+
+const onAddressSelect = async (e: DropdownChangeEvent) => {
+  if (e.originalEvent instanceof InputEvent) return;
+
+  if (e.value as GeocoderEntry) {
+    const properties = e.value?.properties;
+    const geometry = e.value?.geometry;
+
+    formRef.value?.setFieldValue(
+      'location.streetAddress',
+      `${properties?.civicNumber} ${properties?.streetName} ${properties?.streetType}`
+    );
+    formRef.value?.setFieldValue('location.locality', properties?.localityName);
+    formRef.value?.setFieldValue('location.latitude', geometry?.coordinates[1]);
+    formRef.value?.setFieldValue('location.longitude', geometry?.coordinates[0]);
+  }
+};
+
 function onPermitsHasAppliedChange(e: BASIC_RESPONSES, fieldsLength: number, push: Function, setFieldValue: Function) {
   if (e === BASIC_RESPONSES.YES || e === BASIC_RESPONSES.UNSURE) {
     if (fieldsLength === 0) {
@@ -119,12 +164,15 @@ function onPermitsHasAppliedChange(e: BASIC_RESPONSES, fieldsLength: number, pus
 async function onSaveDraft(data: any) {
   editable.value = false;
 
+  const tempData = Object.assign({}, data);
+  delete tempData['addressSearch'];
+
   try {
     let response;
     if (data.submissionId) {
-      response = await submissionService.updateDraft(data.submissionId, data);
+      response = await submissionService.updateDraft(tempData.submissionId, tempData);
     } else {
-      response = await submissionService.createDraft(data);
+      response = await submissionService.createDraft(tempData);
     }
 
     if (response.data.submissionId && response.data.activityId) {
@@ -165,14 +213,12 @@ async function onSubmit(data: any) {
   }
 }
 
-const onRegisteredNameInput = async (e: IInputEvent) => {
-  const input = e.target.value;
-
-  if (input.length >= 3) {
-    const results = (await orgBookService.searchOrgBook(input))?.data?.results ?? [];
-    orgBookOptions.value = results.map((x: { [key: string]: string }) => x?.value);
-  } else {
-    orgBookOptions.value = [];
+const onRegisteredNameInput = async (e: AutoCompleteCompleteEvent) => {
+  if (e?.query?.length >= 2) {
+    const results = (await externalApiService.searchOrgBook(e.query))?.data?.results ?? [];
+    orgBookOptions.value = results
+      .filter((x: { [key: string]: string }) => x.type === 'name')
+      .map((x: { [key: string]: string }) => x?.value);
   }
 };
 
@@ -353,17 +399,20 @@ onBeforeMount(async () => {
                       :bold="false"
                       :disabled="!editable"
                       :options="YesNo"
+                      @on-change="() => setFieldValue('basic.registeredName', null)"
                     />
-                    <EditableDropdown
+                    <AutoComplete
                       v-if="values.basic.isDevelopedInBC === BASIC_RESPONSES.YES"
                       class="col-6 pl-0"
                       name="basic.registeredName"
-                      :get-option-label="getRegisteredNameLabel"
-                      :options="orgBookOptions"
-                      :placeholder="'Type to search the B.C registered name'"
                       :bold="false"
                       :disabled="!editable"
-                      @on-input="onRegisteredNameInput"
+                      :editable="true"
+                      :force-selection="true"
+                      :get-option-label="getRegisteredNameLabel"
+                      :placeholder="'Type to search the B.C registered name'"
+                      :suggestions="orgBookOptions"
+                      @on-complete="onRegisteredNameInput"
                     />
                     <InputText
                       v-else-if="values.basic.isDevelopedInBC === BASIC_RESPONSES.NO"
@@ -808,6 +857,7 @@ onBeforeMount(async () => {
                     :bold="false"
                     :disabled="!editable"
                     :options="ProjectLocation"
+                    @click="handleProjectLocationClick"
                   />
                   <div
                     v-if="values.location?.projectLocation === PROJECT_LOCATION.STREET_ADDRESS"
@@ -816,41 +866,46 @@ onBeforeMount(async () => {
                     <Card class="no-shadow">
                       <template #content>
                         <div class="grid nested-grid">
-                          <InputText
+                          <EditableDropdown
                             class="col-12"
-                            name="location.addressSearch"
+                            name="addressSearch"
+                            :get-option-label="getAddressSearchLabel"
+                            :options="addressGeocoderOptions"
+                            :placeholder="'Search the address of your housing project'"
+                            :bold="false"
                             :disabled="!editable"
-                            placeholder="Search the address of your housing project"
+                            @on-input="onAddressSearchInput"
+                            @on-change="onAddressSelect"
                           />
                           <InputText
                             class="col-4"
                             name="location.streetAddress"
-                            :disabled="!editable"
+                            disabled
                             placeholder="Street address"
                           />
                           <InputText
                             class="col-4"
                             name="location.locality"
-                            :disabled="!editable"
+                            disabled
                             placeholder="Locality"
                           />
                           <InputText
                             class="col-4"
                             name="location.province"
-                            :disabled="!editable"
+                            disabled
                             placeholder="Province"
                           />
                           <InputNumber
                             class="col-4"
                             name="location.latitude"
-                            :disabled="!editable"
+                            disabled
                             help-text="Provide a coordinate between 48 and 60"
                             placeholder="Latitude"
                           />
                           <InputNumber
                             class="col-4"
                             name="location.longitude"
-                            :disabled="!editable"
+                            disabled
                             help-text="Provide a coordinate between -114 and -139"
                             placeholder="Longitude"
                           />
diff --git a/frontend/src/lib/primevue/index.ts b/frontend/src/lib/primevue/index.ts
index 11e93560..2a24fdd3 100644
--- a/frontend/src/lib/primevue/index.ts
+++ b/frontend/src/lib/primevue/index.ts
@@ -1,6 +1,7 @@
 // Add imports as needed
 export { default as Accordion } from 'primevue/accordion';
 export { default as AccordionTab } from 'primevue/accordiontab';
+export { default as AutoComplete } from 'primevue/autocomplete';
 export { FilterMatchMode } from 'primevue/api';
 export { default as Breadcrumb } from 'primevue/breadcrumb';
 export { default as Button } from 'primevue/button';
diff --git a/frontend/src/services/externalApiService.ts b/frontend/src/services/externalApiService.ts
new file mode 100644
index 00000000..8ba8326d
--- /dev/null
+++ b/frontend/src/services/externalApiService.ts
@@ -0,0 +1,26 @@
+import { geocoderAxios, orgBookAxios } from './interceptors';
+
+import type { AxiosResponse } from 'axios';
+
+import { ADDRESS_CODER_QUERY_PARAMS, ORG_BOOK_QUERY_PARAMS } from '@/utils/constants';
+
+export default {
+  /**
+   * @function searchOrgBook
+   * Calls OrgBook API to search for company names
+   * @param {string} nameSearch SearchUsersOptions object containing the data to filter against
+   * @returns {Promise<AxiosResponse>} An axios response or empty array
+   */
+  searchOrgBook(nameSearch: string): Promise<AxiosResponse> {
+    return orgBookAxios().get('/search/autocomplete', { params: { q: nameSearch, ...ORG_BOOK_QUERY_PARAMS } });
+  },
+
+  searchAddressCoder(addressSearch: string): Promise<AxiosResponse> {
+    return geocoderAxios().get('/addresses.json', {
+      params: {
+        addressString: addressSearch,
+        ...ADDRESS_CODER_QUERY_PARAMS
+      }
+    });
+  }
+};
diff --git a/frontend/src/services/index.ts b/frontend/src/services/index.ts
index d242d470..2a563169 100644
--- a/frontend/src/services/index.ts
+++ b/frontend/src/services/index.ts
@@ -4,7 +4,7 @@ export { default as comsService } from './comsService';
 export { default as documentService } from './documentService';
 export { default as enquiryService } from './enquiryService';
 export { default as noteService } from './noteService';
-export { default as orgBookService } from './orgBookService';
+export { default as externalApiService } from './externalApiService';
 export { default as permitService } from './permitService';
 export { default as roadmapService } from './roadmapService';
 export { default as submissionService } from './submissionService';
diff --git a/frontend/src/services/interceptors.ts b/frontend/src/services/interceptors.ts
index 8836f9f1..f6f76d28 100644
--- a/frontend/src/services/interceptors.ts
+++ b/frontend/src/services/interceptors.ts
@@ -4,6 +4,13 @@ import { AuthService, ConfigService } from './index';
 
 import type { AxiosInstance, AxiosRequestConfig, InternalAxiosRequestConfig } from 'axios';
 
+// Axios serializes query params and encodes spaces with '+'
+// Some external APIs may require spaces to be encoded with '%20 instead
+const paramRegex = /\+/g;
+const paramsSerializer = {
+  encode: (param: string) => encodeURIComponent(param).replace(paramRegex, '%20')
+};
+
 /**
  * @function appAxios
  * Returns an Axios instance for the application API
@@ -63,3 +70,55 @@ export function comsAxios(options: AxiosRequestConfig = {}): AxiosInstance {
 
   return instance;
 }
+
+/**
+ * @function geocoderAxios
+ * Returns an Axios instance for the BC Geocoder API
+ * @param {AxiosRequestConfig} options Axios request config options
+ * @returns {AxiosInstance} An axios instance
+ */
+export function geocoderAxios(options: AxiosRequestConfig = {}): AxiosInstance {
+  const instance = axios.create({
+    baseURL: new ConfigService().getConfig().externalApi.geocoderApi,
+    timeout: 10000,
+    paramsSerializer,
+    ...options
+  });
+
+  instance.interceptors.request.use(
+    async (cfg: InternalAxiosRequestConfig) => {
+      return Promise.resolve(cfg);
+    },
+    (error: Error) => {
+      return Promise.reject(error);
+    }
+  );
+
+  return instance;
+}
+
+/**
+ * @function orgbookAxios
+ * Returns an Axios instance for the BC Org Book API
+ * @param {AxiosRequestConfig} options Axios request config options
+ * @returns {AxiosInstance} An axios instance
+ */
+export function orgBookAxios(options: AxiosRequestConfig = {}): AxiosInstance {
+  const instance = axios.create({
+    baseURL: new ConfigService().getConfig().externalApi.orgBookApi,
+    timeout: 10000,
+    paramsSerializer,
+    ...options
+  });
+
+  instance.interceptors.request.use(
+    async (cfg: InternalAxiosRequestConfig) => {
+      return Promise.resolve(cfg);
+    },
+    (error: Error) => {
+      return Promise.reject(error);
+    }
+  );
+
+  return instance;
+}
diff --git a/frontend/src/services/orgBookService.ts b/frontend/src/services/orgBookService.ts
deleted file mode 100644
index 5a89fbfd..00000000
--- a/frontend/src/services/orgBookService.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { appAxios } from './interceptors';
-
-import type { AxiosResponse } from 'axios';
-
-import { ORG_BOOK_API_URL } from '@/utils/constants';
-
-export default {
-  /**
-   * @function searchOrgBook
-   * Calls OrgBook API to search for company names
-   * @param {string} nameSearch SearchUsersOptions object containing the data to filter against
-   * @returns {Promise<AxiosResponse>} An axios response or empty array
-   */
-  searchOrgBook(nameSearch: string): Promise<AxiosResponse> {
-    return appAxios().get(`${ORG_BOOK_API_URL}`, { params: { q: nameSearch } });
-  }
-};
diff --git a/frontend/src/utils/constants.ts b/frontend/src/utils/constants.ts
index 2cc4917f..3d17a2c3 100644
--- a/frontend/src/utils/constants.ts
+++ b/frontend/src/utils/constants.ts
@@ -176,4 +176,25 @@ export const NumResidentialUnits = [
 
 export const ProjectLocation = [PROJECT_LOCATION.LOCATION_COORDINATES, PROJECT_LOCATION.STREET_ADDRESS];
 
-export const ORG_BOOK_API_URL = 'https://orgbook.gov.bc.ca/api/v4/search/autocomplete';
+/**
+ * External API configuration params
+ */
+export const ADDRESS_CODER_QUERY_PARAMS = {
+  echo: false,
+  brief: false,
+  minScore: 55,
+  onlyCivic: true,
+  maxResults: 15,
+  autoComplete: true,
+  matchAccuracy: 100,
+  matchPrecision: 'occupant, unit, site, civic_number, intersection, block, street, locality, province',
+  precisionPoints: 100
+};
+
+export const ORG_BOOK_QUERY_PARAMS = {
+  limit: 100,
+  skip: 0,
+  latest: true,
+  inactive: false,
+  revoked: false
+};
diff --git a/frontend/tests/unit/service/externalApiService.spec.ts b/frontend/tests/unit/service/externalApiService.spec.ts
new file mode 100644
index 00000000..e00f3a4e
--- /dev/null
+++ b/frontend/tests/unit/service/externalApiService.spec.ts
@@ -0,0 +1,55 @@
+import { externalApiService } from '@/services';
+import { geocoderAxios, orgBookAxios } from '@/services/interceptors';
+
+import { ADDRESS_CODER_QUERY_PARAMS, ORG_BOOK_QUERY_PARAMS } from '@/utils/constants';
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn()
+  })
+}));
+
+const getSpy = vi.fn();
+const testData = 'testDatas';
+const testAddressString = '2975 Imaginary Ave';
+
+vi.mock('@/services/interceptors');
+vi.mocked(geocoderAxios).mockReturnValue({
+  get: getSpy
+} as any);
+vi.mocked(orgBookAxios).mockReturnValue({
+  get: getSpy
+} as any);
+
+beforeEach(() => {
+  vi.clearAllMocks();
+});
+
+describe('externalApiService tests', () => {
+  it('calls geocoderAxios with the right params', async () => {
+    const geocoderSpy = vi.mocked(geocoderAxios().get).mockReturnValue(Promise.resolve({ data: testData }));
+    await externalApiService.searchAddressCoder(testAddressString);
+
+    expect(geocoderSpy).toBeCalledTimes(1);
+    expect(geocoderSpy).toHaveBeenCalledWith('/addresses.json', {
+      params: {
+        addressString: testAddressString,
+        ...ADDRESS_CODER_QUERY_PARAMS
+      }
+    });
+  });
+
+  it('calls orgBookAxios with the right params', async () => {
+    const orgBookSpy = vi.mocked(orgBookAxios().get).mockReturnValue(Promise.resolve({ data: testData }));
+    await externalApiService.searchOrgBook(testAddressString);
+
+    expect(orgBookSpy).toBeCalledTimes(1);
+    expect(orgBookSpy).toHaveBeenCalledWith('/search/autocomplete', {
+      params: {
+        q: testAddressString,
+        ...ORG_BOOK_QUERY_PARAMS
+      }
+    });
+  });
+});

From 144952b9b99e582a011f7a6356222fdebbfe26a4 Mon Sep 17 00:00:00 2001
From: Wilson Wong <wilwong89@gmail.com>
Date: Mon, 3 Jun 2024 08:12:04 -0700
Subject: [PATCH 3/3] Add ENV variables for external api links

---
 .github/environments/values.dev.yaml              | 2 ++
 .github/environments/values.prod.yaml             | 2 ++
 .github/environments/values.test.yaml             | 2 ++
 charts/pcns/values.yaml                           | 2 ++
 frontend/src/components/intake/ShasIntakeForm.vue | 9 ++++-----
 5 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/.github/environments/values.dev.yaml b/.github/environments/values.dev.yaml
index a12b2407..2d9f8cc1 100644
--- a/.github/environments/values.dev.yaml
+++ b/.github/environments/values.dev.yaml
@@ -6,6 +6,8 @@ config:
     FRONTEND_CHES_BCC: NRM.PermittingAndData@gov.bc.ca
     FRONTEND_COMS_APIPATH: https://coms-dev.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: 1f9e1451-c130-4804-aeb0-b78b5b109c47
+    FRONTEND_GEOCODER_APIPATH: https://geocoder.api.gov.bc.ca
+    FRONTEND_ORGBOOK_APIPATH: https://orgbook.gov.bc.ca/api/v4
     FRONTEND_OIDC_AUTHORITY: https://dev.loginproxy.gov.bc.ca/auth/realms/standard
     FRONTEND_OIDC_CLIENTID: nr-permit-connect-navigator-service-5188
     SERVER_APIPATH: /api/v1
diff --git a/.github/environments/values.prod.yaml b/.github/environments/values.prod.yaml
index 8d395a00..c31f7057 100644
--- a/.github/environments/values.prod.yaml
+++ b/.github/environments/values.prod.yaml
@@ -6,6 +6,8 @@ config:
     FRONTEND_CHES_BCC: Housing.Authorizations@gov.bc.ca
     FRONTEND_COMS_APIPATH: https://coms.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: 0089d041-5aab-485e-842d-8875475d0ed6
+    FRONTEND_GEOCODER_APIPATH: https://geocoder.api.gov.bc.ca
+    FRONTEND_ORGBOOK_APIPATH: https://orgbook.gov.bc.ca/api/v4
     FRONTEND_OIDC_AUTHORITY: https://loginproxy.gov.bc.ca/auth/realms/standard
     FRONTEND_OIDC_CLIENTID: nr-permit-connect-navigator-service-5188
     SERVER_APIPATH: /api/v1
diff --git a/.github/environments/values.test.yaml b/.github/environments/values.test.yaml
index 1fd29c1a..865043ce 100644
--- a/.github/environments/values.test.yaml
+++ b/.github/environments/values.test.yaml
@@ -6,6 +6,8 @@ config:
     FRONTEND_CHES_BCC: NRM.PermittingAndData@gov.bc.ca
     FRONTEND_COMS_APIPATH: https://coms-test.api.gov.bc.ca/api/v1
     FRONTEND_COMS_BUCKETID: a9eabd1d-5f77-4c60-bf6b-83ffa0e21c59
+    FRONTEND_GEOCODER_APIPATH: https://geocoder.api.gov.bc.ca
+    FRONTEND_ORGBOOK_APIPATH: https://orgbook.gov.bc.ca/api/v4
     FRONTEND_OIDC_AUTHORITY: https://test.loginproxy.gov.bc.ca/auth/realms/standard
     FRONTEND_OIDC_CLIENTID: nr-permit-connect-navigator-service-5188
     SERVER_APIPATH: /api/v1
diff --git a/charts/pcns/values.yaml b/charts/pcns/values.yaml
index e693f262..ccc50bc1 100644
--- a/charts/pcns/values.yaml
+++ b/charts/pcns/values.yaml
@@ -135,6 +135,8 @@ config:
     FRONTEND_CHES_BCC: ~
     FRONTEND_COMS_APIPATH: ~
     FRONTEND_COMS_BUCKETID: ~
+    FRONTEND_GEOCODER_APIPATH: ~
+    FRONTEND_ORGBOOK_APIPATH: ~
     FRONTEND_OIDC_AUTHORITY: ~
     FRONTEND_OIDC_CLIENTID: ~
 
diff --git a/frontend/src/components/intake/ShasIntakeForm.vue b/frontend/src/components/intake/ShasIntakeForm.vue
index 7ff3f284..84965353 100644
--- a/frontend/src/components/intake/ShasIntakeForm.vue
+++ b/frontend/src/components/intake/ShasIntakeForm.vue
@@ -213,18 +213,18 @@ async function onSubmit(data: any) {
   }
 }
 
-const onRegisteredNameInput = async (e: AutoCompleteCompleteEvent) => {
+async function onRegisteredNameInput(e: AutoCompleteCompleteEvent) {
   if (e?.query?.length >= 2) {
     const results = (await externalApiService.searchOrgBook(e.query))?.data?.results ?? [];
     orgBookOptions.value = results
       .filter((x: { [key: string]: string }) => x.type === 'name')
       .map((x: { [key: string]: string }) => x?.value);
   }
-};
+}
 
-const getRegisteredNameLabel = (e: any) => {
+function getRegisteredNameLabel(e: any) {
   return e;
-};
+}
 
 onBeforeMount(async () => {
   let response;
@@ -254,7 +254,6 @@ onBeforeMount(async () => {
 </script>
 
 <template>
-  <div>{{ formRef?.values }}</div>
   <div v-if="!assignedActivityId">
     <Form
       v-if="initialFormValues"