1 files changed, 88 insertions, 1 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
index 1335d0f77..43062d13e 100644
--- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx
+++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx
@@ -24,9 +24,14 @@ import { ComponentChildren, Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js";
 import { Spinner } from "../exception/loading.js";
-import { FormProvider } from "../form/FormProvider.js";
+import { FormErrors, FormProvider } from "../form/FormProvider.js";
 import { Input } from "../form/Input.js";
 import { useSessionContext } from "../../context/session.js";
+import {
+  AccountLetter,
+  codecForAccountLetter,
+  PaytoString,
+} from "@gnu-taler/taler-util";
 
 interface Props {
   active?: boolean;
@@ -201,6 +206,88 @@ export function ClearConfirmModal({
   );
 }
 
+interface ImportingAccountModalProps {
+  onCancel: () => void;
+  onConfirm: (account: AccountLetter) => void;
+}
+
+export function ImportingAccountModal({
+  onCancel,
+  onConfirm,
+}: ImportingAccountModalProps): VNode {
+  const { i18n } = useTranslationContext();
+  const [letter, setLetter] = useState<string>();
+  let parsed = undefined;
+  try {
+    parsed = JSON.parse(letter ?? "");
+  } catch (e) {
+    parsed = undefined;
+  }
+  let account: AccountLetter | undefined = undefined;
+  let parsingError: string | undefined = undefined;
+  try {
+    account =
+      parsed !== undefined ? codecForAccountLetter().decode(parsed) : undefined;
+  } catch (e) {
+    account = undefined;
+    if (e instanceof Error) {
+      parsingError = e.message;
+    }
+  }
+  const errors: FormErrors<{ letter: string }> = {
+    letter: !letter
+      ? i18n.str`required`
+      : parsed === undefined
+        ? i18n.str`letter should be a JSON string`
+        : account === undefined
+          ? i18n.str`JSON string is invalid`
+          : undefined,
+  };
+  return (
+    <ConfirmModal
+      label={i18n.str`Import`}
+      description={i18n.str`Importing an account from the bank`}
+      active
+      onCancel={onCancel}
+      disabled={account === undefined}
+      onConfirm={() => onConfirm(account!)}
+    >
+      <p>
+        <i18n.Translate>
+          You can export your account settings from the Libeufin Bank's account
+          profile. Paste the content in the next field.
+        </i18n.Translate>
+      </p>
+      <div class="field is-horizontal">
+        <div class="field-label is-normal">
+          <label class="label">
+            <i18n.Translate>Account information</i18n.Translate>
+          </label>
+        </div>
+        <div class="field-body is-flex-grow-3">
+          <div class="field">
+            <p class="control">
+              <input
+                class="input"
+                value={letter ?? ""}
+                onChange={(e) => {
+                  setLetter(e.currentTarget.value);
+                }}
+              />
+            </p>
+            {letter !== undefined && errors.letter && (
+              <p class="help is-danger">{errors.letter}</p>
+            )}
+            {parsingError !== undefined && (
+              <p class="help is-danger">{parsingError}</p>
+            )}
+          </div>
+        </div>
+      </div>
+    </ConfirmModal>
+  );
+}
+
 interface DeleteModalProps {
   element: { id: string; name: string };
   onCancel: () => void;