{/** * FIXME: Scan a qr code */}

{title}

{ 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); } } setIsRawPayto(false); }} /> 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)); } setIsRawPayto(true); }} /> Import payto:// URI )} {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>
  );
}

function validateRawPayto(parsed: PaytoUri, limit: AmountJson, host: string, i18n: InternationalizationAPI, type: "iban" | "x-taler-bank"): TranslatedString | undefined {
  if (!parsed.isKnown) {
    return i18n.str`The target type is unknown, use "${type}"`
  }
  let result: TranslatedString | undefined;
  switch (type) {
    case "x-taler-bank": {
      if (parsed.targetType !== "x-taler-bank") {
        return i18n.str`Only "x-taler-bank" target are supported`
      }

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 validateAmount(amount: AmountJson, limit: AmountJson, i18n: InternationalizationAPI): TranslatedString | undefined {
  if (amount.currency !== limit.currency) {
    return i18n.str`The only currency allowed is "${limit.currency}"`
  }
  if (Amounts.isZero(amount)) {
    return i18n.str`Can't transfer zero amount`
  }
  if (Amounts.cmp(limit, amount) === -1) {
    return i18n.str`Balance is not enough`
  }
  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;
}

function Wrapper({ withIcon, children }: { withIcon: boolean, children: ComponentChildren }): VNode {
  if (withIcon) {
    return <div class="flex justify-between">
      {children}
    </div>
  }
  return <Fragment>{children}</Fragment>
}

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>
}