Skip to content

Commit

Permalink
UI - hosts step 2 first cut
Browse files Browse the repository at this point in the history
Signed-off-by: Kial Jinnah <kialj876@gmail.com>
  • Loading branch information
kialj876 committed Nov 29, 2024
1 parent 60d717b commit d2b208d
Show file tree
Hide file tree
Showing 32 changed files with 1,861 additions and 776 deletions.
7 changes: 7 additions & 0 deletions strr-base-web/app/app.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ export default defineAppConfig({
},
gap: { sm: 'gap-x-2.5' }
},
checkbox: {
wrapper: 'space-x-0',
base: 'size-5 cursor-pointer m-0'
},
input: {
file: {
base: 'file:text-gray-700 file:pt-2'
Expand All @@ -37,6 +41,9 @@ export default defineAppConfig({
}
}
},
radio: {
base: 'size-5 cursor-pointer'
},
radioGroup: {
wrapper: 'max-w-bcGovInput'
},
Expand Down
19 changes: 19 additions & 0 deletions strr-base-web/app/components/connect/InfoWithIcon.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<script setup lang="ts">
defineProps<{
icon: string,
iconClass?: string,
content?: string,
contentClass?: string,
wrapperClass?: string
}>()
</script>
<template>
<div :class="wrapperClass || 'flex space-x-2'">
<UIcon :name="icon" :class="iconClass || 'size-5'" />
<div :class="contentClass || 'space-y-3'">
<slot>
<p>{{ content || '' }}</p>
</slot>
</div>
</div>
</template>
5 changes: 2 additions & 3 deletions strr-base-web/app/components/connect/form/address/Display.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ const regionNamesInEnglish = new Intl.DisplayNames(['en'], { type: 'region' })
const addressData = computed((): string[] => {
return [
[
props.address.street || [
[props.address.unitNumber, props.address.streetNumber].filter(val => !!val).join('-'),
props.address.street
props.address.streetName
].filter(val => !!val).join(' ') || '',
props.address.street || '',
props.address.streetAdditional || '',
[props.address.city, props.address.region, props.address.postalCode].filter(val => !!val).join(' ') || '',
regionNamesInEnglish.of(props.address.country || '') || props.address.country || ''
Expand Down
34 changes: 21 additions & 13 deletions strr-base-web/app/components/connect/form/address/Index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,15 @@ const props = defineProps<{
disabledFields?: AddressField[],
excludedFields?: AddressField[],
// TODO: cleanup below strategies
hideStreetHint?: boolean,
locationDescLabel?: boolean,
unitNumbRequired?: boolean
}>()
const checkFieldsExcluded = (fields: AddressField[]) => {
return fields.every(field => props.excludedFields?.includes(field))
}
const { address: canadaPostAddress, enableAddressComplete } = useCanadaPostAddress()
const countries = iscCountriesListSortedByName
Expand Down Expand Up @@ -105,7 +110,7 @@ const addId = useId()
<div class="space-y-3">
<!-- country menu -->
<UFormGroup
v-if="!excludedFields?.includes('country')"
v-if="!checkFieldsExcluded(['country'])"
:name="schemaPrefix + 'country'"
class="grow"
>
Expand Down Expand Up @@ -136,10 +141,13 @@ const addId = useId()
</template>
</UFormGroup>
<!-- street number / name / unit number -->
<div class="flex flex-col gap-3 sm:flex-row">
<div
v-if="!checkFieldsExcluded(['streetNumber', 'streetName', 'unitNumber'])"
class="flex flex-col gap-3 sm:flex-row"
>
<!-- street number input -->
<ConnectFormFieldGroup
v-if="!excludedFields?.includes('streetNumber')"
v-if="!checkFieldsExcluded(['streetNumber'])"
:id="id + '-streetNumber'"
v-model="streetNumber"
class="w-full grow"
Expand All @@ -154,7 +162,7 @@ const addId = useId()
/>
<!-- street name input -->
<ConnectFormFieldGroup
v-if="!excludedFields?.includes('streetName')"
v-if="!checkFieldsExcluded(['streetName'])"
:id="id + '-streetName'"
v-model="streetName"
class="w-full grow"
Expand All @@ -169,7 +177,7 @@ const addId = useId()
/>
<!-- unit number input -->
<ConnectFormFieldGroup
v-if="!excludedFields?.includes('unitNumber')"
v-if="!checkFieldsExcluded(['unitNumber'])"
:id="schemaPrefix + 'unitNumber'"
v-model="unitNumber"
class="w-full grow"
Expand All @@ -183,7 +191,7 @@ const addId = useId()
</div>
<!-- street input -->
<UFormGroup
v-if="!excludedFields?.includes('street')"
v-if="!checkFieldsExcluded(['street'])"
:name="schemaPrefix + 'street'"
class="grow"
>
Expand All @@ -204,7 +212,7 @@ const addId = useId()
/>
</template>
<template #help>
<span :id="schemaPrefix + 'street-' + addId">
<span v-if="!hideStreetHint" :id="schemaPrefix + 'street-' + addId">
{{ $t('text.streetHint') }}
</span>
</template>
Expand All @@ -217,7 +225,7 @@ const addId = useId()
</UFormGroup>
<!-- street line 2 -->
<UFormGroup
v-if="!excludedFields?.includes('streetAdditional')"
v-if="!checkFieldsExcluded(['streetAdditional'])"
:name="schemaPrefix + 'streetAdditional'"
class="grow"
>
Expand All @@ -230,10 +238,10 @@ const addId = useId()
:disabled="disabledFields?.includes('streetAdditional')"
/>
</UFormGroup>
<div class="flex flex-col gap-3 sm:flex-row">
<div v-if="!checkFieldsExcluded(['city', 'region', 'postalCode'])" class="flex flex-col gap-3 sm:flex-row">
<!-- city input -->
<ConnectFormFieldGroup
v-if="!excludedFields?.includes('city')"
v-if="!checkFieldsExcluded(['city'])"
:id="schemaPrefix + 'city'"
v-model="city"
class="w-full grow"
Expand All @@ -246,7 +254,7 @@ const addId = useId()
/>
<!-- region input/menu -->
<UFormGroup
v-if="!excludedFields?.includes('region')"
v-if="!checkFieldsExcluded(['region'])"
:name="schemaPrefix + 'region'"
class="w-full grow"
>
Expand Down Expand Up @@ -291,7 +299,7 @@ const addId = useId()
</UFormGroup>
<!-- postal code input -->
<ConnectFormFieldGroup
v-if="!excludedFields?.includes('postalCode')"
v-if="!checkFieldsExcluded(['postalCode'])"
:id="schemaPrefix + 'postalCode'"
v-model="postalCode"
class="w-full grow"
Expand All @@ -306,7 +314,7 @@ const addId = useId()
</div>
<!-- delivery details input -->
<UFormGroup
v-if="!excludedFields?.includes('locationDescription')"
v-if="!checkFieldsExcluded(['locationDescription'])"
:name="schemaPrefix + 'locationDescription'"
>
<UTextarea
Expand Down
13 changes: 11 additions & 2 deletions strr-base-web/app/locales/en-CA.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export default {
inactiveAccount: 'INACTIVE ACCOUNT'
},
btn: {
done: 'Done',
getStarted: 'Get Started',
goHome: 'Go Home',
goBack: 'Go Back',
Expand Down Expand Up @@ -117,9 +118,13 @@ export default {
genericLogin: 'Generic Login Image'
},
label: {
additionalInfo: 'Additional Information',
applicationDate: 'Application Date',
born: 'Born',
details: 'Details',
expiryDate: 'Expiry Date',
registrationDate: 'Registration Date',
role: 'Role',
note: 'Note',
optional: 'Optional',
characters: 'characters',
Expand Down Expand Up @@ -177,16 +182,20 @@ export default {
},
socialInsuranceNumber: 'Social Insurance Number (SIN)',
taxNumber: 'Tax Number',
craBusTaxNumber: 'CRA Business Tax Number',
craTaxNumber: 'CRA Tax Number',
craTaxNumberExtra: 'CRA Tax Number (SIN, ITN, or TTN)',
busName: 'Business Name',
busNameLegal: 'Legal Name',
busNameLegal: 'Business Legal Name',
corpNum: 'Incorporation Number',
busNum: 'Business Number',
busNumOpt: 'Business Number (Optional)',
busNumOpt: 'Canada Revenue Agency Business Number (Optional)',
cpbcLicNum: 'CPBC Licence Number',
registrationNum: 'Registration Number',
applicationNum: 'Application Number',
homeJurisdiction: 'Home Jurisdiction',
homeJurisdictionOpt: 'Home Jurisdiction (Optional)',
legalName: 'Legal Name',
name: 'Name',
mailingAddress: 'Mailing Address',
deliveryAddress: 'Delivery Address',
Expand Down
1 change: 1 addition & 0 deletions strr-base-web/app/utils/connect-validation/phone.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { z } from 'zod'
import { getRequiredNonEmptyString, optionalOrEmptyString } from '.'

export const getRequiredPhone = (countryCodeMessage: string, numberMessage: string) => z.object({
countryIso2: optionalOrEmptyString,
countryCode: getRequiredNonEmptyString(countryCodeMessage),
number: getRequiredNonEmptyString(numberMessage),
extension: optionalOrEmptyString
Expand Down
82 changes: 82 additions & 0 deletions strr-host-pm-web/app/components/form/AddOwners.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
<script setup lang="ts">
defineProps<{ isComplete: boolean }>()
const contactStore = useHostOwnerStore()
const { hostOwners, hasHost, hasCoHost, hasCompParty, hasPropertyManager } = storeToRefs(contactStore)
const editingIndex = ref<number | undefined>(undefined)
const addingNewType = ref<OwnerType | undefined>(undefined)
</script>

<template>
<div data-testid="add-owner" class="space-y-10">
<div>
<p class="font-bold">
{{ $t('strr.text.applicationMustInclude') }}
</p>
<!-- TODO: move to generic component as 'ConnectList' -->
<ul class="mt-5 list-outside list-disc space-y-3 pl-10">
<li
:class="hasCompParty || (!hasCompParty && isComplete)
? '-ml-6 flex list-none space-x-1'
: ''"
>
<UIcon v-if="hasCompParty" name="i-mdi-check" class="size-5 text-green-600" />
<UIcon v-else-if="!hasCompParty && isComplete" name="i-mdi-close" class="mt-[2px] size-5 text-red-600" />
<span>{{ $t('strr.text.includeCompletingParty') }}</span>
</li>
<li
:class="hasHost || (!hasHost && isComplete)
? '-ml-6 flex list-none space-x-1'
: ''"
>
<UIcon v-if="hasHost" name="i-mdi-check" class="size-5 text-green-600" />
<UIcon v-else-if="!hasHost && isComplete" name="i-mdi-close" class="mt-[2px] size-5 text-red-600" />
<span>{{ $t('strr.text.includeHost') }}</span>
</li>
<li
:class="hasPropertyManager || isComplete
? '-ml-6 flex list-none space-x-1'
: ''"
>
<UIcon v-if="hasPropertyManager" name="i-mdi-check" class="size-5 text-green-600" />
<UIcon
v-else-if="isComplete"
name="i-mdi-information-outline"
class="mt-[2px] size-5 text-blue-500"
/>
<span>{{ $t('strr.text.includePropertyManager') }}</span>
</li>
</ul>
</div>
<div class="flex space-x-5">
<UButton
:label="$t('strr.label.addIndividual')"
class="px-5 py-3"
color="primary"
icon="i-mdi-account-plus"
variant="outline"
:disabled="editingIndex !== undefined || !!addingNewType || (hasHost && hasCoHost)"
@click="addingNewType = OwnerType.INDIVIDUAL"
/>
<UButton
:label="$t('strr.label.addBusiness')"
class="px-5 py-3"
color="primary"
icon="i-mdi-domain-plus"
variant="outline"
:disabled="editingIndex !== undefined || !!addingNewType || (hasHost && hasPropertyManager)"
@click="addingNewType = OwnerType.BUSINESS"
/>
</div>
<FormOwner
v-if="addingNewType"
:owner-type="addingNewType"
:is-complete="isComplete"
@cancel="addingNewType = undefined"
@done="contactStore.addHostOwner($event); addingNewType = undefined"
/>
<SummaryOwners v-if="hostOwners.length" editable :disable-actions="addingNewType !== undefined" />
</div>
</template>
Loading

0 comments on commit d2b208d

Please sign in to comment.