Merge pull request #14 from turb0c0w/sam/form-state-store

Form State
bcgov · May 23, 2024 · 45a1ea0 · 45a1ea0
2 parents 0d2ee52 + 067c66a
commit 45a1ea0
Show file tree

Hide file tree

Showing 19 changed files with 346 additions and 205 deletions.
diff --git a/strr-web/components/bcros/form-section/FormSection.vue b/strr-web/components/bcros/form-section/FormSection.vue
@@ -1,22 +1,28 @@
 <template>
-  <div data-cy="form-section" class="mt-[40px] ml-[40px]">
+  <div data-cy="form-section" class="mt-[40px] ml-[40px] mr-[20px]">
     <div class="flex flex-row mobile:flex-col">
       <div class="w-[200px]">
         <p class="font-bold">
           {{ t(title) }}
         </p>
+        <p v-if="optional">
+          {{ t('general.optional') }}
+        </p>
       </div>
       <div class="w-full">
         <slot />
       </div>
     </div>
+    <div v-if="divider" class="h-[1px] w-full bg-bcGovGray-300" />
   </div>
 </template>
 
 <script setup lang="ts">
 
-const { title } = defineProps<{
-  title: string
+const { title, optional, divider } = defineProps<{
+  title: string,
+  optional?: boolean
+  divider?: boolean
 }>()
 
 const t = useNuxtApp().$i18n.t

diff --git a/strr-web/components/bcros/form-section/contact-information/ContactDetails.vue b/strr-web/components/bcros/form-section/contact-information/ContactDetails.vue
@@ -1,30 +1,30 @@
 <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">
+      <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')" />
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px]">
-        <UFormGroup name="phoneNumber" class="pr-[16px] flex-grow">
+      <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>
-        <UFormGroup name="extension" class="pr-[16px] flex-grow">
+        <UFormGroup name="extension" class="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">
+      <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')" />
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px]">
-        <UFormGroup name="emailAddress" class="pr-[16px] flex-grow">
+      <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>
       </div>
-      <BcrosAlertsMessage :flavour="AlertsFlavourE.INFO" class="mr-[20px]">
+      <BcrosAlertsMessage :flavour="AlertsFlavourE.INFO">
         <p>
           <b>{{ t('create-account.contact-form.bold-warning') }}</b>
           {{ t('create-account.contact-form.warning') }}
@@ -35,16 +35,14 @@
 </template>
 
 <script setup lang="ts">
-import { formState } from '@/stores/strr'
+const { formState } = defineProps<{ formState: any }>()
 
 const {
-  primaryContact: {
-    preferredName,
-    phoneNumber,
-    extension,
-    faxNumber,
-    emailAddress
-  }
+  preferredName,
+  phoneNumber,
+  extension,
+  faxNumber,
+  emailAddress
 } = formState
 
 const t = useNuxtApp().$i18n.t

diff --git a/strr-web/components/bcros/form-section/contact-information/ContactInfo.vue b/strr-web/components/bcros/form-section/contact-information/ContactInfo.vue
@@ -1,14 +1,28 @@
 <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">
+    <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>
-        <UFormGroup name="month" class="pr-[16px] flex-grow">
-          <UInput v-model="month" :placeholder="t('create-account.contact-form.month')" />
+        <UFormGroup name="month" class="pr-[16px] flex-grow mobile:mb-[16px]">
+          <UDropdown
+            v-model="month"
+            :items="months"
+            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>
         </UFormGroup>
-        <UFormGroup name="year" class="pr-[16px]">
+        <UFormGroup name="year">
           <UInput v-model="year" :placeholder="t('create-account.contact-form.year')" />
         </UFormGroup>
       </div>
@@ -17,9 +31,28 @@
 </template>
 
 <script setup lang="ts">
-import { formState } from '@/stores/strr'
+import { DropdownItem } from '@nuxt/ui/dist/runtime/types'
+
+const { formState, dobOptional } = defineProps<{ formState: any, dobOptional: boolean }>()
 
 const { dateOfBirth: { day, month, year } } = formState
 const t = useNuxtApp().$i18n.t
 
+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' }
+  ]
+]
+
 </script>
diff --git a/strr-web/components/bcros/form-section/contact-information/Form.vue b/strr-web/components/bcros/form-section/contact-information/Form.vue
@@ -6,7 +6,7 @@
           {{ t('create-account.contact.subtitle') }}
         </p>
       </div>
-      <BcrosFormSection :title="t('create-account.contact.your-name')">
+      <BcrosFormSection :title="t('create-account.contact.your-name')" :divider="true">
         <div class="mb-[16px] text-[14px] leading-[22px]">
           {{ fullName }}
         </div>
@@ -15,9 +15,9 @@
         </div>
       </BcrosFormSection>
       <UForm :schema="primaryContactSchema" :state="formState">
-        <BcrosFormSectionContactInformationContactInfo :primary="true" />
-        <BcrosFormSectionContactInformationContactDetails :primary="true" />
-        <BcrosFormSectionContactInformationMailingAddress :primary="true" />
+        <BcrosFormSectionContactInformationContactInfo :form-state="formState.primaryContact" />
+        <BcrosFormSectionContactInformationContactDetails :form-state="formState.primaryContact" />
+        <BcrosFormSectionContactInformationMailingAddress :form-state="formState.primaryContact" />
       </UForm>
     </div>
     <div v-if="!addSecondaryContact" class="mb-[180px] mt-[32px]">
