mirror of
https://github.com/maybe-finance/maybe.git
synced 2025-08-09 15:35:22 +02:00
Add Country select to real estate forms
This commit is contained in:
parent
2b7924247e
commit
b67354708b
5 changed files with 31 additions and 5 deletions
|
@ -149,6 +149,7 @@ describe('Accounts', () => {
|
||||||
cy.contains('h4', 'Add real estate')
|
cy.contains('h4', 'Add real estate')
|
||||||
|
|
||||||
// Details
|
// Details
|
||||||
|
cy.get('input[name="country"]').select('GB')
|
||||||
cy.get('input[name="line1"]').focus().type('123 Example St')
|
cy.get('input[name="line1"]').focus().type('123 Example St')
|
||||||
cy.get('input[name="city"]').type('New York')
|
cy.get('input[name="city"]').type('New York')
|
||||||
cy.get('input[name="state"]').type('NY')
|
cy.get('input[name="state"]').type('NY')
|
||||||
|
@ -187,6 +188,7 @@ describe('Accounts', () => {
|
||||||
openEditAccountModal()
|
openEditAccountModal()
|
||||||
|
|
||||||
cy.getByTestId('property-form').within(() => {
|
cy.getByTestId('property-form').within(() => {
|
||||||
|
cy.get('input[name="country]').should('have.value', 'GB').clear().select('FR')
|
||||||
cy.get('input[name="line1"]')
|
cy.get('input[name="line1"]')
|
||||||
.should('have.value', '123 Example St')
|
.should('have.value', '123 Example St')
|
||||||
.clear()
|
.clear()
|
||||||
|
|
|
@ -19,6 +19,7 @@ export function AddProperty({ defaultValues }: { defaultValues: Partial<CreatePr
|
||||||
line1: defaultValues.line1 ?? '',
|
line1: defaultValues.line1 ?? '',
|
||||||
city: defaultValues.city ?? '',
|
city: defaultValues.city ?? '',
|
||||||
state: defaultValues.state ?? '',
|
state: defaultValues.state ?? '',
|
||||||
|
country: defaultValues.country ?? 'US',
|
||||||
zip: defaultValues.zip ?? '',
|
zip: defaultValues.zip ?? '',
|
||||||
startDate: defaultValues.startDate ?? null,
|
startDate: defaultValues.startDate ?? null,
|
||||||
originalBalance: defaultValues.originalBalance ?? null,
|
originalBalance: defaultValues.originalBalance ?? null,
|
||||||
|
@ -28,6 +29,7 @@ export function AddProperty({ defaultValues }: { defaultValues: Partial<CreatePr
|
||||||
line1,
|
line1,
|
||||||
city,
|
city,
|
||||||
state,
|
state,
|
||||||
|
country,
|
||||||
zip,
|
zip,
|
||||||
originalBalance,
|
originalBalance,
|
||||||
currentBalance,
|
currentBalance,
|
||||||
|
@ -48,6 +50,7 @@ export function AddProperty({ defaultValues }: { defaultValues: Partial<CreatePr
|
||||||
line1,
|
line1,
|
||||||
city,
|
city,
|
||||||
state,
|
state,
|
||||||
|
country,
|
||||||
zip,
|
zip,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -16,7 +16,7 @@ export function EditProperty({ account }: { account: SharedType.AccountDetail })
|
||||||
<PropertyForm
|
<PropertyForm
|
||||||
mode="update"
|
mode="update"
|
||||||
defaultValues={(account.propertyMeta as any)?.address as UpdatePropertyFields}
|
defaultValues={(account.propertyMeta as any)?.address as UpdatePropertyFields}
|
||||||
onSubmit={async ({ line1, city, state, zip, ...rest }) => {
|
onSubmit={async ({ line1, city, state, country, zip, ...rest }) => {
|
||||||
await updateAccount.mutateAsync({
|
await updateAccount.mutateAsync({
|
||||||
id: account.id,
|
id: account.id,
|
||||||
data: {
|
data: {
|
||||||
|
@ -30,6 +30,7 @@ export function EditProperty({ account }: { account: SharedType.AccountDetail })
|
||||||
line1,
|
line1,
|
||||||
city,
|
city,
|
||||||
state,
|
state,
|
||||||
|
country,
|
||||||
zip,
|
zip,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import type { CreatePropertyFields, UpdatePropertyFields } from '@maybe-finance/client/shared'
|
import type { CreatePropertyFields, UpdatePropertyFields } from '@maybe-finance/client/shared'
|
||||||
import { Button, Input } from '@maybe-finance/design-system'
|
import { Button, Input, Listbox } from '@maybe-finance/design-system'
|
||||||
import { DateUtil } from '@maybe-finance/shared'
|
import { DateUtil, Geo } from '@maybe-finance/shared'
|
||||||
import { useForm } from 'react-hook-form'
|
import { Controller, useForm } from 'react-hook-form'
|
||||||
import { AccountValuationFormFields } from '../AccountValuationFormFields'
|
import { AccountValuationFormFields } from '../AccountValuationFormFields'
|
||||||
|
|
||||||
type Props =
|
type Props =
|
||||||
|
@ -36,7 +36,26 @@ export default function PropertyForm({ mode, defaultValues, onSubmit }: Props) {
|
||||||
<section className="space-y-4 mb-8">
|
<section className="space-y-4 mb-8">
|
||||||
<h6 className="text-white uppercase">Location</h6>
|
<h6 className="text-white uppercase">Location</h6>
|
||||||
<div className="space-y-4">
|
<div className="space-y-4">
|
||||||
<Input type="text" label="Country" value="United States" readOnly disabled />
|
<Controller
|
||||||
|
name="country"
|
||||||
|
rules={{ required: true }}
|
||||||
|
control={control}
|
||||||
|
render={({ field }) => (
|
||||||
|
<Listbox {...field}>
|
||||||
|
<Listbox.Button label="Country">
|
||||||
|
{Geo.countries.find((c) => c.code === field.value)?.name ||
|
||||||
|
'Select'}
|
||||||
|
</Listbox.Button>
|
||||||
|
<Listbox.Options className="max-h-[300px] custom-gray-scroll">
|
||||||
|
{Geo.countries.map((country) => (
|
||||||
|
<Listbox.Option key={country.code} value={country.code}>
|
||||||
|
{country.name}
|
||||||
|
</Listbox.Option>
|
||||||
|
))}
|
||||||
|
</Listbox.Options>
|
||||||
|
</Listbox>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
|
||||||
<Input
|
<Input
|
||||||
type="text"
|
type="text"
|
||||||
|
|
|
@ -16,6 +16,7 @@ type PropertyMetadataValues = {
|
||||||
line1: string
|
line1: string
|
||||||
city: string
|
city: string
|
||||||
state: string
|
state: string
|
||||||
|
country: string
|
||||||
zip: string
|
zip: string
|
||||||
}
|
}
|
||||||
export type CreatePropertyFields = PropertyMetadataValues & AccountValuationFields
|
export type CreatePropertyFields = PropertyMetadataValues & AccountValuationFields
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue