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",