1 files changed, 143 insertions, 0 deletions
diff --git a/packages/demobank-ui/src/pages/ShowAccountDetails.tsx b/packages/demobank-ui/src/pages/ShowAccountDetails.tsx
new file mode 100644
index 000000000..91b50b84c
--- /dev/null
+++ b/packages/demobank-ui/src/pages/ShowAccountDetails.tsx
@@ -0,0 +1,143 @@
+import { ErrorType, HttpResponsePaginated, RequestError, notify, notifyError, useTranslationContext } from "@gnu-taler/web-util/browser";
+import { VNode,h } from "preact";
+import { useAdminAccountAPI, useBusinessAccountDetails } from "../hooks/circuit.js";
+import { useState } from "preact/hooks";
+import { HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util";
+import { buildRequestErrorMessage } from "../utils.js";
+import { AccountForm } from "./admin/AccountForm.js";
+
+export function ShowAccountDetails({
+    account,
+    onClear,
+    onUpdateSuccess,
+    onLoadNotOk,
+    onChangePassword,
+  }: {
+    onLoadNotOk: <T>(
+      error: HttpResponsePaginated<T, SandboxBackend.SandboxError>,
+    ) => VNode;
+    onClear?: () => void;
+    onChangePassword: () => void;
+    onUpdateSuccess: () => void;
+    account: string;
+  }): VNode {
+    const { i18n } = useTranslationContext();
+    const result = useBusinessAccountDetails(account);
+    const { updateAccount } = useAdminAccountAPI();
+    const [update, setUpdate] = useState(false);
+    const [submitAccount, setSubmitAccount] = useState<
+      SandboxBackend.Circuit.CircuitAccountData | undefined
+    >();
+  
+    if (!result.ok) {
+      if (result.loading || result.type === ErrorType.TIMEOUT) {
+        return onLoadNotOk(result);
+      }
+      if (result.status === HttpStatusCode.NotFound) {
+        return <div>account not found</div>;
+      }
+      return onLoadNotOk(result);
+    }
+  
+    return (
+      <div>
+        <div>
+          <h1 class="nav welcome-text">
+            <i18n.Translate>Business account details</i18n.Translate>
+          </h1>
+        </div>
+        <div style={{ maxWidth: 600, overflowX: "hidden", margin: "auto" }}>
+          <AccountForm
+            template={result.data}
+            purpose={update ? "update" : "show"}
+            onChange={(a) => setSubmitAccount(a)}
+          />
+  
+          <p class="buttons-account">
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                flexFlow: "wrap-reverse",
+              }}
+            >
+              <div>
+                {onClear ? (
+                  <input
+                    class="pure-button"
+                    type="submit"
+                    value={i18n.str`Close`}
+                    onClick={async (e) => {
+                      e.preventDefault();
+                      onClear();
+                    }}
+                  />
+                ) : undefined}
+              </div>
+              <div style={{ display: "flex" }}>
+                <div>
+                  <input
+                    id="select-exchange"
+                    class="pure-button pure-button-primary content"
+                    disabled={update && !submitAccount}
+                    type="submit"
+                    value={i18n.str`Change password`}
+                    onClick={async (e) => {
+                      e.preventDefault();
+                      onChangePassword();
+                    }}
+                  />
+                </div>
+                <div>
+                  <input
+                    id="select-exchange"
+                    class="pure-button pure-button-primary content"
+                    disabled={update && !submitAccount}
+                    type="submit"
+                    value={update ? i18n.str`Confirm` : i18n.str`Update`}
+                    onClick={async (e) => {
+                      e.preventDefault();
+  
+                      if (!update) {
+                        setUpdate(true);
+                      } else {
+                        if (!submitAccount) return;
+                        try {
+                          await updateAccount(account, {
+                            cashout_address: submitAccount.cashout_address,
+                            contact_data: submitAccount.contact_data,
+                          });
+                          onUpdateSuccess();
+                        } catch (error) {
+                          if (error instanceof RequestError) {
+                            notify(
+                              buildRequestErrorMessage(i18n, error.cause, {
+                                onClientError: (status) =>
+                                  status === HttpStatusCode.Forbidden
+                                    ? i18n.str`The rights to change the account are not sufficient`
+                                    : status === HttpStatusCode.NotFound
+                                      ? i18n.str`The username was not found`
+                                      : undefined,
+                              }),
+                            );
+                          } else {
+                            notifyError(
+                              i18n.str`Operation failed, please report`,
+                              (error instanceof Error
+                                ? error.message
+                                : JSON.stringify(error)) as TranslatedString
+                            )
+                          }
+                        }
+                      }
+                    }}
+                  />
+                </div>
+              </div>
+            </div>
+          </p>
+        </div>
+      </div>
+    );
+  }
+  
+\ No newline at end of file