{/*

{ setIsRawPayto(false); }} /> Using a form {sendingToFixedAccount ? undefined : ( { setIsRawPayto(true); }} /> Import payto:// URI )} {routeCashout ? ( Cashout ) : undefined}

*/}

{ if (parsed && parsed.isKnown) { switch (parsed.targetType) { case "iban": { setAccount(parsed.iban); break; } case "x-taler-bank": { setAccount(parsed.account); break; } case "bitcoin": { break; } default: { assertUnreachable(parsed); } } const amountStr = !parsed.params ? undefined : parsed.params["amount"]; if (amountStr) { const amount = Amounts.parse(amountStr); if (amount) { setAmount(Amounts.stringifyValue(amount)); } } const subject = parsed.params["message"]; if (subject) { setSubject(subject); } } setInputType("form"); }} checked={inputType === "form"} value="form" class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-600 active:ring-2 active:ring-offset-2 active:ring-indigo-600" /> {/* */} Using a form {sendingToFixedAccount ? undefined : ( { if (account) { let payto; switch (paytoType) { case "x-taler-bank": { payto = buildPayto( "x-taler-bank", url.host, account, ); if (parsedAmount) { payto.params["amount"] = Amounts.stringify(parsedAmount); } if (subject) { payto.params["message"] = subject; } break; } case "iban": { payto = buildPayto("iban", account, undefined); if (parsedAmount) { payto.params["amount"] = Amounts.stringify(parsedAmount); } if (subject) { payto.params["message"] = subject; } break; } default: assertUnreachable(paytoType); } rawPaytoInputSetter(stringifyPaytoUri(payto)); } setInputType("payto"); }} checked={inputType === "payto"} value="payto" class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-600 active:ring-2 active:ring-offset-2 active:ring-indigo-600" /> payto:// URI A special URI that indicate the transfer amount and account target. { //FIXME: add QR support false && ( { setInputType("qr"); }} checked={inputType === "qr"} value="qr" class="mt-0.5 h-4 w-4 shrink-0 cursor-pointer text-indigo-600 border-gray-300 focus:ring-indigo-600 active:ring-2 active:ring-offset-2 active:ring-indigo-600" /> QR code If you have a camera in this device you can import a payto:// URI from a QR code. ) } )}

{routeCashout ? ( Cashout ) : undefined}

{ e.preventDefault(); }} >

{!isRawPayto ? (

{(() => { switch (paytoType) { case "x-taler-bank": { return ( ); } case "iban": { return ( setAccount(v.toUpperCase())} value={account} focus={focus} disabled={sendingToFixedAccount} /> ); } default: assertUnreachable(paytoType); } })()}

{i18n.str`Transfer subject`} *

{ setSubject(e.currentTarget.value); }} />

Some text to identify the transfer

{i18n.str`Amount`} * { setAmount(d); }} />

Amount to transfer

) : (

{i18n.str`Payto URI:`} *

{
                      switch (paytoType) {
                        case "x-taler-bank":
                          return i18n.str`payto://x-taler-bank/[bank-host]/[receiver-account]?message=[subject]&amount=[${limit.currency}:X.Y]`;
                        case "iban":
                          return i18n.str`payto://iban/[receiver-iban]?message=[subject]&amount=[${limit.currency}:X.Y]`;
                      }
                    })()}
                    onInput={(e): void => {
                      rawPaytoInputSetter(e.currentTarget.value);
                    }}
                  />
                  <ShowInputErrorLabel
                    message={errorsPayto?.rawPaytoInput}
                    isDirty={rawPaytoInput !== undefined}
                  />
                </div>
              </div>
            </div>
          )}
        </div>
        <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8">
          {routeCancel ? (
            <a
              name="cancel"
              href={routeCancel.url({})}
              class="text-sm font-semibold leading-6 text-gray-900"
            >
              <i18n.Translate>Cancel</i18n.Translate>
            </a>
          ) : (
            <div />
          )}
          <button
            type="submit"
            name="send"
            class="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"
            disabled={isRawPayto ? !!errorsPayto : !!errorsWire}
            onClick={(e) => {
              e.preventDefault();
              doSend();
            }}
          >
            <i18n.Translate>Send</i18n.Translate>
          </button>
        </div>
        <LocalNotificationBanner notification={notification} />
      </form>
    </div>
  );
}

/**
 * Show the element when the load ended
 * @param element
 */
export function doAutoFocus(element: HTMLElement | null) {
  if (element) {
    setTimeout(() => {
      element.focus({ preventScroll: true });
      element.scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "center",
      });
    }, 100);
  }
}

