feat(proformas): mejorar la estructura de la página de actualización de proformas y corregir selectores en pruebas E2E

This commit is contained in:
David Arranz 2026-09-14 16:41:35 +02:00
parent ed58bd1e64
commit 6b05ee01f3
3 changed files with 98 additions and 134 deletions

View File

@ -49,14 +49,22 @@ export const ProformaUpdatePage = () => {
};
if (ctrl.isInitialLoading) {
return <ProformaUpdateSkeleton />;
return (
<RdxPageFrame>
<RdxPageContainer width="content">
<RdxPageContent>
<ProformaUpdateSkeleton />
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
}
if (ctrl.pageError) {
return (
<RdxPageFrame>
<RdxPageContainer width="full">
<div className="mx-auto w-full max-w-3xl">
<RdxPageContainer width="content">
<RdxPageContent>
<PageErrorState
description={ctrl.pageError.description}
primaryAction={
@ -90,13 +98,12 @@ export const ProformaUpdatePage = () => {
title={ctrl.pageError.title}
variant={ctrl.pageError.variant}
/>
</div>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
}
const hasPageAlerts = updateCtrl.isUpdateError || updateCtrl.isSeriesLoadError;
const actionBar = (
<RdxEditorActionBar
leading={
@ -120,6 +127,7 @@ export const ProformaUpdatePage = () => {
primary={
<RhfSubmitActionButton
busyLabel="Guardando..."
data-testid="proforma-update-submit"
disabled={updateCtrl.isUpdating}
formId={updateCtrl.formId}
isBusy={updateCtrl.form.formState.isSubmitting}
@ -188,61 +196,50 @@ export const ProformaUpdatePage = () => {
}
>
<RdxPageContainer width="full">
{hasPageAlerts ? (
<RdxPageContainer className="pb-0" width="full">
<RdxPageContent spacing="compact">
{updateCtrl.isUpdateError && (
<ErrorAlert
message={
(updateCtrl.updateError as Error)?.message ??
t(
"pages.proformas.update.error_msg",
"Revisa los datos e inténtalo de nuevo."
<RdxPageContent>
{updateCtrl.isUpdateError ? (
<ErrorAlert
message={
(updateCtrl.updateError as Error)?.message ??
t("pages.proformas.update.error_msg", "Revisa los datos e inténtalo de nuevo.")
}
title={t("pages.proformas.update.error_title", "No se pudo guardar los cambios")}
/>
) : null}
{updateCtrl.isSeriesLoadError ? (
<ErrorAlert
message={
updateCtrl.seriesLoadError instanceof Error
? updateCtrl.seriesLoadError.message
: t(
"pages.proformas.update.series_load_error.message",
"Inténtalo de nuevo más tarde."
)
}
title={t(
"pages.proformas.update.error_title",
"No se pudo guardar los cambios"
)}
/>
}
title={t(
"pages.proformas.update.series_load_error.title",
"No se pudieron cargar las series de facturación"
)}
/>
) : null}
{updateCtrl.isSeriesLoadError && (
<ErrorAlert
message={
updateCtrl.seriesLoadError instanceof Error
? updateCtrl.seriesLoadError.message
: t(
"pages.proformas.update.series_load_error.message",
"Inténtalo de nuevo más tarde."
)
}
title={t(
"pages.proformas.update.series_load_error.title",
"No se pudieron cargar las series de facturación"
)}
/>
)}
</RdxPageContent>
</RdxPageContainer>
) : null}
<ProformaUpdateEditorForm
className={hasPageAlerts ? "pt-0" : undefined}
formId={updateCtrl.formId}
isSubmitting={updateCtrl.isUpdating}
itemsCtrl={updateCtrl.itemsCtrl}
onChangeCustomerClick={selectCustomerCtrl.selectCtrl.openDialog}
onCreateCustomerClick={selectCustomerCtrl.openQuickCreateDialog}
onPaymentTermChange={updateCtrl.handlePaymentTermChange}
onReset={updateCtrl.resetForm}
onSubmit={updateCtrl.onSubmit}
paymentCtrl={updateCtrl.paymentCtrl}
selectedCustomer={updateCtrl.selectedCustomer}
seriesOptions={updateCtrl.seriesOptions}
taxCtrl={updateCtrl.taxCtrl}
totalsCtrl={updateCtrl.totalsCtrl}
/>
<ProformaUpdateEditorForm
formId={updateCtrl.formId}
isSubmitting={updateCtrl.isUpdating}
itemsCtrl={updateCtrl.itemsCtrl}
onChangeCustomerClick={selectCustomerCtrl.selectCtrl.openDialog}
onCreateCustomerClick={selectCustomerCtrl.openQuickCreateDialog}
onPaymentTermChange={updateCtrl.handlePaymentTermChange}
onReset={updateCtrl.resetForm}
onSubmit={updateCtrl.onSubmit}
paymentCtrl={updateCtrl.paymentCtrl}
selectedCustomer={updateCtrl.selectedCustomer}
seriesOptions={updateCtrl.seriesOptions}
taxCtrl={updateCtrl.taxCtrl}
totalsCtrl={updateCtrl.totalsCtrl}
/>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>

View File

@ -29,52 +29,51 @@ export const CustomerUpdatePage = () => {
return (
<RdxPageFrame>
<RdxPageContainer width="content">
<PageErrorState
description={ctrl.pageError.description}
primaryAction={
ctrl.pageError.canRetry
? {
label: ctrl.isRetrying
? t("update.page_error.actions.retrying")
: t("update.page_error.actions.retry"),
onClick: ctrl.retryUpdate,
isLoading: ctrl.isRetrying,
}
: ctrl.pageError.variant === "forbidden"
<RdxPageContent>
<PageErrorState
description={ctrl.pageError.description}
primaryAction={
ctrl.pageError.canRetry
? {
label: t("update.page_error.actions.go_home"),
onClick: ctrl.goHome,
label: ctrl.isRetrying
? t("update.page_error.actions.retrying")
: t("update.page_error.actions.retry"),
onClick: ctrl.retryUpdate,
isLoading: ctrl.isRetrying,
}
: {
: ctrl.pageError.variant === "forbidden"
? {
label: t("update.page_error.actions.go_home"),
onClick: ctrl.goHome,
}
: {
label: t("update.page_error.actions.back_to_list"),
onClick: ctrl.goBackToList,
}
}
reference={ctrl.pageError.reference}
secondaryAction={
ctrl.pageError.canRetry
? {
label: t("update.page_error.actions.back_to_list"),
onClick: ctrl.goBackToList,
}
}
reference={ctrl.pageError.reference}
secondaryAction={
ctrl.pageError.canRetry
? {
label: t("update.page_error.actions.back_to_list"),
onClick: ctrl.goBackToList,
}
: undefined
}
title={ctrl.pageError.title}
variant={ctrl.pageError.variant}
/>
: undefined
}
title={ctrl.pageError.title}
variant={ctrl.pageError.variant}
/>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>
);
}
const hasPageAlerts = updateCtrl.isUpdateError;
return (
<FormProvider {...updateCtrl.form}>
<UnsavedChangesProvider isDirty={updateCtrl.form.formState.isDirty}>
<RdxPageFrame
contentClassName="bg-muted/20"
footer={<h1>hola</h1>}
contentClassName="bg-red-500"
header={
<CustomerUpdateHeader
formId={updateCtrl.formId}
@ -99,28 +98,16 @@ export const CustomerUpdatePage = () => {
/>
}
>
<RdxPageContainer className="bg-white" width="content">
<RdxPageContainer width="content">
<RdxPageContent>
{hasPageAlerts ? (
<RdxPageContainer className="pb-0" width="full">
<div className="flex min-w-0 flex-col gap-4">
{updateCtrl.isUpdateError && (
<ErrorAlert
message={
(updateCtrl.updateError as Error)?.message ??
t(
"pages.customers.update.error_msg",
"Revisa los datos e inténtalo de nuevo."
)
}
title={t(
"pages.customers.update.error_title",
"No se pudo guardar los cambios"
)}
/>
)}
</div>
</RdxPageContainer>
{updateCtrl.isUpdateError ? (
<ErrorAlert
message={
(updateCtrl.updateError as Error)?.message ??
t("pages.customers.update.error_msg", "Revisa los datos e inténtalo de nuevo.")
}
title={t("pages.customers.update.error_title", "No se pudo guardar los cambios")}
/>
) : null}
<CustomerUpdateEditorForm
@ -130,26 +117,6 @@ export const CustomerUpdatePage = () => {
onReset={updateCtrl.resetForm}
onSubmit={updateCtrl.onSubmit}
/>
<div className="rounded-2xl border border-border/60 bg-background px-4 py-4 shadow-xs md:px-6 md:py-6">
<div className="flex min-w-0 flex-col gap-6">
{updateCtrl.isUpdateError ? (
<ErrorAlert
message={
(updateCtrl.updateError as Error)?.message ??
t(
"pages.customers.update.error_msg",
"Revisa los datos e inténtalo de nuevo."
)
}
title={t(
"pages.customers.update.error_title",
"No se pudo guardar los cambios"
)}
/>
) : null}
</div>
</div>
</RdxPageContent>
</RdxPageContainer>
</RdxPageFrame>

View File

@ -12,18 +12,18 @@ test("CUSTOMER-INVOICES-PROFORMA-UPDATE-001: modifica referencia y descripción
const reference = `E2E ${proforma.token}`;
const description = `E2E updated draft ${proforma.token}`;
await page.locator('input[name="reference"]').fill(reference);
await page.locator('textarea[name="description"]').fill(description);
await page.locator('input[name="description"]').fill(description);
const responsePromise = page.waitForResponse(
(response) =>
response.request().method() === "PUT" &&
new URL(response.url()).pathname.endsWith(`/proformas/${proforma.id}`)
);
await page.getByTestId("submit-button").click();
await page.getByTestId("proforma-update-submit").click();
expect((await responsePromise).status()).toBe(200);
await expect(page).toHaveURL((url) => url.pathname === `/proformas/${proforma.id}/edit`);
await expect(page.locator('input[name="reference"]')).toHaveValue(reference);
await expect(page.locator('textarea[name="description"]')).toHaveValue(description);
await expect(page.locator('input[name="description"]')).toHaveValue(description);
await page.reload();
await expect(page.locator('input[name="reference"]')).toHaveValue(reference);
await expect(page.locator('textarea[name="description"]')).toHaveValue(description);
await expect(page.locator('input[name="description"]')).toHaveValue(description);
});