diff options
author | Sebastian <sebasjm@gmail.com> | 2023-10-21 20:25:38 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2023-10-21 20:25:50 -0300 |
commit | 2ac73949e7cb8de44e56f2fecae617efab15671e (patch) | |
tree | 144a97d71bc9fa964675ef0cc764087ceb14e8eb /packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx | |
parent | 4b98b693d696d90f30f0a6546b0e1f4bc181a5f2 (diff) | |
download | wallet-core-2ac73949e7cb8de44e56f2fecae617efab15671e.tar.xz |
more ui
Diffstat (limited to 'packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx | 65 |
1 files changed, 38 insertions, 27 deletions
diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index e713324c5..d859c10d7 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -51,20 +51,25 @@ const logger = new Logger("PaytoWireTransferForm"); export function PaytoWireTransferForm({ focus, title, + toAccount, onSuccess, onCancel, limit, }: { title: TranslatedString, focus?: boolean; + toAccount?: string, onSuccess: () => void; onCancel: (() => void) | undefined; limit: AmountJson; }): VNode { - const [isRawPayto, setIsRawPayto] = useState(true); + const [isRawPayto, setIsRawPayto] = useState(false); const { state: credentials } = useBackendState() const { api } = useBankCoreApiContext(); - const [iban, setIban] = useState<string | undefined>(); + + const sendingToFixedAccount = toAccount !== undefined + //FIXME: support other destination that just IBAN + const [iban, setIban] = useState<string | undefined>(toAccount); const [subject, setSubject] = useState<string | undefined>(); const [amount, setAmount] = useState<string | undefined>(); @@ -163,7 +168,7 @@ export function PaytoWireTransferForm({ setAmount(undefined); setIban(undefined); setSubject(undefined); - rawPaytoInputSetter(undefined) + rawPaytoInputSetter(undefined) }) } @@ -181,9 +186,12 @@ export function PaytoWireTransferForm({ <input type="radio" name="project-type" value="Newsletter" class="sr-only" aria-labelledby="project-type-0-label" aria-describedby="project-type-0-description-0 project-type-0-description-1" onChange={() => { if (parsed && parsed.isKnown && parsed.targetType === "iban") { setIban(parsed.iban) - const amount = Amounts.parse(parsed.params["amount"]) - if (amount) { - setAmount(Amounts.stringifyValue(amount)) + const amountStr = parsed.params["amount"] + if (amountStr) { + const amount = Amounts.parse(parsed.params["amount"]) + if (amount) { + setAmount(Amounts.stringifyValue(amount)) + } } const subject = parsed.params["message"] if (subject) { @@ -201,28 +209,30 @@ export function PaytoWireTransferForm({ </span> </label> - <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (isRawPayto ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}> - <input type="radio" name="project-type" value="Existing Customers" class="sr-only" aria-labelledby="project-type-1-label" aria-describedby="project-type-1-description-0 project-type-1-description-1" onChange={() => { - if (iban) { - const payto = buildPayto("iban", iban, undefined) - if (parsedAmount) { - payto.params["amount"] = Amounts.stringify(parsedAmount) - } - if (subject) { - payto.params["message"] = subject + {sendingToFixedAccount ? undefined : + <label class={"relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none" + (isRawPayto ? "border-indigo-600 ring-2 ring-indigo-600" : "border-gray-300")}> + <input type="radio" name="project-type" value="Existing Customers" class="sr-only" aria-labelledby="project-type-1-label" aria-describedby="project-type-1-description-0 project-type-1-description-1" onChange={() => { + if (iban) { + const payto = buildPayto("iban", iban, undefined) + if (parsedAmount) { + payto.params["amount"] = Amounts.stringify(parsedAmount) + } + if (subject) { + payto.params["message"] = subject + } + rawPaytoInputSetter(stringifyPaytoUri(payto)) } - rawPaytoInputSetter(stringifyPaytoUri(payto)) - } - setIsRawPayto(true) - }} /> - <span class="flex flex-1"> - <span class="flex flex-col"> - <span class="block text-sm font-medium text-gray-900"> - <i18n.Translate>Import payto:// URI</i18n.Translate> + setIsRawPayto(true) + }} /> + <span class="flex flex-1"> + <span class="flex flex-col"> + <span class="block text-sm font-medium text-gray-900"> + <i18n.Translate>Import payto:// URI</i18n.Translate> + </span> </span> </span> - </span> - </label> + </label> + } </div> </div> </div> @@ -244,9 +254,10 @@ export function PaytoWireTransferForm({ <input ref={focus ? doAutoFocus : undefined} type="text" - class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + class="block w-full disabled:bg-gray-200 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 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={sendingToFixedAccount} value={iban ?? ""} placeholder="CC0123456789" autocomplete="off" @@ -369,7 +380,7 @@ export function PaytoWireTransferForm({ export function doAutoFocus(element: HTMLElement | null) { if (element) { setTimeout(() => { - element.focus() + element.focus({ preventScroll: true }) element.scrollIntoView({ behavior: "smooth", block: "center", |