Sam/form structure

strr-web/.gitignore

@@ -19,6 +19,7 @@ logs
 .idea
 
 # Local env files
+.env.local
 .env
 *.firebase
 

strr-web/components/bcros/existing-accounts-list/ExistingAccountsList.vue

@@ -14,7 +14,9 @@
         justify-space-between mobile:mx-[8px] mx-[32px] mt-[24px] border-bcGovColor-hairlinesOnWhite`"
       >
         <div class="flex grow mobile:justify-between mobile:w-full mobile:mb-[16px]">
-          <div><BcrosLetterIcon :letter="account.name.charAt(0)" /></div>
+          <div>
+            <BcrosLetterIcon :letter="account.name.charAt(0)" />
+          </div>
           <div class="grow pl-[20px]">
             <div class="text-[18px] font-bold">
               {{ account.name }}
@@ -23,8 +25,8 @@
               {{
                 account.mailingAddress && account.mailingAddress[0]
                   ? `${account.mailingAddress[0].street}, ${account.mailingAddress[0].city},
-                    ${account.mailingAddress[0].region} ${account.mailingAddress[0].postalCode},
-                    ${account.mailingAddress[0].country}`
+              ${account.mailingAddress[0].region} ${account.mailingAddress[0].postalCode},
+              ${account.mailingAddress[0].country}`
                   : '-'
               }}
             </div>
@@ -57,23 +59,21 @@
 </template>
 
 <script setup lang="ts">
-import { useFormStore } from '@/stores/strr'
+import { formState } from '@/stores/strr'
 
-const { accounts } = defineProps<{ accounts:OrgI[] }>()
+const { accounts } = defineProps<{ accounts: OrgI[] }>()
 const t = useNuxtApp().$i18n.t
 const { goToCreateAccount } = useBcrosNavigate()
 
-const formStore = useFormStore()
-
 const buttonText = t('account.existing-account-section.use-account-button')
 
 const createButtonAction = () => {
-  formStore.setSelectedAccount({} as OrgI)
+  formState.selectedAccount = {} as OrgI
   goToCreateAccount()
 }
 
 const chooseButtonAction = (account: OrgI) => {
-  formStore.setSelectedAccount(account)
+  formState.selectedAccount = account
   goToCreateAccount()
 }
 

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

@@ -1,12 +1,12 @@
 <template>
-  <div data-cy="form-section" class="mt-[40px]">
+  <div data-cy="form-section" class="mt-[40px] ml-[40px]">
     <div class="flex flex-row mobile:flex-col">
       <div class="w-[200px]">
         <p class="font-bold">
           {{ t(title) }}
         </p>
       </div>
-      <div>
+      <div class="w-full">
         <slot />
       </div>
     </div>

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

@@ -0,0 +1,52 @@
+<template>
+  <div data-cy="form-section-contact-info">
+    <BcrosFormSection :title="t('create-account.contact-form.contactDetails')">
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="preferredName" class="pr-[16px] flex-grow">
+          <UInput v-model="preferredName" :placeholder="t('create-account.contact-form.preferredName')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="phoneNumber" class="pr-[16px] flex-grow">
+          <UInput v-model="phoneNumber" :placeholder="t('create-account.contact-form.phoneNumber')" />
+        </UFormGroup>
+        <UFormGroup name="extension" class="pr-[16px] flex-grow">
+          <UInput v-model="extension" :placeholder="t('create-account.contact-form.extension')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="faxNumber" class="pr-[16px] flex-grow">
+          <UInput v-model="faxNumber" :placeholder="t('create-account.contact-form.faxNumber')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="emailAddress" class="pr-[16px] flex-grow">
+          <UInput v-model="emailAddress" :placeholder="t('create-account.contact-form.emailAddress')" />
+        </UFormGroup>
+      </div>
+      <BcrosAlertsMessage :flavour="AlertsFlavourE.INFO" class="mr-[20px]">
+        <p>
+          <b>{{ t('create-account.contact-form.bold-warning') }}</b>
+          {{ t('create-account.contact-form.warning') }}
+        </p>
+      </BcrosAlertsMessage>
+    </BcrosFormSection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formState } from '@/stores/strr'
+
+const {
+  primaryContact: {
+    preferredName,
+    phoneNumber,
+    extension,
+    faxNumber,
+    emailAddress
+  }
+} = formState
+
+const t = useNuxtApp().$i18n.t
+
+</script>

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