@@ -46,9 +46,12 @@
           </div>
         </div>
         <UForm :schema="primaryContactSchema" :state="formState">
-          <BcrosFormSectionContactInformationContactInfo :primary="false" />
-          <BcrosFormSectionContactInformationContactDetails :primary="false" />
-          <BcrosFormSectionContactInformationMailingAddress :primary="false" />
+          <BcrosFormSectionContactInformationContactInfo
+            :form-state="formState.secondaryContact"
+            :dob-optional="true"
+          />
+          <BcrosFormSectionContactInformationContactDetails :form-state="formState.secondaryContact" />
+          <BcrosFormSectionContactInformationMailingAddress :form-state="formState.secondaryContact" />
         </UForm>
       </div>
     </div>

diff --git a/strr-web/components/bcros/form-section/contact-information/MailingAddress.vue b/strr-web/components/bcros/form-section/contact-information/MailingAddress.vue
@@ -1,29 +1,57 @@
 <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')" />
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
+        <UFormGroup name="country" class="flex-grow">
+          <UDropdown
+            v-model="country"
+            :items="[]"
+            class="w-full"
+            :popper="{
+              placement: 'bottom-start',
+            }"
+          >
+            <UInput
+              class="w-full"
+              color="white"
+              :label="t('create-account.contact-form.country')"
+              trailing-icon="i-heroicons-chevron-down-20-solid"
+            />
+          </UDropdown>
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px]">
-        <UFormGroup name="Address" class="pr-[16px] flex-grow">
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
+        <UFormGroup name="Address" class="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">
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
+        <UFormGroup name="AddressLineTwo" class="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">
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:flex-col mobile:mb-[16px]">
+        <UFormGroup name="city" class="pr-[16px] flex-grow mobile:mb-[16px]">
           <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 name="province" class="pr-[16px] flex-grow mobile:mb-[16px]">
+          <UDropdown
+            v-model="province"
+            :items="[]"
+            class="w-full"
+            :popper="{
+              placement: 'bottom-start',
+            }"
+          >
+            <UInput
+              class="w-full"
+              color="white"
+              :label="t('create-account.contact-form.province')"
+              trailing-icon="i-heroicons-chevron-down-20-solid"
+            />
+          </UDropdown>
         </UFormGroup>
-        <UFormGroup name="postalCode" class="pr-[16px] flex-grow">
+        <UFormGroup name="postalCode" class="flex-grow mobile:mb-[16px]">
           <UInput v-model="postalCode" :placeholder="t('create-account.contact-form.postalCode')" />
         </UFormGroup>
       </div>
@@ -32,18 +60,17 @@
 </template>
 
 <script setup lang="ts">
-import { formState } from '@/stores/strr'
+const { formState } = defineProps<{ formState: any }>()
 
 const {
-  primaryContact: {
-    address,
-    country,
-    addressLineTwo,
-    city,
-    province,
-    postalCode
-  }
+  address,
+  country,
+  addressLineTwo,
+  city,
+  province,
+  postalCode
 } = formState
+
 const t = useNuxtApp().$i18n.t
 
 </script>
diff --git a/strr-web/components/bcros/form-section/property/Address.vue b/strr-web/components/bcros/form-section/property/Address.vue
@@ -1,34 +1,67 @@
 <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]">
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
         <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]">
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
+        <UFormGroup name="useMailing" class="pr-[16px] flex-grow">
+          <UCheckbox v-model="useMailing" :label="t('create-account.property-form.useMailing')" />
+        </UFormGroup>
+      </div>
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
         <UFormGroup name="country" class="pr-[16px] flex-grow">
-          <UInput v-model="country" :placeholder="t('create-account.contact-form.country')" />
+          <UDropdown
+            v-model="country"
+            :items="[]"
+            class="w-full"
+            :popper="{
+              placement: 'bottom-start',
+            }"
+          >
+            <UInput
+              class="w-full"
+              color="white"
+              :label="t('create-account.contact-form.country')"
+              trailing-icon="i-heroicons-chevron-down-20-solid"
+            />
+          </UDropdown>
         </UFormGroup>
       </div>
-      <div class="flex flex-row justify-between w-full mb-[40px]">
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
         <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]">
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:mb-[16px]">
         <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">
+      <div class="flex flex-row justify-between w-full mb-[40px] mobile:flex-col mobile:mb-[16px]">
+        <UFormGroup name="city" class="pr-[16px] flex-grow mobile:mb-[16px]">
           <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 name="province" class="pr-[16px] flex-grow mobile:mb-[16px]">
+          <UDropdown
+            v-model="province"
+            :items="[]"
+            class="w-full"
+            :popper="{
+              placement: 'bottom-start',
+            }"
+          >
+            <UInput
+              class="w-full"
+              color="white"
+              :label="t('create-account.contact-form.province')"
+              trailing-icon="i-heroicons-chevron-down-20-solid"
+            />
+          </UDropdown>
         </UFormGroup>
-        <UFormGroup name="postalCode" class="pr-[16px] flex-grow">
+        <UFormGroup name="postalCode" class="pr-[16px] flex-grow mobile:mb-[16px]">
           <UInput v-model="postalCode" :placeholder="t('create-account.contact-form.postalCode')" />
         </UFormGroup>
       </div>
@@ -37,10 +70,11 @@
 </template>
 
 <script setup lang="ts">
-import { formState } from '@/stores/strr'
+const { formState } = defineProps<{ formState: any }>()
 
 const {
   unitAddress: {
+    useMailing,
     nickname,
     country,
     address,