aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSebastian <sebasjm@gmail.com>2023-04-25 00:34:52 -0300
committerSebastian <sebasjm@gmail.com>2023-04-25 00:35:01 -0300
commit25346a03fa2577652002583b019fd88dd92a7881 (patch)
tree9a11e45052121effdbe111503ded64e7f5518064
parentc0327fb4d329d51c419d7c88fb7a9345a2d46888 (diff)
fix #7796 and some form issues
-rw-r--r--packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx12
-rw-r--r--packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx1
-rw-r--r--packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx8
-rw-r--r--packages/merchant-backoffice-ui/src/declaration.d.ts5
-rw-r--r--packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx39
5 files changed, 61 insertions, 4 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
index 68f79bc35..3cd36a6e0 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputPaytoForm.tsx
@@ -171,7 +171,7 @@ export function InputPaytoForm<T>({
label,
tooltip,
}: Props<keyof T>): VNode {
- const { value: paytos, onChange } = useField<T>(name);
+ const { value: paytos, onChange, required } = useField<T>(name);
const [value, valueHandler] = useState<Partial<Entity>>(defaultTarget);
@@ -198,7 +198,10 @@ export function InputPaytoForm<T>({
const paytoURL = !url ? "" : url.href;
const errors: FormErrors<Entity> = {
- target: value.target === noTargetValue ? i18n.str`required` : undefined,
+ target:
+ value.target === noTargetValue && !paytos.length
+ ? i18n.str`required`
+ : undefined,
path1: !value.path1
? i18n.str`required`
: value.target === "iban"
@@ -368,6 +371,11 @@ export function InputPaytoForm<T>({
</div>
))}
{!paytos.length && i18n.str`No accounts yet.`}
+ {required && (
+ <span class="icon has-text-danger is-right">
+ <i class="mdi mdi-alert" />
+ </span>
+ )}
</div>
</div>
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx
index 495c93897..8a57a9de8 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputSelector.tsx
@@ -45,7 +45,6 @@ export function InputSelector<T>({
toStr = defaultToString,
}: Props<keyof T>): VNode {
const { error, value, onChange } = useField<T>(name);
- console.log(error);
return (
<div class="field is-horizontal">
<div class="field-label is-normal">
diff --git a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx
index c497773d9..3a3bdd6f3 100644
--- a/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx
+++ b/packages/merchant-backoffice-ui/src/components/instance/DefaultInstanceFormFields.tsx
@@ -31,6 +31,7 @@ import { InputImage } from "../form/InputImage.js";
import { InputLocation } from "../form/InputLocation.js";
import { InputPaytoForm } from "../form/InputPaytoForm.js";
import { InputWithAddon } from "../form/InputWithAddon.js";
+import { InputSelector } from "../form/InputSelector.js";
export function DefaultInstanceFormFields({
readonlyId,
@@ -59,6 +60,13 @@ export function DefaultInstanceFormFields({
tooltip={i18n.str`Legal name of the business represented by this instance.`}
/>
+ <InputSelector<Entity>
+ name="user_type"
+ label={i18n.str`Type`}
+ tooltip={i18n.str`Different type of account can have different rules and requirements.`}
+ values={["business", "individual"]}
+ />
+
<Input<Entity>
name="email"
label={i18n.str`Email`}
diff --git a/packages/merchant-backoffice-ui/src/declaration.d.ts b/packages/merchant-backoffice-ui/src/declaration.d.ts
index a9d0f3a7f..4f76b9701 100644
--- a/packages/merchant-backoffice-ui/src/declaration.d.ts
+++ b/packages/merchant-backoffice-ui/src/declaration.d.ts
@@ -278,6 +278,11 @@ export namespace MerchantBackend {
// Merchant name corresponding to this instance.
name: string;
+ // Type of the user (business or individual).
+ // Defaults to 'business'. Should become mandatory field
+ // in the future, left as optional for API compatibility for now.
+ user_type?: string;
+
email: string;
website: string;
// An optional base64-encoded logo image
diff --git a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
index bf5f5d7c9..0ef1f1270 100644
--- a/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
+++ b/packages/merchant-backoffice-ui/src/paths/admin/create/CreatePage.tsx
@@ -48,6 +48,7 @@ function with_defaults(id?: string): Partial<Entity> {
return {
id,
payto_uris: [],
+ user_type: "business",
default_pay_delay: { d_us: 2 * 1000 * 60 * 60 * 1000 }, // two hours
default_wire_fee_amortization: 1,
default_wire_transfer_delay: { d_us: 1000 * 2 * 60 * 60 * 24 * 1000 }, // two days
@@ -69,6 +70,11 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
? i18n.str`is not valid`
: undefined,
name: !value.name ? i18n.str`required` : undefined,
+ user_type: !value.user_type
+ ? i18n.str`required`
+ : value.user_type !== "business" && value.user_type !== "individual"
+ ? i18n.str`should be business or individual`
+ : undefined,
payto_uris:
!value.payto_uris || !value.payto_uris.length
? i18n.str`required`
@@ -174,7 +180,13 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
<div class="level-item has-text-centered">
<h1 class="title">
<button
- class="button is-danger has-tooltip-bottom"
+ class={
+ !isTokenSet
+ ? "button is-danger has-tooltip-bottom"
+ : !value.auth_token
+ ? "button has-tooltip-bottom"
+ : "button is-info has-tooltip-bottom"
+ }
data-tooltip={i18n.str`change authorization configuration`}
onClick={() => updateIsTokenDialogActive(true)}
>
@@ -188,6 +200,31 @@ export function CreatePage({ onCreate, onBack, forceId }: Props): VNode {
</h1>
</div>
</div>
+ <div class="level">
+ <div class="level-item has-text-centered">
+ {!isTokenSet ? (
+ <p class="is-size-6">
+ <i18n.Translate>
+ Access token is not yet configured. This instance can't be
+ created.
+ </i18n.Translate>
+ </p>
+ ) : value.auth_token === undefined ? (
+ <p class="is-size-6">
+ <i18n.Translate>
+ No access token. Authorization must be handled externally.
+ </i18n.Translate>
+ </p>
+ ) : (
+ <p class="is-size-6">
+ <i18n.Translate>
+ Access token is set. Authorization is handled by the
+ merchant backend.
+ </i18n.Translate>
+ </p>
+ )}
+ </div>
+ </div>
</div>
</section>