diff options
Diffstat (limited to 'packages/bank-ui/src/pages/account/ShowAccountDetails.tsx')
-rw-r--r-- | packages/bank-ui/src/pages/account/ShowAccountDetails.tsx | 176 |
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> ); } |