feature flag, phone number issue, btn control updates, depreciation f…

…ix, other fixes

Signed-off-by: Kial Jinnah <kialj876@gmail.com>

strr-base-web/app/components/connect/ButtonControl.vue

@@ -10,7 +10,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
   <div class="bg-white py-10" data-testid="button-control">
     <div class="app-inner-container">
       <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
-        <div v-if="leftButtons.length > 0">
+        <div>
           <div class="flex justify-center gap-4 md:justify-start">
             <UButton
               v-for="(button, i) in leftButtons"
@@ -28,7 +28,7 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
             />
           </div>
         </div>
-        <div v-if="rightButtons.length > 0" class="col-span-1">
+        <div>
           <div class="flex justify-center gap-4 md:justify-end">
             <UButton
               v-for="(button, i) in rightButtons"

strr-base-web/app/components/connect/form/date/Picker.vue

@@ -44,10 +44,10 @@ watch(() => props.setMinDate, (val) => { minDate.value = val || null })
   </div>
 </template>
 <style lang="scss">
-@import '@vuepic/vue-datepicker/dist/main.css';
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
+@use '@vuepic/vue-datepicker/dist/main.css' as *;
+@use 'tailwindcss/base' as *;
+@use 'tailwindcss/components' as *;
+@use 'tailwindcss/utilities' as *;
 
 .connect-date-picker {
 

strr-base-web/app/components/connect/form/phoneNumber/CountryCode.vue

@@ -73,8 +73,15 @@ onMounted(() => {
   if (countryIso2.value !== undefined) {
     selectCountry(countryIso2.value)
   } else if (countryCallingCode.value) {
-    selectedCountry.value = {
-      callingCode: `+${countryCallingCode.value}`
+    // Set a country based on the calling code if available
+    const iso2 = search(countryCallingCode.value)[0]?.iso2
+    if (iso2) {
+      selectCountry(iso2)
+    } else {
+      selectedCountry.value = {
+        callingCode: countryCallingCode.value,
+        label: `+${countryCallingCode.value}`
+      }
     }
   }
 })

strr-base-web/app/composables/useButtonControl.ts

@@ -0,0 +1,39 @@
+import type { ConnectBtnControl } from '#imports'
+
+export const useButtonControl = () => {
+  const route = useRoute()
+
+  function setButtonControl (buttonControl: ConnectBtnControl) {
+    route.meta.buttonControl = buttonControl
+  }
+
+  function getButtonControl (): ConnectBtnControl {
+    return route.meta.buttonControl as ConnectBtnControl
+  }
+
+  function handleButtonLoading (reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) {
+    // set button control for loading / disabling buttons on submit or save or reset to default
+    const updateButtonGrp = (buttonArray: ConnectBtnControlItem[], grp: 'left' | 'right') => {
+      for (const [index, element] of buttonArray.entries()) {
+        if (reset) {
+          element.disabled = false
+          element.loading = false
+        } else {
+          element.loading = (grp === buttonGrp) && index === buttonIndex
+          element.disabled = !element.loading
+        }
+      }
+    }
+    const buttonControl = getButtonControl()
+    // update left buttons with loading / disabled as required
+    updateButtonGrp(buttonControl.leftButtons, 'left')
+    // update right buttons with loading / disabled as required
+    updateButtonGrp(buttonControl.rightButtons, 'right')
+  }
+
+  return {
+    getButtonControl,
+    setButtonControl,
+    handleButtonLoading
+  }
+}

strr-host-pm-web/app/pages/application.vue

@@ -6,6 +6,8 @@ const route = useRoute()
 const localePath = useLocalePath()
 const strrModal = useStrrModals()
 const { handlePaymentRedirect } = useConnectNav()
+const { setButtonControl, handleButtonLoading } = useButtonControl()
+const ldStore = useConnectLaunchdarklyStore()
 
 const propertyStore = useHostPropertyStore()
 const { unitDetails, propertyTypeFeeTriggers } = storeToRefs(propertyStore)
@@ -133,27 +135,6 @@ const activeStep = ref<Step>(steps.value[activeStepIndex.value] as Step)
 const stepperRef = shallowRef<InstanceType<typeof ConnectStepper> | null>(null)
 const reviewFormRef = shallowRef<InstanceType<typeof FormReview> | null>(null)
 
-// TODO: move button management into composable ?
-const handleButtonLoading = (reset: boolean, buttonGrp?: 'left' | 'right', buttonIndex?: number) => {
-  // set button control for loading / disabling buttons on submit or save or reset to default
-  const updateButtonGrp = (buttonArray: ConnectBtnControlItem[], grp: 'left' | 'right') => {
-    for (const [index, element] of buttonArray.entries()) {
-      if (reset) {
-        element.disabled = false
-        element.loading = false
-      } else {
-        element.loading = (grp === buttonGrp) && index === buttonIndex
-        element.disabled = !element.loading
-      }
-    }
-  }
-  const buttonControl = getButtonControl()
-  // update left buttons with loading / disabled as required
-  updateButtonGrp(buttonControl.leftButtons, 'left')
-  // update right buttons with loading / disabled as required
-  updateButtonGrp(buttonControl.rightButtons, 'right')
-}
-
 const saveApplication = async (resumeLater = false) => {
   handleButtonLoading(false, 'left', resumeLater ? 1 : 2)
   // prevent flicker of buttons by waiting half a second
@@ -248,11 +229,13 @@ watch(activeStepIndex, (val) => {
   })
 
   setButtonControl({
-    leftButtons: [
-      { action: () => navigateTo(localePath('/dashboard')), label: t('btn.cancel'), variant: 'outline' },
-      { action: () => saveApplication(true), label: t('btn.saveExit'), variant: 'outline' },
-      { action: saveApplication, label: t('btn.save'), variant: 'outline' }
-    ],
+    leftButtons: ldStore.getStoredFlag('enable-save-draft')
+      ? [
+          { action: () => navigateTo(localePath('/dashboard')), label: t('btn.cancel'), variant: 'outline' },
+          { action: () => saveApplication(true), label: t('btn.saveExit'), variant: 'outline' },
+          { action: saveApplication, label: t('btn.save'), variant: 'outline' }
+        ]
+      : [],
     rightButtons: buttons
   })
 }, { immediate: true })

strr-host-pm-web/app/pages/dashboard/index.vue

@@ -191,9 +191,12 @@ async function handleItemSelect (row: any) {
                 :aria-label="
                   $t('btn.ariaViewDetails', {
                     name: row.name,
-                    address: `${row.address.unitNumber
-                      ? row.address.unitNumber + '-'
-                      : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
+                    address: row.address.streetName
+                      ? `${row.address.unitNumber
+                        ? row.address.unitNumber + '-'
+                        : ''}${row.address.streetNumber} ${row.address.streetName}, ${row.address.city}`
+                      : '',
+                    number: row.applicationNumber
                   })
                 "
                 :block="!isDraft(row.status)"
@@ -206,11 +209,13 @@ async function handleItemSelect (row: any) {
                   :aria-label="$t('text.showMoreOptions')"
                 />
                 <template #panel>
+                  <!-- TODO: not focusable via keyboard tab, should be fixed in nuxt/ui v3 -->
                   <UButton
                     class="m-2"
-                    :label="$t('word.Delete')"
+                    :label="$t('word.Remove')"
+                    :aria-label="$t('word.Remove')"
                     variant="link"
-                    @click="console.log('delete', row.applicationNumber)"
+                    @click="console.log('remove', row.applicationNumber)"
                   />
                 </template>
               </UPopover>

strr-host-pm-web/app/stores/hostApplication.ts

@@ -57,7 +57,11 @@ export const useHostApplicationStore = defineStore('host/application', () => {
           ? { propertyManager: formatOwnerPropertyManagerAPI(propertyManger) }
           : {}
         ),
-        unitAddress: formatHostUnitAddressApi(propertyStore.unitAddress.address),
+        // @ts-expect-error - can be undefined for drafts edge case
+        unitAddress: reqStore.showUnitDetailsForm
+          // only save the entered address if it was fully entered / user selected continue registration
+          ? formatHostUnitAddressApi(propertyStore.unitAddress.address)
+          : undefined,
         unitDetails: formatHostUnitDetailsAPI(propertyStore.unitDetails, propertyStore.blInfo, reqStore.prRequirements),
         documents: documentStore.apiDocuments,
         strRequirements: reqStore.propertyReqs,

strr-host-pm-web/app/stores/hostPermit.ts

@@ -42,8 +42,10 @@ export const useHostPermitStore = defineStore('host/permit', () => {
       }
       unitDetails.value = formatHostUnitDetailsUI(permitDetails.value.unitDetails)
       blInfo.value = formatHostUnitDetailsBlInfoUI(permitDetails.value.unitDetails)
-      unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
-      showUnitDetailsForm.value = !!unitAddress.value
+      if (permitDetails.value.unitAddress) {
+        unitAddress.value = { address: formatHostUnitAddressUI(permitDetails.value.unitAddress) }
+      }
+      showUnitDetailsForm.value = !!unitAddress.value?.address?.streetName
       prRequirements.value.isPropertyPrExempt = !!permitDetails.value.unitDetails.prExemptReason
       prRequirements.value.prExemptionReason = permitDetails.value.unitDetails.prExemptReason
       if (application.value?.registration.strRequirements && unitAddress.value?.address?.streetName) {

strr-host-pm-web/nuxt.config.ts

@@ -39,8 +39,8 @@ export default defineNuxtConfig({
   },
 
   extends: [
-    ['github:bcgov/STRR/strr-base-web', { install: true }],
-    // '../strr-base-web', // dev only
+    // ['github:bcgov/STRR/strr-base-web', { install: true }],
+    '../strr-base-web', // dev only
     '@daxiom/nuxt-core-layer-test' // extend again, this prevents the payApi plugin error
   ],