hosts drafts

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

@@ -9,9 +9,9 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
 <template>
   <div class="bg-white py-10" data-testid="button-control">
     <div class="app-inner-container">
-      <div class="grid grid-cols-2">
-        <div v-if="leftButtons.length > 0" class="col-start-1">
-          <div class="flex gap-4">
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <div>
+          <div class="flex justify-center gap-4 md:justify-start">
             <UButton
               v-for="(button, i) in leftButtons"
               :key="'left-button-' + i"
@@ -28,15 +28,16 @@ const rightButtons = computed(() => buttonControl.value?.rightButtons || [])
             />
           </div>
         </div>
-        <div class="col-span-1 col-start-2">
-          <div v-if="rightButtons.length > 0" class="flex justify-end gap-4">
+        <div>
+          <div class="flex justify-center gap-4 md:justify-end">
             <UButton
               v-for="(button, i) in rightButtons"
               :key="'right-button-' + i"
               class="max-w-fit px-7 py-3"
               :class="button.class"
               block
               :color="button.color || 'primary'"
+              :disabled="button.disabled || false"
               :icon="button.icon || ''"
               :label="button.label"
               :loading="button.loading || false"

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/components/todo/Index.vue

@@ -25,12 +25,14 @@ defineProps<{
           </p>
         </slot>
       </div>
-      <UButton
-        :label="button.label"
-        :color="button.colour || 'primary'"
-        :icon="button.icon"
-        @click="button.action()"
-      />
+      <div>
+        <UButton
+          :label="button.label"
+          :color="button.colour || 'primary'"
+          :icon="button.icon"
+          @click="button.action()"
+        />
+      </div>
     </div>
     <slot />
   </div>

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-base-web/app/composables/useStrrApi.ts

@@ -36,13 +36,23 @@ export const useStrrApi = () => {
     return resp.applications
   }
 
-  const postApplication = async <T extends { registration: any }, R extends T>(body: T) => {
-    return await $strrApi<R>('/applications', {
-      method: 'POST',
+  const postApplication = async <T extends { registration: any }, R extends T>(
+    body: T,
+    isDraft = false,
+    applicationId?: string
+  ) => {
+    const path = applicationId ? `/applications/${applicationId}` : '/applications'
+    return await $strrApi<R>(path, {
+      method: applicationId ? 'PUT' : 'POST',
+      headers: (isDraft ? { isDraft: true } : {}) as HeadersInit,
       body
     })
   }
 
+  const deleteApplication = async (applicationId: string) => {
+    return await $strrApi(`/applications/${applicationId}`, { method: 'DELETE' })
+  }
+
   const getApplicationReceipt = async (applicationNumber: string) => {
     return await $strrApi<Blob>(`/applications/${applicationNumber}/payment/receipt`)
       .catch((e) => {
@@ -65,6 +75,7 @@ export const useStrrApi = () => {
   }
 
   return {
+    deleteApplication,
     getAccountRegistrations,
     getAccountApplications,
     getApplicationReceipt,

strr-base-web/app/locales/en-CA.ts

@@ -60,6 +60,7 @@ export default {
     save: 'Save',
     saveExit: 'Save and Resume Later',
     beginApplication: 'Begin Application',
+    resume: 'Resume',
     resumeApplication: 'Resume Application',
     acceptTos: {
       main: 'Accept Terms of Use',

strr-base-web/package.json

@@ -12,7 +12,7 @@
     "postinstall": "nuxt prepare",
     "lint": "eslint --ext .ts,.vue app --ignore-path .gitignore",
     "lint:fix": "pnpm lint --fix",
-    "test": "vitest --dir tests/unit --passWithNoTests --coverage && cp ./tests/coverage/clover.xml ./coverage.xml",
+    "test": "vitest --dir tests/unit --passWithNoTests --coverage && cp ./coverage/clover.xml ./coverage.xml",
     "test:unit": "vitest --dir tests/unit",
     "test:unit:cov": "vitest run --dir tests/unit --coverage",
     "test:e2e": "npx playwright test",

strr-host-pm-web/app/locales/en-CA.ts

@@ -224,6 +224,7 @@ export default {
     showDetails: 'Show Details',
     hideDetails: 'Hide Details',
     returnToStep: 'Return to the step to finish it',
+    ariaResumeDraft: 'Resume Draft for {number}',
     ariaViewDetails: 'View details for property: {name}, {address}',
     registerAStr: 'Register a Short-Term Rental'
   },