@@ -0,0 +1,25 @@
+<template>
+  <div data-cy="form-section-contact-info">
+    <BcrosFormSection :title="t('create-account.contact-form.dateOfBirth')">
+      <div class="flex flex-row justify-between w-full">
+        <UFormGroup name="day" class="pr-[16px] flex-grow">
+          <UInput v-model="day" :placeholder="t('create-account.contact-form.day')" />
+        </UFormGroup>
+        <UFormGroup name="month" class="pr-[16px] flex-grow">
+          <UInput v-model="month" :placeholder="t('create-account.contact-form.month')" />
+        </UFormGroup>
+        <UFormGroup name="year" class="pr-[16px]">
+          <UInput v-model="year" :placeholder="t('create-account.contact-form.year')" />
+        </UFormGroup>
+      </div>
+    </BcrosFormSection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formState } from '@/stores/strr'
+
+const { dateOfBirth: { day, month, year } } = formState
+const t = useNuxtApp().$i18n.t
+
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <div data-cy="create-account-page" class="relative h-full">
+    <div :class="`mb-[${addSecondaryContact ? '32px' : '132px'}] bg-white rounded-[4px]`">
+      <div class="bg-bcGovColor-gray2 rounded-t-[4px]">
+        <p class="px-[40px] py-[15px] font-bold">
+          {{ t('create-account.contact.subtitle') }}
+        </p>
+      </div>
+      <BcrosFormSection :title="t('create-account.contact.your-name')">
+        <div class="mb-[16px] text-[14px] leading-[22px]">
+          {{ fullName }}
+        </div>
+        <div class="mb-[16px] text-[14px] leading-[22px]">
+          {{ t('create-account.contact.disclaimer') }}
+        </div>
+      </BcrosFormSection>
+      <UForm :schema="primaryContactSchema" :state="formState">
+        <BcrosFormSectionContactInformationContactInfo :primary="true" />
+        <BcrosFormSectionContactInformationContactDetails :primary="true" />
+        <BcrosFormSectionContactInformationMailingAddress :primary="true" />
+      </UForm>
+    </div>
+    <div v-if="!addSecondaryContact" class="mb-[180px] mt-[32px]">
+      <BcrosButtonsPrimary
+        :action="toggleAddSecondary"
+        :text="t('create-account.contact.add-secondary')"
+        variant="outline"
+        icon=""
+      />
+    </div>
+    <div v-else>
+      <div class="mb-[180px] bg-white rounded-[4px]">
+        <div class="bg-bcGovColor-gray2 rounded-t-[4px] flex flex-row justify-between items-center">
+          <p class="px-[40px] py-[15px] font-bold">
+            {{ t('create-account.contact.subtitle-two') }}
+          </p>
+          <div
+            class="flex flex-row mr-[20px] w-[117px] h-[36px] items-center justify-center text-[16px] text-blue-500"
+            role="button"
+            :onclick="toggleAddSecondary"
+          >
+            <p class="mr-[4px]">
+              {{ t('create-account.contact.remove') }}
+            </p>
+            <UIcon class="h-[20px] w-[20px]" name="i-mdi-remove" alt="remove icon" />
+          </div>
+        </div>
+        <UForm :schema="primaryContactSchema" :state="formState">
+          <BcrosFormSectionContactInformationContactInfo :primary="false" />
+          <BcrosFormSectionContactInformationContactDetails :primary="false" />
+          <BcrosFormSectionContactInformationMailingAddress :primary="false" />
+        </UForm>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formState } from '@/stores/strr'
+
+const { fullName } = defineProps<{ fullName: string }>()
+
+const addSecondaryContact = ref(false)
+
+const toggleAddSecondary = () => {
+  addSecondaryContact.value = !addSecondaryContact.value
+}
+
+const t = useNuxtApp().$i18n.t
+
+</script>

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

