7 files changed, 112 insertions, 8 deletions
diff --git a/src/clients/actions.ts b/src/clients/actions.ts
index cb5ba23..acc5ad3 100644
--- a/src/clients/actions.ts
+++ b/src/clients/actions.ts
@@ -32,14 +32,16 @@ export async function editAccount({ request }) {
   return redirect("/account");
 }
 
-export async function editAddress({ params, request }) {
+export async function authenticatedEdit({ request }) {
   clearSessionStorage();
   const client = new ApiClient();
+  const paths = new URL(request.url).pathname.split('/');
+  const request_path = paths.slice(0, paths.length - 1).join('/');
   let form_data = await request.formData();
   form_data = deleteEmptyFields(form_data);
 
   try {
-    await client.put(`/account/addresses/${params.addressId}`, form_data);
+    await client.put(request_path, form_data);
 
     return redirect("/account");
   } catch(error) {
diff --git a/src/clients/loaders.ts b/src/clients/loaders.ts
index 618e593..7e44f16 100644
--- a/src/clients/loaders.ts
+++ b/src/clients/loaders.ts
@@ -20,6 +20,17 @@ export async function addressLoader({ params }) {
   return request;
 }
 
+export async function cardLoader({ params }) {
+  const client = new ApiClient();
+  const path = `/account/cards/${ params.cardId }`;
+  const request = await client.authenticatedGet(path);
+
+  if(request.response)
+    return redirect("/account");
+    
+  return request;
+}
+
 export async function accountLoader() {
   const client = new ApiClient();
   
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>
   );
diff --git a/src/main.tsx b/src/main.tsx
index f1020b1..404cc0f 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -7,11 +7,12 @@ import Companies from "./routes/companies/companies";
 import Account from "./routes/account/account";
 import { EditAccount } from './routes/account/edit';
 import { Edit as EditAddress } from "./routes/account/addresses/edit";
-import { createAddress, editAccount, editAddress } from './clients/actions';
+import { createAddress, editAccount, authenticatedEdit } from './clients/actions';
 import Layout from "./components/layout";
-import { accountLoader, loader, productLoader, addressLoader } from "./clients/loaders"; 
+import { accountLoader, loader, productLoader, addressLoader, cardLoader } from "./clients/loaders"; 
 import './index.css';
 import { Create as CreateAddress } from './routes/account/addresses/create';
+import { Edit as EditCard } from './routes/account/cards/edit';
 
 const routes = [
   {
@@ -44,7 +45,7 @@ const routes = [
     path: "/account/addresses/:addressId/edit",
     element: <EditAddress/>,
     loader: addressLoader,
-    action: editAddress,
+    action: authenticatedEdit,
   },
   {
     path: "/account/addresses/new",
@@ -52,6 +53,12 @@ const routes = [
     action: createAddress
   },
   {
+    path: "/account/cards/:cardId/edit",
+    element: <EditCard/>,
+    loader: cardLoader,
+    action: authenticatedEdit
+  },
+  {
     path: '/',
     element: <Navigate to='/products'/>
   }
diff --git a/src/routes/account/cards/edit.tsx b/src/routes/account/cards/edit.tsx
new file mode 100644
index 0000000..de055ba
--- /dev/null
+++ b/src/routes/account/cards/edit.tsx
@@ -0,0 +1,19 @@
+import CardForm from "../../../components/forms/card_form";
+import { useLoaderData, useActionData } from "react-router-dom";
+import MainContentLayout from "../../../components/main_content_layout";
+
+export function Edit() {
+  const card = useLoaderData().data.data.attributes;
+  const errors = useActionData();
+
+  return(
+    <MainContentLayout>
+      <div className="w-4/5 my-6">
+          <h1 className="my-6 text-3xl">
+            Editar método de pago
+          </h1>
+          <CardForm card={card} errors={errors}/>
+        </div>
+    </MainContentLayout>
+  );
+}
+\ No newline at end of file