export function InputAmount(
  {
    currency,
    name,
    value,
    error,
    left,
    onChange,
  }: {
    error?: string;
    currency: string;
    name: string;
    left?: boolean | undefined;
    value: string | undefined;
    onChange?: (s: string) => void;
  },
  ref: Ref<HTMLInputElement>,
): VNode {
  const { config } = useBankCoreApiContext();
  return (
    <div class="mt-2">
      <div class="flex rounded-md shadow-sm border-0 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600">
        <div class="pointer-events-none inset-y-0 flex items-center px-3">
          <span class="text-gray-500 sm:text-sm">{currency}</span>
        </div>
        <input
          type="number"
          data-left={left}
          class="disabled:bg-gray-200 text-right rounded-md rounded-l-none data-[left=true]:text-left w-full py-1.5 pl-3 text-gray-900  placeholder:text-gray-400  sm:text-sm sm:leading-6"
          placeholder="0.00"
          aria-describedby="price-currency"
          ref={ref}
          name={name}
          id={name}
          autocomplete="off"
          value={value ?? ""}
          disabled={!onChange}
          onInput={(e) => {
            if (!onChange) return;
            const l = e.currentTarget.value.length;
            const sep_pos = e.currentTarget.value.indexOf(FRAC_SEPARATOR);
            if (
              sep_pos !== -1 &&
              l - sep_pos - 1 >
                config.currency_specification.num_fractional_input_digits
            ) {
              e.currentTarget.value = e.currentTarget.value.substring(
                0,
                sep_pos +
                  config.currency_specification.num_fractional_input_digits +
                  1,
              );
            }
            onChange(e.currentTarget.value);
          }}
        />
      </div>
      <ShowInputErrorLabel message={error} isDirty={value !== undefined} />
    </div>
  );
}

export function RenderAmount({
  value,
  spec,
  negative,
  withColor,
  hideSmall,
}: {
  spec: CurrencySpecification;
  value: AmountJson;
  hideSmall?: boolean;
  negative?: boolean;
  withColor?: boolean;
}): VNode {
  const neg = !!negative; // convert to true or false

const { currency, normal, small } = Amounts.stringifyValueWithSpec(
    value,
    spec,
  );

return (
    <span
      data-negative={withColor ? neg : undefined}
      class="whitespace-nowrap data-[negative=false]:text-green-600 data-[negative=true]:text-red-600"
    >
      {negative ? "- " : undefined}
      {currency} {normal}{" "}
      {!hideSmall && small && <sup class="-ml-1">{small}</sup>}
    </span>
  );
}

if (parsed.host !== host) {
        return i18n.str`Only this host is allowed. Use "${host}"`;
      }

if (!parsed.account) {
        return i18n.str`Missing account name`;
      }
      const result = validateTalerBank(parsed.account, i18n);
      if (result) return result;
      break;
    }
    case "iban": {
      if (parsed.targetType !== "iban") {
        return i18n.str`Only "IBAN" target are supported`;
      }
      const result = validateIBAN(parsed.iban, i18n);
      if (result) return result;
      break;
    }
    default:
      assertUnreachable(type);
  }
  if (!parsed.params.amount) {
    return i18n.str`Missing "amount" parameter to specify the amount to be transferred`;
  }
  const amount = Amounts.parse(parsed.params.amount);
  if (!amount) {
    return i18n.str`The "amount" parameter is not valid`;
  }
  result = validateAmount(amount, limit, i18n);
  if (result) return result;

if (!parsed.params.message) {
    return i18n.str`Missing the "message" parameter to specify a reference text for the transfer`;
  }
  const subject = parsed.params.message;
  result = validateSubject(subject, i18n);
  if (result) return result;

return undefined;
}

function validateSubject(
  text: string,
  i18n: InternationalizationAPI,
): TranslatedString | undefined {
  if (text.length < 2) {
    return i18n.str`Use a longer subject`;
  }
  return undefined;
}

interface PaytoFieldProps {
  id: string;
  label: TranslatedString;
  required?: boolean;
  help?: TranslatedString;
  placeholder?: TranslatedString;
  error: string | undefined;
  value: string | undefined;
  rightIcons?: VNode;
  onChange: (p: string) => void;
  focus?: boolean;
  disabled?: boolean;
}

export function TextField({
  id,
  label,
  help,
  focus,
  disabled,
  onChange,
  placeholder,
  rightIcons,
  required,
  value,
  error,
}: PaytoFieldProps): VNode {
  return (
    <div class="sm:col-span-5">
      <label for={id} class="block text-sm font-medium leading-6 text-gray-900">
        {label}
        {required && <b style={{ color: "red" }}> *</b>}
      </label>
      <div class="mt-2">
        <Wrapper withIcon={rightIcons !== undefined}>
          <input
            ref={focus ? doAutoFocus : undefined}
            type="text"
            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={id}
            id={id}
            disabled={disabled}
            value={value ?? ""}
            placeholder={placeholder}
            autocomplete="off"
            required
            onInput={(e): void => {
              onChange(e.currentTarget.value);
            }}
          />
          {rightIcons}
        </Wrapper>
        <ShowInputErrorLabel message={error} isDirty={value !== undefined} />
      </div>
      {help && <p class="mt-2 text-sm text-gray-500">{help}</p>}
    </div>
  );
}