fix issues found in QC meeting

- templates payment timeout en merchant backoffice has a layout problem
- Summary is editable with empty summary
- better example for account info url
- repeat password
- delete transfers

2 files changed, 60 insertions, 59 deletions

diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
index ad3cb0e32..080b9508e 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx
@@ -52,14 +52,18 @@ export function InputDuration<T>({
 
   const { error, required, value: anyValue, onChange } = useField<T>(name);
   let strValue = "";
-  const value: Duration = anyValue
+  const value: Duration = anyValue;
   if (!value) {
     strValue = "";
   } else if (value.d_ms === "forever") {
     strValue = i18n.str`forever`;
   } else {
     if (value.d_ms === undefined) {
-      throw Error(`assertion error: duration should have a d_ms but got '${JSON.stringify(value)}'`)
+      throw Error(
+        `assertion error: duration should have a d_ms but got '${JSON.stringify(
+          value,
+        )}'`,
+      );
     }
     strValue = formatDuration(
       intervalToDuration({ start: 0, end: value.d_ms }),
@@ -96,7 +100,7 @@ export function InputDuration<T>({
 
   return (
     <div class="field is-horizontal">
-      <div class="field-label is-normal is-flex-grow-3">
+      <div class="field-label is-normal">
         <label class="label">
           {label}
           {tooltip && (
@@ -107,69 +111,65 @@ export function InputDuration<T>({
         </label>
       </div>
 
-      <div class="is-flex-grow-3">
-        <div class="field-body ">
-          <div class="field">
-            <div class="field has-addons">
-              <p class={expand ? "control is-expanded " : "control "}>
-                <input
-                  class="input"
-                  type="text"
-                  readonly
-                  value={strValue}
-                  placeholder={placeholder}
-                  onClick={() => {
-                    if (!readonly) setOpened(true);
-                  }}
-                />
-                {required && (
-                  <span class="icon has-text-danger is-right">
-                    <i class="mdi mdi-alert" />
-                  </span>
-                )}
-              </p>
-              <div
-                class="control"
+      <div class="field-body is-flex-grow-3">
+        <div class="field">
+          <div class="field has-addons">
+            <p class={expand ? "control is-expanded " : "control "}>
+              <input
+                class="input"
+                type="text"
+                readonly
+                value={strValue}
+                placeholder={placeholder}
                 onClick={() => {
                   if (!readonly) setOpened(true);
                 }}
-              >
-                <a class="button is-static">
-                  <span class="icon">
-                    <i class="mdi mdi-clock" />
-                  </span>
-                </a>
-              </div>
+              />
+              {required && (
+                <span class="icon has-text-danger is-right">
+                  <i class="mdi mdi-alert" />
+                </span>
+              )}
+            </p>
+            <div
+              class="control"
+              onClick={() => {
+                if (!readonly) setOpened(true);
+              }}
+            >
+              <a class="button is-static">
+                <span class="icon">
+                  <i class="mdi mdi-clock" />
+                </span>
+              </a>
             </div>
-            {error && <p class="help is-danger">{error}</p>}
           </div>
-          {withForever && (
-            <span data-tooltip={i18n.str`change value to never`}>
-              <button
-                class="button is-info mr-3"
-                onClick={() => onChange({ d_ms: "forever" } as any)}
-              >
-                <i18n.Translate>forever</i18n.Translate>
-              </button>
-            </span>
-          )}
-          {!readonly && !withoutClear && (
-            <span data-tooltip={i18n.str`change value to empty`}>
-              <button
-                class="button is-info "
-                onClick={() => onChange(undefined as any)}
-              >
-                <i18n.Translate>clear</i18n.Translate>
-              </button>
-            </span>
-          )}
-          {side}
+          {error && <p class="help is-danger">{error}</p>}
+          <span class="has-text-grey">{help}</span>
         </div>
-        <span>
-          {help}
-        </span>
-      </div>
 
+        {withForever && (
+          <span data-tooltip={i18n.str`change value to never`}>
+            <button
+              class="button is-info mr-3"
+              onClick={() => onChange({ d_ms: "forever" } as any)}
+            >
+              <i18n.Translate>forever</i18n.Translate>
+            </button>
+          </span>
+        )}
+        {!readonly && !withoutClear && (
+          <span data-tooltip={i18n.str`change value to empty`}>
+            <button
+              class="button is-info "
+              onClick={() => onChange(undefined as any)}
+            >
+              <i18n.Translate>clear</i18n.Translate>
+            </button>
+          </span>
+        )}
+        {side}
+      </div>
 
       {opened && (
         <SimpleModal onCancel={() => setOpened(false)}>
diff --git a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
index b8cd4c2d2..04bcbc2be 100644
--- a/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
+++ b/packages/merchant-backoffice-ui/src/components/form/InputWithAddon.tsx
@@ -69,6 +69,7 @@ export function InputWithAddon<T>({
           )}
         </label>
       </div>
+      
       <div class="field-body is-flex-grow-3">
         <div class="field">
           <div class="field has-addons">