3 files changed, 47 insertions, 25 deletions

diff --git a/src/components/addresses_table.tsx b/src/components/addresses_table.tsx
index ae46f21..ea7d840 100644
--- a/src/components/addresses_table.tsx
+++ b/src/components/addresses_table.tsx
@@ -10,6 +10,12 @@ export default function AddressesTable({ addresses }) {
       <h1 className="text-2xl my-2">
         Direcciones de envío
       </h1>
+      <div className="absolute top-0 right-0">
+        <a type="button" className="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 mr-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
+          href="/account/addresses/new">
+          Nueva dirección
+        </a>
+      </div>
       <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
         <thead className="bg-blue-arma text-xs text-white uppercase dark:bg-gray-700 dark:text-gray-400">
         <tr>
diff --git a/src/components/forms/address_form.tsx b/src/components/forms/address_form.tsx
index 11b0191..53822bb 100644
--- a/src/components/forms/address_form.tsx
+++ b/src/components/forms/address_form.tsx
@@ -1,72 +1,72 @@
 import { Form } from "react-router-dom";
-import { formHasErrors } from "../../lib/form_utils";
 import countryList from "react-select-country-list";
 import FieldProperties from "./fields/field_properties";
 import Field from "./fields/field";
 import SelectField from "./fields/select_field";
+import { useEffect } from "react";
+import { setFieldErrorMessages } from "../../lib/form_utils";
 
-function getFieldProperties(address: any) {
+function getFieldProperties(address?: any) {
   const fields: Array<FieldProperties> = [
     {
       id: "street-field",
       type: "text",
       name: "street",
       label: "Calle",
-      placeholder: address.street
+      placeholder: address?.street
     },
     {
       id: "number-field",
       type: "number",
       name: "number",
       label: "Número",
-      placeholder: address.number
+      placeholder: address?.number
     },
     {
       id: "zip-code-field",
       type: "number",
       name: "zip_code",
       label: "Código postal",
-      placeholder: address.zip_code
+      placeholder: address?.zip_code
     },
     {
       id: "city-field",
       type: "text",
       name: "city",
       label: "Ciudad",
-      placeholder: address.city
+      placeholder: address?.city
     }
   ];
 
-  for(const field of fields) {
-    if(sessionStorage.getItem(field.name)) {
-      field.error_message = sessionStorage.getItem(field.name);
-    }
-  }
-
   return fields;
 }
 
 function getCountrySelectOptions(address: any, country_code: string) {
-  if(country_code == address.country)
+  if(address && country_code == address.country)
     return (<option key={ country_code } value={ country_code } selected>{ countryList().getLabel(country_code) }</option>);
   else
     return (<option key={ country_code } value={ country_code }>{ countryList().getLabel(country_code) }</option>);
 }
 
-export default function AddressForm({ address }) {
+
+export default function AddressForm({ address = null, errors = null }) {
+  let field_properties = getFieldProperties(address);
   const select_field_properties: FieldProperties = {
     id: "country-field",
     type: "select",
-    name: "city",
+    name: "country",
     label: "Ciudad"
   }
 
+  if(errors)
+    field_properties = setFieldErrorMessages(field_properties, errors);
+  
   const options = countryList().getValues().map(country_code => 
     getCountrySelectOptions(address, country_code)
   );
 
-  const fields = getFieldProperties(address).map(field_properties =>
-    <Field properties={field_properties}/>
+  const fields = field_properties.map(field_property =>
+    <Field properties={field_property}/>
   );
 
   return(
diff --git a/src/components/forms/fields/select_field.tsx b/src/components/forms/fields/select_field.tsx
index 75859d9..4d67754 100644
--- a/src/components/forms/fields/select_field.tsx
+++ b/src/components/forms/fields/select_field.tsx
@@ -1,10 +1,26 @@
 export default function SelectField({ properties, options }) {
-  return(
-    <div className="mb-6">
-      <label className="block mb-2 text-lg text-gray-900 dark:text-white">{properties.label}</label>
-      <select id={properties.id} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
-        {options}
-      </select>
-    </div>
-  );
+  let select_field;
+
+  if(properties.error_message) {
+    select_field = (
+      <div className="mb-6">
+        <label className="block mb-2 text-lg text-red-700 dark:text-red-500">{properties.label}</label>
+        <select id={properties.id} name={properties.name} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          {options}
+        </select>
+        <p className="mt-2 text-sm text-red-600 dark:text-red-500"> {properties.error_message }</p>
+      </div>
+    );
+  } else {
+    select_field = (
+      <div className="mb-6">
+        <label className="block mb-2 text-lg text-gray-900 dark:text-white">{properties.label}</label>
+        <select id={properties.id} name={properties.name} className="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500">
+          {options}
+        </select>
+      </div>
+    );
+  }
+
+  return select_field;
 }
\ No newline at end of file