Add Country select to real estate forms

apps/e2e/src/e2e/accounts.cy.ts

@@ -149,6 +149,7 @@ describe('Accounts', () => {
         cy.contains('h4', 'Add real estate')
 
         // Details
+        cy.get('input[name="country"]').select('GB')
         cy.get('input[name="line1"]').focus().type('123 Example St')
         cy.get('input[name="city"]').type('New York')
         cy.get('input[name="state"]').type('NY')
@@ -187,6 +188,7 @@ describe('Accounts', () => {
         openEditAccountModal()
 
         cy.getByTestId('property-form').within(() => {
+            cy.get('input[name="country]').should('have.value', 'GB').clear().select('FR')
             cy.get('input[name="line1"]')
                 .should('have.value', '123 Example St')
                 .clear()

libs/client/features/src/accounts-manager/property/AddProperty.tsx

@@ -19,6 +19,7 @@ export function AddProperty({ defaultValues }: { defaultValues: Partial<CreatePr
                     line1: defaultValues.line1 ?? '',
                     city: defaultValues.city ?? '',
                     state: defaultValues.state ?? '',
+                    country: defaultValues.country ?? 'US',
                     zip: defaultValues.zip ?? '',
                     startDate: defaultValues.startDate ?? null,
                     originalBalance: defaultValues.originalBalance ?? null,
@@ -28,6 +29,7 @@ export function AddProperty({ defaultValues }: { defaultValues: Partial<CreatePr
                     line1,
                     city,
                     state,
+                    country,
                     zip,
                     originalBalance,
                     currentBalance,
@@ -48,6 +50,7 @@ export function AddProperty({ defaultValues }: { defaultValues: Partial<CreatePr
                                 line1,
                                 city,
                                 state,
+                                country,
                                 zip,
                             },
                         },

libs/client/features/src/accounts-manager/property/EditProperty.tsx

@@ -16,7 +16,7 @@ export function EditProperty({ account }: { account: SharedType.AccountDetail })
         <PropertyForm
             mode="update"
             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({
                     id: account.id,
                     data: {
@@ -30,6 +30,7 @@ export function EditProperty({ account }: { account: SharedType.AccountDetail })
                                     line1,
                                     city,
                                     state,
+                                    country,
                                     zip,
                                 },
                             },

libs/client/features/src/accounts-manager/property/PropertyForm.tsx

@@ -1,7 +1,7 @@
 import type { CreatePropertyFields, UpdatePropertyFields } from '@maybe-finance/client/shared'
-import { Button, Input } from '@maybe-finance/design-system'
-import { DateUtil } from '@maybe-finance/shared'
-import { useForm } from 'react-hook-form'
+import { Button, Input, Listbox } from '@maybe-finance/design-system'
+import { DateUtil, Geo } from '@maybe-finance/shared'
+import { Controller, useForm } from 'react-hook-form'
 import { AccountValuationFormFields } from '../AccountValuationFormFields'
 
 type Props =
@@ -36,7 +36,26 @@ export default function PropertyForm({ mode, defaultValues, onSubmit }: Props) {
             <section className="space-y-4 mb-8">
                 <h6 className="text-white uppercase">Location</h6>
                 <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
                         type="text"

libs/client/shared/src/providers/AccountContextProvider.tsx

@@ -16,6 +16,7 @@ type PropertyMetadataValues = {
     line1: string
     city: string
     state: string
+    country: string
     zip: string
 }
 export type CreatePropertyFields = PropertyMetadataValues & AccountValuationFields