3 files changed, 68 insertions, 3 deletions

diff --git a/src/components/forms/address_form.tsx b/src/components/forms/address_form.tsx
index 53822bb..897b09b 100644
--- a/src/components/forms/address_form.tsx
+++ b/src/components/forms/address_form.tsx
@@ -3,7 +3,6 @@ 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) {
diff --git a/src/components/forms/card_form.tsx b/src/components/forms/card_form.tsx
new file mode 100644
index 0000000..e084b7c
--- /dev/null
+++ b/src/components/forms/card_form.tsx
@@ -0,0 +1,63 @@
+import FieldProperties from "./fields/field_properties";
+import Field from "./fields/field";
+import { setFieldErrorMessages } from "../../lib/form_utils";
+import { Form } from "react-router-dom";
+
+function getFieldProperties(card?: any) {
+  const fields: Array<FieldProperties> = [
+    {
+      id: "number-field",
+      type: "number",
+      name: "number",
+      label: "Número de tarjeta",
+      placeholder: card?.number
+    },
+    {
+      id: "expiration-year-field",
+      type: "number",
+      name: "expiration_year",
+      label: "Año de expiración",
+      placeholder: card?.expiration_year
+    },
+    {
+      id: "expiration-month-field",
+      type: "number",
+      name: "expiration_month",
+      label: "Mes de expiración",
+      placeholder: card?.expiration_month
+    },
+    {
+      id: "expiration-day-field",
+      type: "number",
+      name: "expiration_day",
+      label: "Día de expiración",
+      placeholder: card?.expiration_day
+    },
+    {
+      id: "security-code-field",
+      type: "number",
+      name: "security_code",
+      label: "CVV"
+    }
+  ];
+
+  return fields;
+}
+
+export default function CardForm({ card = null, errors = null }) {
+  let field_properties = getFieldProperties(card);
+
+  if(errors)
+    field_properties = setFieldErrorMessages(field_properties, errors);
+
+  const fields = field_properties.map(prop => 
+    <Field properties={prop}/>
+  );
+
+  return (
+    <Form method="post" id="card-form">
+      {fields}
+      <button type="submit" className="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Enviar</button>
+    </Form>
+  );
+}
\ No newline at end of file
diff --git a/src/components/payment_method.tsx b/src/components/payment_method.tsx
index 66f7e54..f87d889 100644
--- a/src/components/payment_method.tsx
+++ b/src/components/payment_method.tsx
@@ -1,4 +1,6 @@
 export default function PaymentMethod({ payment_method }) {
+  const edit_address_route = `/account/cards/${ payment_method.id }/edit`;
+
   return(
     <tr className="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
       <th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
@@ -14,9 +16,10 @@ export default function PaymentMethod({ payment_method }) {
         {payment_method.attributes.expiration_year}
       </td>
       <td className="px-6 py-4">
-      <button 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">
+      <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={edit_address_route}>
         Editar
-      </button>
+      </a>
       </td>
     </tr>
   );