@@ -0,0 +1,49 @@
+<template>
+  <div data-cy="form-section-contact-info">
+    <BcrosFormSection :title="t('create-account.contact-form.mailingAddress')">
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="country" class="pr-[16px] flex-grow">
+          <UInput v-model="country" :placeholder="t('create-account.contact-form.country')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="Address" class="pr-[16px] flex-grow">
+          <UInput v-model="address" :placeholder="t('create-account.contact-form.address')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="AddressLineTwo" class="pr-[16px] flex-grow">
+          <UInput v-model="addressLineTwo" :placeholder="t('create-account.contact-form.addressLineTwo')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="city" class="pr-[16px] flex-grow">
+          <UInput v-model="city" :placeholder="t('create-account.contact-form.city')" />
+        </UFormGroup>
+        <UFormGroup name="province" class="pr-[16px] flex-grow">
+          <UInput v-model="province" :placeholder="t('create-account.contact-form.province')" />
+        </UFormGroup>
+        <UFormGroup name="postalCode" class="pr-[16px] flex-grow">
+          <UInput v-model="postalCode" :placeholder="t('create-account.contact-form.postalCode')" />
+        </UFormGroup>
+      </div>
+    </BcrosFormSection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formState } from '@/stores/strr'
+
+const {
+  primaryContact: {
+    address,
+    country,
+    addressLineTwo,
+    city,
+    province,
+    postalCode
+  }
+} = formState
+const t = useNuxtApp().$i18n.t
+
+</script>

strr-web/components/bcros/form-section/property/Address.vue

@@ -0,0 +1,55 @@
+<template>
+  <div data-cy="form-section-contact-info">
+    <BcrosFormSection :title="t('create-account.property-form.rentalUnitAddress')">
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="nickname" class="pr-[16px] flex-grow">
+          <UInput v-model="nickname" :placeholder="t('create-account.property-form.nickname')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="country" class="pr-[16px] flex-grow">
+          <UInput v-model="country" :placeholder="t('create-account.contact-form.country')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="address" class="pr-[16px] flex-grow">
+          <UInput v-model="address" :placeholder="t('create-account.contact-form.address')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="AddressLineTwo" class="pr-[16px] flex-grow">
+          <UInput v-model="addressLineTwo" :placeholder="t('create-account.contact-form.addressLineTwo')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="city" class="pr-[16px] flex-grow">
+          <UInput v-model="city" :placeholder="t('create-account.contact-form.city')" />
+        </UFormGroup>
+        <UFormGroup name="province" class="pr-[16px] flex-grow">
+          <UInput v-model="province" :placeholder="t('create-account.contact-form.province')" />
+        </UFormGroup>
+        <UFormGroup name="postalCode" class="pr-[16px] flex-grow">
+          <UInput v-model="postalCode" :placeholder="t('create-account.contact-form.postalCode')" />
+        </UFormGroup>
+      </div>
+    </BcrosFormSection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formState } from '@/stores/strr'
+
+const {
+  unitAddress: {
+    nickname,
+    country,
+    address,
+    addressLineTwo,
+    city,
+    province,
+    postalCode
+  }
+} = formState
+const t = useNuxtApp().$i18n.t
+
+</script>

strr-web/components/bcros/form-section/property/Details.vue

@@ -0,0 +1,41 @@
+<template>
+  <div data-cy="form-section-contact-info">
+    <BcrosFormSection :title="t('create-account.property-form.rentalUnitDetails')">
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="parcelIdentifier" class="pr-[16px] flex-grow">
+          <UInput v-model="parcelIdentifier" :placeholder="t('create-account.property-form.parcelIdentifier')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="businessLicense" class="pr-[16px] flex-grow">
+          <UInput v-model="businessLicense" :placeholder="t('create-account.property-form.businessLicense')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="propertyType" class="pr-[16px] flex-grow">
+          <UInput v-model="propertyType" :placeholder="t('create-account.property-form.propertyType')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px]">
+        <UFormGroup name="ownershipType" class="pr-[16px] flex-grow">
+          <UInput v-model="ownershipType" :placeholder="t('create-account.property-form.ownershipType')" />
+        </UFormGroup>
+      </div>
+    </BcrosFormSection>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { formState } from '@/stores/strr'
+
+const {
+  unitDetails: {
+    parcelIdentifier,
+    businessLicense,
+    propertyType,
+    ownershipType
+  }
+} = formState
+const t = useNuxtApp().$i18n.t
+
+</script>