From b5885b23a8d3593428334683b8c03075ce071f3a Mon Sep 17 00:00:00 2001 From: HombreLaser Date: Sun, 21 May 2023 12:26:29 -0600 Subject: Añade edición de método de pago MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/clients/actions.ts | 6 ++-- src/clients/loaders.ts | 11 ++++++ src/components/forms/address_form.tsx | 1 - src/components/forms/card_form.tsx | 63 +++++++++++++++++++++++++++++++++++ src/components/payment_method.tsx | 7 ++-- src/main.tsx | 13 ++++++-- src/routes/account/cards/edit.tsx | 19 +++++++++++ 7 files changed, 112 insertions(+), 8 deletions(-) create mode 100644 src/components/forms/card_form.tsx create mode 100644 src/routes/account/cards/edit.tsx 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 = [ + { + 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 => + + ); + + return ( +
+ {fields} + +
+ ); +} \ 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( @@ -14,9 +16,10 @@ export default function PaymentMethod({ payment_method }) { {payment_method.attributes.expiration_year} - + ); 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,13 +45,19 @@ const routes = [ path: "/account/addresses/:addressId/edit", element: , loader: addressLoader, - action: editAddress, + action: authenticatedEdit, }, { path: "/account/addresses/new", element: , action: createAddress }, + { + path: "/account/cards/:cardId/edit", + element: , + loader: cardLoader, + action: authenticatedEdit + }, { path: '/', element: 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( + +
+

+ Editar método de pago +

+ +
+ + ); +} \ No newline at end of file -- cgit v1.2.3