fix #7796 and some form issues

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>
 

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">

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`}

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

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>