From b67354708b02411a3dcc37eef6406273bb049bac Mon Sep 17 00:00:00 2001
From: Silver343 <51054165+Silver343@users.noreply.github.com>
Date: Tue, 16 Jan 2024 20:12:29 +0000
Subject: [PATCH] Add Country select to real estate forms

---
 apps/e2e/src/e2e/accounts.cy.ts               |  2 ++
 .../accounts-manager/property/AddProperty.tsx |  3 +++
 .../property/EditProperty.tsx                 |  3 ++-
 .../property/PropertyForm.tsx                 | 27 ++++++++++++++++---
 .../src/providers/AccountContextProvider.tsx  |  1 +
 5 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/apps/e2e/src/e2e/accounts.cy.ts b/apps/e2e/src/e2e/accounts.cy.ts
index de33a9ea..6eba3db1 100644
--- a/apps/e2e/src/e2e/accounts.cy.ts
+++ b/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()
diff --git a/libs/client/features/src/accounts-manager/property/AddProperty.tsx b/libs/client/features/src/accounts-manager/property/AddProperty.tsx
index 880b6915..3d8d2fd6 100644
--- a/libs/client/features/src/accounts-manager/property/AddProperty.tsx
+++ b/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,
                             },
                         },
diff --git a/libs/client/features/src/accounts-manager/property/EditProperty.tsx b/libs/client/features/src/accounts-manager/property/EditProperty.tsx
index a806c727..db256dcf 100644
--- a/libs/client/features/src/accounts-manager/property/EditProperty.tsx
+++ b/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,
                                 },
                             },
diff --git a/libs/client/features/src/accounts-manager/property/PropertyForm.tsx b/libs/client/features/src/accounts-manager/property/PropertyForm.tsx
index 7506c670..eec44819 100644
--- a/libs/client/features/src/accounts-manager/property/PropertyForm.tsx
+++ b/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"
diff --git a/libs/client/shared/src/providers/AccountContextProvider.tsx b/libs/client/shared/src/providers/AccountContextProvider.tsx
index 510a4690..85261e6f 100644
--- a/libs/client/shared/src/providers/AccountContextProvider.tsx
+++ b/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