aboutsummaryrefslogtreecommitdiff
path: root/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/bank-ui/src/pages/account/ShowAccountDetails.tsx')
-rw-r--r--packages/bank-ui/src/pages/account/ShowAccountDetails.tsx176
1 files changed, 98 insertions, 78 deletions
diff --git a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
index bd3961bb7..c071a838a 100644
--- a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
+++ b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx
@@ -70,7 +70,9 @@ export function ShowAccountDetails({
const { i18n } = useTranslationContext();
const { state: credentials } = useSessionState();
const creds = credentials.status !== "loggedIn" ? undefined : credentials;
- const { lib: { bank } } = useBankCoreApiContext();
+ const {
+ lib: { bank },
+ } = useBankCoreApiContext();
const accountIsTheCurrentUser =
credentials.status === "loggedIn"
? credentials.username === account
@@ -189,8 +191,7 @@ export function ShowAccountDetails({
});
}
-
- const url = bank.getRevenueAPI(account)
+ const url = bank.getRevenueAPI(account);
url.username = account;
const baseURL = url.href;
@@ -291,15 +292,16 @@ export function ShowAccountDetails({
</h2>
<p class="mt-2 text-sm text-gray-500">
<i18n.Translate>
- Use this information to link your Taler Merchant Backoffice account
- with the current bank account. You can start by copying the values,
- then go to your merchant backoffice service provider, login into
- your account and look for the "import" button in the "bank account" section.
+ Use this information to link your Taler Merchant Backoffice
+ account with the current bank account. You can start by copying
+ the values, then go to your merchant backoffice service provider,
+ login into your account and look for the "import" button in the
+ "bank account" section.
</i18n.Translate>
</p>
</div>
- {payto !== undefined &&
+ {payto !== undefined && (
<div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2">
<div class="px-4 py-6 sm:p-8">
<div class="grid max-w-2xl grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
@@ -322,82 +324,96 @@ export function ShowAccountDetails({
/>
</div>
<p class="mt-2 text-sm text-gray-500">
- <i18n.Translate>Method to use for wire transfer.</i18n.Translate>
+ <i18n.Translate>
+ Method to use for wire transfer.
+ </i18n.Translate>
</p>
</div>
{((payto) => {
switch (payto.targetType) {
case "iban": {
- return <div class="sm:col-span-5">
- <label
- class="block text-sm font-medium leading-6 text-gray-900"
- for="iban"
- >
- {i18n.str`IBAN`}
- </label>
- <div class="mt-2">
- <input
- type="text"
- class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
- name="iban"
- id="iban"
- disabled={true}
- value={payto.iban}
- autocomplete="off"
- />
+ return (
+ <div class="sm:col-span-5">
+ <label
+ class="block text-sm font-medium leading-6 text-gray-900"
+ for="iban"
+ >
+ {i18n.str`IBAN`}
+ </label>
+ <div class="mt-2">
+ <input
+ type="text"
+ class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+ name="iban"
+ id="iban"
+ disabled={true}
+ value={payto.iban}
+ autocomplete="off"
+ />
+ </div>
+ <p class="mt-2 text-sm text-gray-500">
+ <i18n.Translate>
+ International Bank Account Number.
+ </i18n.Translate>
+ </p>
</div>
- <p class="mt-2 text-sm text-gray-500">
- <i18n.Translate>International Bank Account Number.</i18n.Translate>
- </p>
- </div>
+ );
}
case "x-taler-bank": {
- return <div class="sm:col-span-5">
- <label
- class="block text-sm font-medium leading-6 text-gray-900"
- for="iban"
- >
- {i18n.str`IBAN`}
- </label>
- <div class="mt-2">
- <input
- type="text"
- class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
- name="iban"
- id="iban"
- disabled={true}
- value={payto.account}
- autocomplete="off"
- />
+ return (
+ <div class="sm:col-span-5">
+ <label
+ class="block text-sm font-medium leading-6 text-gray-900"
+ for="iban"
+ >
+ {i18n.str`IBAN`}
+ </label>
+ <div class="mt-2">
+ <input
+ type="text"
+ class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+ name="iban"
+ id="iban"
+ disabled={true}
+ value={payto.account}
+ autocomplete="off"
+ />
+ </div>
+ <p class="mt-2 text-sm text-gray-500">
+ <i18n.Translate>
+ International Bank Account Number.
+ </i18n.Translate>
+ </p>
</div>
- <p class="mt-2 text-sm text-gray-500">
- <i18n.Translate>International Bank Account Number.</i18n.Translate>
- </p>
- </div>
+ );
}
case "bitcoin": {
- return <div class="sm:col-span-5">
- <label
- class="block text-sm font-medium leading-6 text-gray-900"
- for="iban"
- >
- {i18n.str`Address`}
- </label>
- <div class="mt-2">
- <input
- type="text"
- class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
- name="iban"
- id="iban"
- disabled={true}
- value={"DE1231231231"}
- autocomplete="off"
- />
+ return (
+ <div class="sm:col-span-5">
+ <label
+ class="block text-sm font-medium leading-6 text-gray-900"
+ for="iban"
+ >
+ {i18n.str`Address`}
+ </label>
+ <div class="mt-2">
+ <input
+ type="text"
+ class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+ name="iban"
+ id="iban"
+ disabled={true}
+ value={"DE1231231231"}
+ autocomplete="off"
+ />
+ </div>
+ <p class="mt-2 text-sm text-gray-500">
+ <i18n.Translate>
+ International Bank Account Number.
+ </i18n.Translate>
+ </p>
</div>
- <p class="mt-2 text-sm text-gray-500">
- <i18n.Translate>International Bank Account Number.</i18n.Translate>
- </p>
- </div>
+ );
}
}
})(payto)}
@@ -421,7 +437,9 @@ export function ShowAccountDetails({
/>
</div>
<p class="mt-2 text-sm text-gray-500">
- <i18n.Translate>Legal name of the person holding the account.</i18n.Translate>
+ <i18n.Translate>
+ Legal name of the person holding the account.
+ </i18n.Translate>
</p>
</div>
<div class="sm:col-span-5">
@@ -443,7 +461,10 @@ export function ShowAccountDetails({
/>
</div>
<p class="mt-2 text-sm text-gray-500">
- <i18n.Translate>From where the merchant can download information about incoming wire transfers to this account.</i18n.Translate>
+ <i18n.Translate>
+ From where the merchant can download information about
+ incoming wire transfers to this account.
+ </i18n.Translate>
</p>
</div>
</div>
@@ -458,15 +479,14 @@ export function ShowAccountDetails({
</a>
<CopyButton
getContent={() => accountLetter ?? ""}
- class="flex text-center disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+ class="flex text-center disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+ >
<i18n.Translate>Copy</i18n.Translate>
</CopyButton>
</div>
</div>
- }
-
+ )}
</div>
-
</Fragment>
);
}
generated by cgit v1.2.3 (git 2.26.2) at 2024-08-21 20:37:40 +0000