Form State Store

strr-web/assets/styles/theme.scss

@@ -86,4 +86,9 @@ html,
 body {
   overflow-x: hidden;
   background-color: #F1F3F5;
+}
+
+body {
+  overflow-y: hidden;
+  height: 100%;
 }

strr-web/components/bcros/alerts/Message.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="flex py-[22px] px-[30px] flex-row"
+    class="flex py-[22px] px-[30px] mobile:px-[8px] mobile:py-[22px] flex-row"
     :class="flavourContainerClass"
     :role="flavourRole"
     :data-cy="'alertsMessage:' + flavour"
   >
     <div class="flex">
-      <div class="">
+      <div class="mobile:hidden">
         <slot name="icon">
           <UIcon
             v-if="flavourIcon"

strr-web/components/bcros/fee-widget/FeeWidget.vue

@@ -20,7 +20,11 @@
     >
       <p>{{ t("fee-widget.summary") }}</p>
       <div class="hidden mobile:flex">
-        <img src="/icons/caret.svg" :class="`cursor-pointer transition-all ${folded ? 'rotate-180': ''}`">
+        <img
+          src="/icons/caret.svg"
+          alt="Toggle fee widget shown"
+          :class="`cursor-pointer transition-all ${folded ? 'rotate-180': ''}`"
+        >
       </div>
     </div>
     <div :class="`transition-all ${folded ? 'h-[0px] overflow-hidden p-[0px]': 'px-[15px] pb-[10px] '}`">

strr-web/components/bcros/footer/Footer.vue

@@ -45,7 +45,6 @@
         </div>
       </nav>
     </div>
-    <div v-if="extraSpace" :class="`bg-white mobile:flex-grow mobile:w-full`" />
   </footer>
 </template>
 

strr-web/components/bcros/form-section/FormSection.vue

@@ -1,8 +1,8 @@
 <template>
-  <div data-cy="form-section" class="mt-[40px] ml-[40px] mr-[20px]">
+  <div data-cy="form-section" class="mt-[40px] mobile:mt-[20px] ml-[40px] mr-[20px] mobile:mx-[8px]">
     <div class="flex flex-row mobile:flex-col">
       <div class="w-[200px]">
-        <p class="font-bold">
+        <p class="desktop:font-bold mobile:mb-[8px]">
           {{ t(title) }}
         </p>
         <p v-if="optional">
@@ -13,7 +13,7 @@
         <slot />
       </div>
     </div>
-    <div v-if="divider" class="h-[1px] w-full bg-bcGovGray-300" />
+    <div v-if="divider" class="h-[1px] w-full bg-bcGovGray-300 mobile:hidden" />
   </div>
 </template>
 

strr-web/components/bcros/form-section/contact-information/ContactDetails.vue

@@ -3,25 +3,51 @@
     <BcrosFormSection :title="t('create-account.contact-form.contactDetails')">
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
         <UFormGroup name="preferredName" class=" flex-grow">
-          <UInput v-model="preferredName" :placeholder="t('create-account.contact-form.preferredName')" />
+          <UInput
+            v-model="preferredName"
+            type="name"
+            aria-label="preferred name"
+            :placeholder="t('create-account.contact-form.preferredName')"
+          />
         </UFormGroup>
       </div>
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:flex-col mobile:mb-[16px]">
-        <UFormGroup name="phoneNumber" class="pr-[16px] flex-grow mobile:mb-[16px]">
-          <UInput v-model="phoneNumber" :placeholder="t('create-account.contact-form.phoneNumber')" />
+        <UFormGroup name="phoneNumber" class="desktop:pr-[16px] flex-grow mobile:mb-[16px]">
+          <UInput
+            v-model="phoneNumber"
+            type="tel"
+            aria-label="phone number"
+            :placeholder="t('create-account.contact-form.phoneNumber')"
+          />
         </UFormGroup>
         <UFormGroup name="extension" class="flex-grow">
