commit 111adbc4032cb3940df0915cde241ea388d63f10
parent b5507f586d5361308cc392ca286905f809b51ac7
Author: Florian Dold <florian@dold.me>
Date: Mon, 24 Mar 2025 13:36:30 +0100
forms: wip
Diffstat:
6 files changed, 38 insertions(+), 17 deletions(-)
diff --git a/packages/web-util/src/forms/fields/InputChoiceStacked.tsx b/packages/web-util/src/forms/fields/InputChoiceStacked.tsx
@@ -1,5 +1,6 @@
import { TranslatedString } from "@gnu-taler/taler-util";
import { Fragment, VNode, h } from "preact";
+import { useEffect } from "preact/hooks";
import { UIFormProps } from "../FormProvider.js";
import { noHandlerPropsAndNoContextForField } from "./InputArray.js";
import { LabelWithTooltipMaybeRequired } from "./InputLine.js";
@@ -31,6 +32,17 @@ export function InputChoiceStacked<Choices>(
return <Fragment />;
}
+ useEffect(() => {
+ // Reset choice if value is set to a choices that's
+ // not available to this input.
+ for (const choice of choices) {
+ if (choice.value === value) {
+ return;
+ }
+ }
+ onChange(undefined);
+ }, []);
+
return (
<div class="sm:col-span-6">
<LabelWithTooltipMaybeRequired
@@ -42,10 +54,6 @@ export function InputChoiceStacked<Choices>(
<fieldset class="mt-2">
<div class="space-y-4">
{choices.map((choice, idx) => {
- // const currentValue = !converter
- // ? choice.value
- // : converter.fromStringUI(choice.value) ?? "";
-
let clazz =
"border relative block cursor-pointer rounded-lg bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between";
if (choice.value === value) {
@@ -60,7 +68,6 @@ export function InputChoiceStacked<Choices>(
<input
type="radio"
name="server-size"
- // defaultValue={choice.value}
disabled={props.disabled}
value={
(!converter
diff --git a/packages/web-util/src/forms/forms-types.ts b/packages/web-util/src/forms/forms-types.ts
@@ -42,6 +42,7 @@ export type FormDesign<T = unknown> =
*/
export type DoubleColumnFormDesign = {
type: "double-column";
+ title?: string;
sections: DoubleColumnFormSection[];
};
diff --git a/packages/web-util/src/forms/forms-ui.tsx b/packages/web-util/src/forms/forms-ui.tsx
@@ -77,7 +77,16 @@ export function FormUI<T>({
/>
);
});
- return <Fragment>{ui}</Fragment>;
+ return (
+ <Fragment>
+ {design.title ? (
+ <h1 class="text-lg font-bold">{design.title}</h1>
+ ) : (
+ <Fragment />
+ )}
+ {ui}
+ </Fragment>
+ );
}
case "single-column": {
return (
diff --git a/packages/web-util/src/forms/gana/VQF_902_1_customer.ts b/packages/web-util/src/forms/gana/VQF_902_1_customer.ts
@@ -44,6 +44,7 @@ export function design_VQF_902_1_customer(
): DoubleColumnFormDesign {
return {
type: "double-column",
+ title: i18n.str`Identification form (basic customer information)`,
sections: [
{
title: i18n.str`Information on customer`,
@@ -71,7 +72,7 @@ export function design_VQF_902_1_customer(
title: i18n.str`Information on customer`,
description: i18n.str`The customer is a natural person`,
hide(root) {
- return root["CUSTOMER_INFO_TYPE"] !== "NATURAL_PERSON";
+ return root[TalerFormAttributes.CUSTOMER_TYPE] !== "NATURAL_PERSON";
},
fields: [
{
@@ -167,19 +168,19 @@ export function design_VQF_902_1_customer(
},
fields: [
{
- id: TalerFormAttributes.CUSTOMER_ENTITY_COMPANY_NAME,
+ id: TalerFormAttributes.COMPANY_NAME,
label: i18n.str`Company name`,
type: "text",
required: true,
},
{
- id: TalerFormAttributes.CUSTOMER_ENTITY_ADDRESS,
+ id: TalerFormAttributes.DOMICILE_ADDRESS,
label: i18n.str`Domicile`,
type: "textArea",
required: true,
},
{
- id: TalerFormAttributes.CUSTOMER_ENTITY_CONTACT_PERSON_NAME,
+ id: TalerFormAttributes.CONTACT_PERSON_NAME,
label: i18n.str`Contact person`,
type: "text",
required: false,
@@ -209,7 +210,7 @@ export function design_VQF_902_1_customer(
title: i18n.str`Information on the natural persons who establish the business relationship for legal entities and partnerships`,
description: i18n.str`For legal entities and partnerships the identity of the natural persons who establish the business relationship must be verified.`,
hide(root) {
- return root["CUSTOMER_INFO_TYPE"] !== "LEGAL_ENTITY";
+ return root[TalerFormAttributes.CUSTOMER_TYPE] !== "LEGAL_ENTITY";
},
fields: [
{
@@ -285,7 +286,10 @@ export function design_VQF_902_1_customer(
label: i18n.str`Other power of attorney arrangement`,
type: "text",
hide(value, root) {
- return root["FOUNDER_POWER_OF_ATTORNEY"] !== "OTHER";
+ return (
+ root[TalerFormAttributes.SIGNING_AUTHORITY_EVIDENCE] !==
+ "OTHER"
+ );
},
},
],
@@ -297,7 +301,7 @@ export function design_VQF_902_1_customer(
title: i18n.str`Information on the beneficial owner of the assets and/or controlling personnformation on the natural persons who establish the business relationship for legal entities and partnerships`,
description: i18n.str`For legal entities and partnerships the identity of the natural persons who establish the business relationship must be verified.`,
hide(root) {
- return root["CUSTOMER_INFO_TYPE"] !== "NATURAL_PERSON";
+ return root[TalerFormAttributes.CUSTOMER_TYPE] !== "NATURAL_PERSON";
},
fields: [
{
@@ -323,7 +327,7 @@ export function design_VQF_902_1_customer(
title: i18n.str`Information on the beneficial owner of the assets and/or controlling personnformation on the natural persons who establish the business relationship for legal entities and partnerships`,
description: i18n.str`For legal entities and partnerships the identity of the natural persons who establish the business relationship must be verified.`,
hide(root) {
- return root["CUSTOMER_INFO_TYPE"] !== "LEGAL_ENTITY";
+ return root[TalerFormAttributes.CUSTOMER_TYPE] !== "LEGAL_ENTITY";
},
fields: [
{
diff --git a/packages/web-util/src/forms/gana/taler_form_attributes.ts b/packages/web-util/src/forms/gana/taler_form_attributes.ts
@@ -124,11 +124,11 @@ export const TalerFormAttributes = {
*/
CUSTOMER_ENTITY_ADDRESS: "CUSTOMER_ENTITY_ADDRESS" as UIHandlerId,
/**
- * Description: If the customer is a legal entity.
+ * Description: Full name of the contact person.
*
* GANA Type: String
*/
- CUSTOMER_ENTITY_CONTACT_PERSON_NAME: "CUSTOMER_ENTITY_CONTACT_PERSON_NAME" as UIHandlerId,
+ CONTACT_PERSON_NAME: "CONTACT_PERSON_NAME" as UIHandlerId,
/**
* Description: If the customer is a legal entity.
*
diff --git a/packages/web-util/src/hooks/useForm.ts b/packages/web-util/src/hooks/useForm.ts
@@ -289,7 +289,7 @@ function constructFormHandler<T>(
}
case "single-column": {
design.fields.forEach((f, fieldIndex) =>
- createFieldHandler(f, undefined, `${fieldIndex}`),
+ createFieldHandler(f, undefined, `root.${fieldIndex}`),
);
break;
}
