@block-auth.io/angular 0.1.0

package/src/lib/components/txns/internals/solicited-data-modal.component.ts

@@ -0,0 +1,187 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  input,
+  output,
+  signal,
+} from '@angular/core';
+
+// `handleParamChange`/`onValidationChange` (callback props en react) -> outputs
+// `paramChange`/`validationChange`: notificaciones puras de "algo cambió en la
+// UI de este componente" (a diferencia de `closeTxns`/`addError` en Txn, que
+// son funciones orquestadas imperativamente por el padre). `paramChange` emite
+// `{ slug, value }` (un output Angular emite un único valor; se agrupa el par).
+//
+// El `useEffect(() => onValidationChange(allRequiredFilled), [allRequiredFilled])`
+// de react -> `effect()` de Angular: emite el valor inicial tras el primer CD
+// (igual que el efecto de react corre tras el primer render) y en cada cambio.
+export interface ParamChange {
+  slug: string;
+  value: string;
+}
+
+const PARAM_LABELS: Record<string, string> = {
+  'modules-kyc': 'KYC',
+  'users-firstname': 'First Name',
+  'users-lastname': 'Last Name',
+  'users-secondlastname': 'Second Last Name',
+  'users-email': 'Email',
+  'users-phone': 'Phone',
+};
+
+const PARAM_DISPLAY_ORDER = [
+  'users-firstname',
+  'users-lastname',
+  'users-secondlastname',
+  'users-email',
+  'users-phone',
+  'modules-kyc',
+];
+
+const PARAM_INPUT_TYPE: Record<string, string> = {
+  'users-firstname': 'text',
+  'users-lastname': 'text',
+  'users-secondlastname': 'text',
+  'users-email': 'email',
+  'users-phone': 'tel',
+};
+
+const PARAM_VALIDATORS: Record<string, (v: string) => boolean> = {
+  'users-firstname': (v) => /^[A-Za-zÀ-ÖØ-öø-ÿ\s'-]{1,50}$/.test(v.trim()),
+  'users-lastname': (v) => /^[A-Za-zÀ-ÖØ-öø-ÿ\s'-]{1,50}$/.test(v.trim()),
+  'users-secondlastname': (v) => /^[A-Za-zÀ-ÖØ-öø-ÿ\s'-]{1,50}$/.test(v.trim()),
+  'users-email': (v) => /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/.test(v.trim()),
+  'users-phone': (v) => /^\+?[\d\s\-().]{6,20}$/.test(v.trim()),
+};
+
+const PARAM_ERROR_MSG: Record<string, string> = {
+  'users-firstname': 'Only letters and spaces allowed',
+  'users-lastname': 'Only letters and spaces allowed',
+  'users-secondlastname': 'Only letters and spaces allowed',
+  'users-email': 'Enter a valid email (e.g. name@domain.com)',
+  'users-phone': 'Enter a valid phone number',
+};
+
+@Component({
+  selector: 'ba-solicited-data-modal',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="bal-ba-transition-2 bas-box-border bas-flex bas-w-[334px] bas-flex-col bas-gap-3 bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-100)] bas-bg-[var(--bal-primary-10)] bas-px-4 bas-py-4 hover:bas-border-[var(--bal-primary-300)]"
+    >
+      @for (slug of visibleParams(); track slug) {
+        <div class="bas-flex bas-flex-col bas-gap-1">
+          <div class="bas-flex bas-items-center bas-justify-between">
+            <label class="bas-text-xs bas-font-medium bas-text-slate-600">{{ label(slug) }}</label>
+            <span
+              style="font-size: 10px"
+              [class]="
+                'bas-rounded bas-px-1 bas-py-px bas-font-bold bas-uppercase bas-tracking-wide ' +
+                (isRequired(slug)
+                  ? 'bas-bg-amber-100 bas-text-amber-600'
+                  : 'bas-bg-slate-100 bas-text-slate-400')
+              "
+            >
+              {{ isRequired(slug) ? requiredLabelTxt() : optionalLabelTxt() }}
+            </span>
+          </div>
+          <div class="bas-relative">
+            <input
+              [type]="inputType(slug)"
+              [value]="valueOf(slug)"
+              [class]="
+                'bas-w-full bas-rounded bas-border bas-bg-white bas-px-2 bas-py-1 bas-text-sm bas-text-slate-700 bas-outline-none bas-transition-colors ' +
+                (errorOf(slug)
+                  ? 'bas-border-red-400 bas-pr-7 focus:bas-border-red-500'
+                  : 'bas-border-slate-300 focus:bas-border-[var(--bal-primary-500)]')
+              "
+              (input)="onInput(slug, $event)"
+              (blur)="onBlur(slug)"
+            />
+            @if (errorOf(slug)) {
+              <svg
+                class="bas-absolute bas-right-2 bas-top-1/2 bas-h-4 bas-w-4 -bas-translate-y-1/2 bas-text-red-500"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                aria-hidden="true"
+              >
+                <path d="M12 2 1 21h22L12 2Zm0 6c.55 0 1 .45 1 1v5a1 1 0 1 1-2 0V9c0-.55.45-1 1-1Zm0 9.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z" />
+              </svg>
+            }
+          </div>
+          @if (errorOf(slug)) {
+            <p style="font-size: 10px" class="bas-m-0 bas-px-2 bas-font-medium bas-text-red-500">
+              {{ errorOf(slug) }}
+            </p>
+          }
+        </div>
+      }
+      @if (!allRequiredFilled()) {
+        <p class="bas-m-0 bas-text-center bas-text-xs bas-text-amber-600">{{ fillRequiredTxt() }}</p>
+      }
+    </div>
+  `,
+})
+export class SolicitedDataModalComponent {
+  requiredParams = input<string[]>([]);
+  optionalParams = input<string[]>([]);
+  userParamValues = input<Record<string, string>>({});
+  requiredLabelTxt = input('Required');
+  optionalLabelTxt = input('Optional');
+  fillRequiredTxt = input('Fill required fields to continue');
+
+  paramChange = output<ParamChange>();
+  validationChange = output<boolean>();
+
+  private readonly touched = signal<Record<string, boolean>>({});
+
+  protected readonly allRequiredFilled = computed(() =>
+    this.requiredParams().every((slug) => {
+      if (slug === 'modules-kyc') return true;
+      const value = this.userParamValues()[slug]?.trim();
+      if (!value) return false;
+      const validate = PARAM_VALIDATORS[slug];
+      return !validate || validate(value);
+    }),
+  );
+
+  protected readonly visibleParams = computed(() =>
+    PARAM_DISPLAY_ORDER.filter(
+      (slug) =>
+        slug !== 'modules-kyc' &&
+        (this.requiredParams().includes(slug) || this.optionalParams().includes(slug)),
+    ),
+  );
+
+  constructor() {
+    effect(() => {
+      this.validationChange.emit(this.allRequiredFilled());
+    });
+  }
+
+  isRequired = (slug: string): boolean => this.requiredParams().includes(slug);
+  label = (slug: string): string => PARAM_LABELS[slug] ?? slug;
+  inputType = (slug: string): string => PARAM_INPUT_TYPE[slug] || 'text';
+  valueOf = (slug: string): string => this.userParamValues()[slug] || '';
+
+  private getError(slug: string, value: string): string | null {
+    if (!value) return null;
+    const validate = PARAM_VALIDATORS[slug];
+    if (validate && !validate(value)) return PARAM_ERROR_MSG[slug];
+    return null;
+  }
+
+  errorOf = (slug: string): string | null =>
+    this.touched()[slug] ? this.getError(slug, this.valueOf(slug)) : null;
+
+  onBlur(slug: string): void {
+    this.touched.update((prev) => ({ ...prev, [slug]: true }));
+  }
+
+  onInput(slug: string, event: Event): void {
+    this.paramChange.emit({ slug, value: (event.target as HTMLInputElement).value });
+  }
+}

package/src/lib/components/txns/internals/txn-error.component.test.ts

@@ -0,0 +1,100 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { TxnErrorComponent } from './txn-error.component';
+import { provideBlockAuthClientForTest } from '../../../testing';
+
+vi.mock('@wagmi/core', () => ({
+  createConfig: vi.fn(() => ({ connectors: [] })),
+  connect: vi.fn(), disconnect: vi.fn(), getAccount: vi.fn(() => ({})),
+  signMessage: vi.fn(), watchAccount: vi.fn(() => () => undefined), http: vi.fn(),
+}));
+vi.mock('@wagmi/connectors', () => ({
+  injected: vi.fn(() => ({ id: 'injected' })), walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
+}));
+
+// Port de packages/react/src/components/txns/internals/TxnError.test.tsx +
+// TxnActions.behavior.test.tsx (REPORT -> client.txns.report). Mapa: Vue.
+describe('TxnError', () => {
+  function makeClient(report = vi.fn()) {
+    return { txns: { report } } as any;
+  }
+
+  it('renderiza el panel de error de txn', async () => {
+    await render(TxnErrorComponent, {
+      inputs: { errorMessageTxt: 'No transactions found' },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(screen.getByText('No transactions found')).toBeDefined();
+    expect(screen.getByText('REPORT')).toBeDefined();
+  });
+
+  it('REPORT llama a client.txns.report(slug)', async () => {
+    const report = vi.fn();
+    await render(TxnErrorComponent, {
+      inputs: { errorMessageTxt: 'No transactions found', errorMessageSlug: 'no_transactions_found' },
+      providers: [provideBlockAuthClientForTest(makeClient(report))],
+    });
+    await fireEvent.click(screen.getByText('REPORT'));
+    expect(report).toHaveBeenCalledWith('no_transactions_found');
+  });
+
+  describe('countdown tras REPORT', () => {
+    beforeEach(() => {
+      vi.useFakeTimers();
+    });
+    afterEach(() => {
+      vi.useRealTimers();
+    });
+
+    it('muestra "Thanks for reporting" y cuenta hasta cerrar via closeTxns', async () => {
+      const closeTxns = vi.fn();
+      @Component({
+        standalone: true,
+        imports: [TxnErrorComponent],
+        template: `<ba-txn-error errorMessageTxt="No transactions found" [closeTxns]="c" />`,
+      })
+      class Host {
+        c = closeTxns;
+      }
+      const { fixture } = await render(Host, {
+        providers: [provideBlockAuthClientForTest(makeClient())],
+      });
+
+      await fireEvent.click(screen.getByText('REPORT'));
+      await vi.advanceTimersByTimeAsync(1500);
+      fixture.detectChanges();
+      expect(screen.getByText('Thanks for reporting the error!')).toBeDefined();
+
+      // 10s countdown, ticking every second; closeTxns fires when it hits 0.
+      await vi.advanceTimersByTimeAsync(9000);
+      expect(closeTxns).not.toHaveBeenCalled();
+      await vi.advanceTimersByTimeAsync(1000);
+      expect(closeTxns).toHaveBeenCalledOnce();
+    });
+
+    it('con isCountdown=false no arranca el countdown ni cierra solo', async () => {
+      const closeTxns = vi.fn();
+      @Component({
+        standalone: true,
+        imports: [TxnErrorComponent],
+        template: `<ba-txn-error errorMessageTxt="No transactions found" [closeTxns]="c" [isCountdown]="false" />`,
+      })
+      class Host {
+        c = closeTxns;
+      }
+      const { fixture } = await render(Host, {
+        providers: [provideBlockAuthClientForTest(makeClient())],
+      });
+
+      await fireEvent.click(screen.getByText('REPORT'));
+      await vi.advanceTimersByTimeAsync(1500);
+      await vi.advanceTimersByTimeAsync(20000);
+      fixture.detectChanges();
+      expect(closeTxns).not.toHaveBeenCalled();
+
+      await fireEvent.click(screen.getByText('Close'));
+      expect(closeTxns).toHaveBeenCalledOnce();
+    });
+  });
+});

package/src/lib/components/txns/internals/txn-error.component.ts

@@ -0,0 +1,121 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  inject,
+  input,
+  signal,
+} from '@angular/core';
+import { injectBlockAuthClient } from '../../../provide-block-auth';
+
+// `closeTxns` se mantiene como INPUT DE FUNCIÓN (no output): react lo invoca
+// imperativamente tanto desde el botón "Close" como desde dentro del
+// setInterval del countdown — no es un evento de UI disparado por una
+// interacción directa de este componente, sino una función que este orquesta
+// a su propio ritmo (misma convención que Txn/TxnsOverview para este prop).
+//
+// Deviación deliberada (consistente con el port Vue): se limpian el
+// timeout/interval pendientes vía `DestroyRef` para no mutar signals de un
+// componente ya destruido en tests con temporizadores reales/fake.
+@Component({
+  selector: 'ba-txn-error',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      class="bas-box-border bas-flex bas-h-full bas-max-w-full bas-flex-col bas-items-center bas-gap-8 bas-px-4 bas-pt-6 bas-text-center bas-text-xl bas-font-medium bas-text-[var(--bal-primary-800)]"
+    >
+      <div class="bas-h-20 bas-w-20 bas-text-red-700" aria-hidden="true">⚠</div>
+      <div
+        class="bal-ba-transition-2 bal-ba-shadow-base bal-ba-hover-shadow-lg bas-box-border bas-flex bas-w-full bas-cursor-default bas-items-center bas-justify-center bas-rounded-md bas-border-2 bas-border-solid bas-border-red-600 bas-bg-red-50 bas-px-2 bas-py-4 bas-text-2xl bas-text-[var(--bal-primary-600)] hover:bas-border-red-800 hover:bas-bg-red-100 hover:bas-text-[var(--bal-primary-900)]"
+      >
+        <p class="bas-m-0">{{ errorMessageTxt() }}</p>
+      </div>
+      <div class="bas-box-border bas-flex bas-w-full bas-flex-col bas-items-center bas-justify-center bas-gap-1 bas-px-1">
+        <div class="bas-h-16 bas-w-full">
+          @if (!reportSent()) {
+            <p class="bas-m-0">{{ helpUsTxt() }}</p>
+          } @else {
+            <p class="bas-m-0">{{ thanksForReportTxt() }}</p>
+          }
+        </div>
+        @if (!reportSent()) {
+          <button
+            type="button"
+            id="btn-txn-report-error"
+            [disabled]="sendingReport()"
+            class="bal-ba-hover-ring-red-500 bal-ba-focus-ring-red-500 bas-mt-2 bas-w-[220px] bas-justify-center bas-bg-red-500 hover:bas-bg-red-600 bas-px-4 bas-text-center bas-text-xl bas-font-medium bas-text-[var(--bal-primary-10)]"
+            (click)="onReportErrorClicked()"
+          >
+            {{ sendingReport() ? '…' : reportTxt() }}
+          </button>
+        } @else {
+          <button
+            type="button"
+            id="btn-txn-error-report"
+            class="bal-ba-hover-ring-primary-300 bal-ba-focus-ring-primary-300 bas-mt-2 bas-w-[220px] bas-justify-center bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-300)] bas-bg-transparent bas-px-4 bas-text-center bas-text-xl bas-font-medium bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]"
+            (click)="close()"
+          >
+            {{ textCloseTxt() }}
+          </button>
+        }
+      </div>
+      @if (reportSent() && isCountdown()) {
+        <div class="bas-flex bas-flex-row bas-items-end bas-gap-2">
+          <p class="bas-m-0">{{ modalWillCloseInTxt() }}</p>
+          <p class="bas-m-0">{{ countDown() }}</p>
+        </div>
+      }
+    </div>
+  `,
+})
+export class TxnErrorComponent {
+  errorMessageSlug = input('unknown');
+  errorMessageTxt = input('unknown');
+  closeTxns = input<() => void>(() => {});
+  helpUsTxt = input('Help us get better and report the error here');
+  thanksForReportTxt = input('Thanks for reporting the error!');
+  reportTxt = input('REPORT');
+  textCloseTxt = input('Close');
+  modalWillCloseInTxt = input('This modal will close in...');
+  isCountdown = input(true);
+
+  private readonly client = injectBlockAuthClient();
+
+  protected readonly sendingReport = signal(false);
+  protected readonly reportSent = signal(false);
+  protected readonly countDown = signal(10);
+
+  private reportTimeout: ReturnType<typeof setTimeout> | undefined;
+  private countdownInterval: ReturnType<typeof setInterval> | undefined;
+
+  constructor() {
+    inject(DestroyRef).onDestroy(() => {
+      if (this.reportTimeout) clearTimeout(this.reportTimeout);
+      if (this.countdownInterval) clearInterval(this.countdownInterval);
+    });
+  }
+
+  close(): void {
+    this.closeTxns()();
+  }
+
+  onReportErrorClicked(): void {
+    this.sendingReport.set(true);
+    this.client.txns.report(this.errorMessageSlug());
+    this.reportTimeout = setTimeout(() => {
+      this.sendingReport.set(false);
+      this.reportSent.set(true);
+      if (!this.isCountdown()) return;
+      this.countdownInterval = setInterval(() => {
+        if (this.countDown() === 1) {
+          this.closeTxns()();
+          clearInterval(this.countdownInterval);
+          this.countDown.set(0);
+          return;
+        }
+        this.countDown.update((v) => v - 1);
+      }, 1000);
+    }, 1500);
+  }
+}

package/src/lib/components/txns/internals/txn-type.component.test.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect, vi } from 'vitest';
+import { Component } from '@angular/core';
+import { render, screen, fireEvent } from '@testing-library/angular';
+import { TxnTypeComponent } from './txn-type.component';
+
+// Port de packages/react/src/components/txns/internals/TxnType.test.tsx (mapa:
+// packages/vue/.../TxnType.test.ts). Componente presentacional, sin client.
+describe('TxnType', () => {
+  it('renderiza el tipo de txn con navegacion', async () => {
+    @Component({
+      standalone: true,
+      imports: [TxnTypeComponent],
+      template: `<ba-txn-type txnType="Log In" [txnsLength]="2" />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(screen.getByText('Log In')).toBeDefined();
+    expect(screen.getByLabelText('next transaction')).toBeDefined();
+    expect(screen.getByLabelText('previous transaction')).toBeDefined();
+  });
+
+  it('no muestra flechas de navegacion cuando solo hay una txn', async () => {
+    @Component({
+      standalone: true,
+      imports: [TxnTypeComponent],
+      template: `<ba-txn-type txnType="Log In" [txnsLength]="1" />`,
+    })
+    class Host {}
+    await render(Host);
+    expect(screen.queryByLabelText('next transaction')).toBeNull();
+    expect(screen.queryByLabelText('previous transaction')).toBeNull();
+  });
+
+  it('emite prevTxnClicked/nextTxnClicked al hacer click en las flechas', async () => {
+    const onPrev = vi.fn();
+    const onNext = vi.fn();
+    @Component({
+      standalone: true,
+      imports: [TxnTypeComponent],
+      template: `<ba-txn-type txnType="Log In" [txnsLength]="2" (prevTxnClicked)="p()" (nextTxnClicked)="n()" />`,
+    })
+    class Host {
+      p = onPrev;
+      n = onNext;
+    }
+    await render(Host);
+    await fireEvent.click(screen.getByLabelText('previous transaction'));
+    await fireEvent.click(screen.getByLabelText('next transaction'));
+    expect(onPrev).toHaveBeenCalledOnce();
+    expect(onNext).toHaveBeenCalledOnce();
+  });
+});

package/src/lib/components/txns/internals/txn-type.component.ts

@@ -0,0 +1,51 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+// Puramente presentacional: sin
+// lógica de core. `onPrevTxnClicked`/`onNextTxnClicked` (callback props en
+// react) -> outputs `prevTxnClicked`/`nextTxnClicked` (eventos de click, no
+// funciones invocadas imperativamente por el padre), igual que el port Vue.
+// Las flechas `‹`/`›` (‹ ›) se escriben como caracteres literales.
+@Component({
+  selector: 'ba-txn-type',
+  standalone: true,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: `
+    <div
+      [class]="
+        (txnsLength() > 1 ? 'bas-grid bas-grid-cols-[28px_1fr_28px]' : 'bas-flex') +
+        ' bas-group bas-z-0 bas-w-full bas-items-center bas-justify-between bas-gap-1'
+      "
+    >
+      @if (txnsLength() > 1) {
+        <span
+          aria-label="previous transaction"
+          class="bal-ba-transition-2 bas-flex bas-h-7 bas-w-7 bas-cursor-pointer bas-items-center bas-justify-center bas-rounded-full hover:bas-bg-[#e7ecef] bas-text-[var(--bal-primary-500)] group-hover:bas-text-[var(--bal-primary-700)]"
+          (click)="prevTxnClicked.emit()"
+          >‹</span
+        >
+      }
+      <div class="bas-flex bas-w-full bas-items-center bas-justify-center bas-gap-3">
+        <span class="bal-ba-transition-2 bas-h-px bas-flex-1 bas-bg-[var(--bal-primary-300)] group-hover:bas-bg-[var(--bal-primary-500)]"></span>
+        <p class="bal-ba-transition-2 bas-m-0 bas-cursor-default bas-text-center bas-text-lg bas-text-[var(--bal-primary-700)] group-hover:bas-text-[var(--bal-primary-900)]">
+          {{ txnType() }}
+        </p>
+        <span class="bal-ba-transition-2 bas-h-px bas-flex-1 bas-bg-[var(--bal-primary-300)] group-hover:bas-bg-[var(--bal-primary-500)]"></span>
+      </div>
+      @if (txnsLength() > 1) {
+        <span
+          aria-label="next transaction"
+          class="bal-ba-transition-2 bas-flex bas-h-7 bas-w-7 bas-cursor-pointer bas-items-center bas-justify-center bas-rounded-full hover:bas-bg-[#e7ecef] bas-text-[var(--bal-primary-500)] group-hover:bas-text-[var(--bal-primary-700)]"
+          (click)="nextTxnClicked.emit()"
+          >›</span
+        >
+      }
+    </div>
+  `,
+})
+export class TxnTypeComponent {
+  txnType = input('');
+  txnsLength = input(1);
+
+  prevTxnClicked = output<void>();
+  nextTxnClicked = output<void>();
+}