-          <UInput v-model="extension" :placeholder="t('create-account.contact-form.extension')" />
+          <UInput
+            v-model="extension"
+            :placeholder="t('create-account.contact-form.extension')"
+            aria-label="extension"
+          />
         </UFormGroup>
       </div>
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
         <UFormGroup name="faxNumber" class="flex-grow">
-          <UInput v-model="faxNumber" :placeholder="t('create-account.contact-form.faxNumber')" />
+          <UInput
+            v-model="faxNumber"
+            :placeholder="t('create-account.contact-form.faxNumber')"
+            aria-label="fax number"
+          />
         </UFormGroup>
       </div>
       <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
-        <UFormGroup name="emailAddress" class="flex-grow">
-          <UInput v-model="emailAddress" :placeholder="t('create-account.contact-form.emailAddress')" />
+        <UFormGroup
+          type="email"
+          name="emailAddress"
+          class="flex-grow"
+        >
+          <UInput
+            v-model="emailAddress"
+            :placeholder="t('create-account.contact-form.emailAddress')"
+            aria-label="email address"
+          />
         </UFormGroup>
       </div>
       <BcrosAlertsMessage :flavour="AlertsFlavourE.INFO">
@@ -35,16 +61,11 @@
 </template>
 
 <script setup lang="ts">
-const { formState } = defineProps<{ formState: any }>()
-
-const {
-  preferredName,
-  phoneNumber,
-  extension,
-  faxNumber,
-  emailAddress
-} = formState
-
 const t = useNuxtApp().$i18n.t
 
+const preferredName = defineModel<string>('preferredName')
+const phoneNumber = defineModel<string>('phoneNumber')
+const extension = defineModel<string>('extension')
+const faxNumber = defineModel<string>('faxNumber')
+const emailAddress = defineModel<string>('emailAddress')
 </script>

strr-web/components/bcros/form-section/contact-information/ContactInfo.vue

@@ -2,57 +2,62 @@
   <div data-cy="form-section-contact-info">
     <BcrosFormSection :title="t('create-account.contact-form.dateOfBirth')" :optional="dobOptional">
       <div class="flex flex-row justify-between w-full mobile:flex-col">
-        <UFormGroup name="day" class="pr-[16px] flex-grow mobile:mb-[16px]">
-          <UInput v-model="day" :placeholder="t('create-account.contact-form.day')" />
+        <UFormGroup name="birthDay" class="desktop:pr-[16px] flex-grow mobile:mb-[16px]">
+          <UInput
+            v-model="day"
+            :placeholder="t('create-account.contact-form.day')"
+            aria-label="birth day"
+          />
         </UFormGroup>
-        <UFormGroup name="month" class="pr-[16px] flex-grow mobile:mb-[16px]">
-          <UDropdown
+        <UFormGroup name="month" class="desktop:pr-[16px] flex-grow mobile:mb-[16px]">
+          <USelect
             v-model="month"
-            :items="months"
+            :placeholder="t('create-account.contact-form.month')"
+            :options="getMonths()"
+            option-attribute="key"
             class="w-full"
-            :popper="{
-              placement: 'bottom-start',
-            }"
-          >
-            <UInput
-              class="w-full"
-              color="white"
-              :label="t('create-account.contact-form.month')"
-              trailing-icon="i-heroicons-chevron-down-20-solid"
-            />
-          </UDropdown>
+            aria-label="birth month"
+          />
         </UFormGroup>
-        <UFormGroup name="year">
-          <UInput v-model="year" :placeholder="t('create-account.contact-form.year')" />
+        <UFormGroup name="birthYear">
+          <UInput v-model="year" :placeholder="t('create-account.contact-form.year')" aria-label="birth year" />
         </UFormGroup>
       </div>
     </BcrosFormSection>
   </div>
 </template>
 
 <script setup lang="ts">
-import { DropdownItem } from '@nuxt/ui/dist/runtime/types'
+const t = useNuxtApp().$i18n.t
 
-const { formState, dobOptional } = defineProps<{ formState: any, dobOptional: boolean }>()
+const {
+  dobOptional
+} = defineProps<{
+  dobOptional?: boolean
+}>()
 
-const { dateOfBirth: { day, month, year } } = formState
-const t = useNuxtApp().$i18n.t
+const day = defineModel<string>('day')
+const month = defineModel<string>('month')
+const year = defineModel<string>('year')
 
-const months: DropdownItem[][] = [
-  [
-    { label: 'January' },
-    { label: 'February' },
-    { label: 'March' },
-    { label: 'April' },
-    { label: 'May' },
-    { label: 'June' },
-    { label: 'July' },
-    { label: 'August' },
-    { label: 'September' },
-    { label: 'October' },
-    { label: 'November' },
-    { label: 'December' }
-  ]
+const months: string[] = [
+  t('general.january'),
+  t('general.february'),
+  t('general.march'),
+  t('general.april'),
+  t('general.may'),
+  t('general.june'),
+  t('general.july'),
+  t('general.august'),
+  t('general.september'),
+  t('general.october'),
+  t('general.november'),
+  t('general.december')
 ]
 
+const getMonths = (): { key: string, value: string }[] => months.map((month: string, index: number) => ({
+  value: (index + 1).toLocaleString('en-US', { minimumIntegerDigits: 2, useGrouping: false }),
+  key: month
+}))
+
 </script>

strr-web/components/bcros/form-section/contact-information/Form.vue

@@ -14,18 +14,39 @@
           {{ t('create-account.contact.disclaimer') }}
         </div>
       </BcrosFormSection>
-      <UForm :schema="primaryContactSchema" :state="formState">
-        <BcrosFormSectionContactInformationContactInfo :form-state="formState.primaryContact" />
-        <BcrosFormSectionContactInformationContactDetails :form-state="formState.primaryContact" />
-        <BcrosFormSectionContactInformationMailingAddress :form-state="formState.primaryContact" />
+      <UForm :schema="contactSchema" :state="formState.primaryContact">
+        <BcrosFormSectionContactInformationContactInfo
+          v-model:day="formState.primaryContact.birthDay"
+          v-model:month="formState.primaryContact.birthMonth"
+          v-model:year="formState.primaryContact.birthYear"
+        />
+        <BcrosFormSectionContactInformationContactDetails
+          v-model:phone-number="formState.primaryContact.phoneNumber"
+          v-model:preferred-name="formState.primaryContact.preferredName"
+          v-model:extension="formState.primaryContact.extension"
+          v-model:fax-number="formState.primaryContact.faxNumber"
+          v-model:email-address="formState.primaryContact.emailAddress"
+        />
+        <BcrosFormSectionContactInformationMailingAddress
+          id="primaryContactAddress"
+          v-model:country="formState.primaryContact.country"
+          v-model:address="formState.primaryContact.address"
+          v-model:address-line-two="formState.primaryContact.addressLineTwo"
+          v-model:city="formState.primaryContact.city"
+          v-model:province="formState.primaryContact.province"
+          v-model:postal-code="formState.primaryContact.postalCode"
+          :enable-address-complete="enableAddressComplete"
+          default-country-iso2="CA"
+        />
       </UForm>
     </div>
-    <div v-if="!addSecondaryContact" class="mb-[180px] mt-[32px]">
+    <div v-if="!addSecondaryContact" class="desktop:mb-[180px] mobile:mb-[32px] mt-[32px] mobile:w-full mobile:p-[8px]">
       <BcrosButtonsPrimary
         :action="toggleAddSecondary"
         :text="t('create-account.contact.add-secondary')"
         variant="outline"
         icon=""
+        class-name="mobile:w-full mobile:mx-[0px]"
       />
     </div>
     <div v-else>
@@ -45,13 +66,31 @@
             <UIcon class="h-[20px] w-[20px]" name="i-mdi-remove" alt="remove icon" />
           </div>
         </div>
-        <UForm :schema="primaryContactSchema" :state="formState">
+        <UForm :schema="contactSchema" :state="formState.secondaryContact">
           <BcrosFormSectionContactInformationContactInfo
-            :form-state="formState.secondaryContact"
+            v-model:day="formState.secondaryContact.birthDay"
+            v-model:month="formState.secondaryContact.birthMonth"
+            v-model:year="formState.secondaryContact.birthYear"
             :dob-optional="true"
           />
-          <BcrosFormSectionContactInformationContactDetails :form-state="formState.secondaryContact" />
-          <BcrosFormSectionContactInformationMailingAddress :form-state="formState.secondaryContact" />
+          <BcrosFormSectionContactInformationContactDetails
+            v-model:phone-number="formState.secondaryContact.phoneNumber"
+            v-model:preferred-name="formState.secondaryContact.preferredName"
+            v-model:extension="formState.secondaryContact.extension"
+            v-model:fax-number="formState.secondaryContact.faxNumber"
+            v-model:email-address="formState.secondaryContact.emailAddress"
+          />
+          <BcrosFormSectionContactInformationMailingAddress
+            id="secondaryContactAddress"
+            v-model:country="formState.secondaryContact.country"
+            v-model:address="formState.secondaryContact.address"
+            v-model:address-line-two="formState.secondaryContact.addressLineTwo"
+            v-model:city="formState.secondaryContact.city"
+            v-model:province="formState.secondaryContact.province"
+            v-model:postal-code="formState.secondaryContact.postalCode"
+            :enable-address-complete="enableAddressComplete"
+            default-country-iso2="CA"
+          />
         </UForm>
       </div>
     </div>
@@ -60,15 +99,64 @@
 
 <script setup lang="ts">
 import { formState } from '@/stores/strr'
+const t = useNuxtApp().$i18n.t
 
-const { fullName } = defineProps<{ fullName: string }>()
+const {
+  fullName,
+  addSecondaryContact,
+  toggleAddSecondary
+} = defineProps<{
+  fullName: string,
+  addSecondaryContact: boolean
+  toggleAddSecondary:() => void
+}>()
 
-const addSecondaryContact = ref(false)
+const {
+  activeAddressField,
+  address: canadaPostAddress,
+  enableAddressComplete
+} = useCanadaPostAddress()
 
-const toggleAddSecondary = () => {
-  addSecondaryContact.value = !addSecondaryContact.value
+const getActiveAddressState = (): ContactInformationI | CreateAccountFormStateI['propertyDetails'] => {
+  if (activeAddressField.value === 'primaryContactAddress') {
+    return formState.primaryContact
+  } else if (activeAddressField.value === 'secondaryContactAddress') {
+    return formState.secondaryContact
+  } else {
+    return formState.propertyDetails
+  }
 }
 
-const t = useNuxtApp().$i18n.t
+watch(canadaPostAddress, (newAddress) => {
+  const activeAddressState = getActiveAddressState()
+  if (newAddress) {
+    activeAddressState.address = newAddress.street
+    activeAddressState.addressLineTwo = newAddress.streetAdditional
+    activeAddressState.country = newAddress.country
+    activeAddressState.city = newAddress.city
+    activeAddressState.province = newAddress.region
+    activeAddressState.postalCode = newAddress.postalCode
+  }
+})
+
+const { me, currentAccount } = useBcrosAccount()
+
+if (me?.profile.contacts && me?.profile.contacts.length > 0) {
+  formState.primaryContact.phoneNumber = me?.profile.contacts[0].phone
+  formState.primaryContact.emailAddress = me?.profile.contacts[0].email
+  formState.primaryContact.extension = me?.profile.contacts[0].phoneExtension
+}
+
+if (currentAccount && me) {
+  const mailingAddress = me?.orgs.find(({ id }) => id === currentAccount.id)?.mailingAddress
+  if (mailingAddress) {
+    formState.primaryContact.country = mailingAddress[0].country
+    formState.primaryContact.city = mailingAddress[0].city
+    formState.primaryContact.postalCode = mailingAddress[0].postalCode
+    formState.primaryContact.province = mailingAddress[0].region
+    formState.primaryContact.address = mailingAddress[0].street
+    formState.primaryContact.addressLineTwo = mailingAddress[0].streetAdditional
+  }
+}
 
 </script>