@block-auth.io/angular 0.1.1 → 0.2.0

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

@@ -1,16 +1,22 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { Component } from '@angular/core';
 import { render, screen, fireEvent } from '@testing-library/angular';
+import { setLocale } from '@block-auth.io/core';
 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(),
+  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' })),
+  injected: vi.fn(() => ({ id: 'injected' })),
+  walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
 }));
 
 // Port de packages/react/src/components/txns/internals/TxnError.test.tsx +
@@ -20,6 +26,8 @@ describe('TxnError', () => {
     return { txns: { report } } as any;
   }
 
+  afterEach(() => setLocale('en'));
+
   it('renderiza el panel de error de txn', async () => {
     await render(TxnErrorComponent, {
       inputs: { errorMessageTxt: 'No transactions found' },
@@ -29,10 +37,22 @@ describe('TxnError', () => {
     expect(screen.getByText('REPORT')).toBeDefined();
   });
 
+  it('respeta el locale activo cuando no se pasan textos custom', async () => {
+    setLocale('es');
+    await render(TxnErrorComponent, {
+      inputs: { errorMessageTxt: 'No transactions found' },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(screen.getByText('REPORTAR')).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' },
+      inputs: {
+        errorMessageTxt: 'No transactions found',
+        errorMessageSlug: 'no_transactions_found',
+      },
       providers: [provideBlockAuthClientForTest(makeClient(report))],
     });
     await fireEvent.click(screen.getByText('REPORT'));
@@ -52,7 +72,10 @@ describe('TxnError', () => {
       @Component({
         standalone: true,
         imports: [TxnErrorComponent],
-        template: `<ba-txn-error errorMessageTxt="No transactions found" [closeTxns]="c" />`,
+        template: `<ba-txn-error
+          errorMessageTxt="No transactions found"
+          [closeTxns]="c"
+        />`,
       })
       class Host {
         c = closeTxns;
@@ -78,7 +101,11 @@ describe('TxnError', () => {
       @Component({
         standalone: true,
         imports: [TxnErrorComponent],
-        template: `<ba-txn-error errorMessageTxt="No transactions found" [closeTxns]="c" [isCountdown]="false" />`,
+        template: `<ba-txn-error
+          errorMessageTxt="No transactions found"
+          [closeTxns]="c"
+          [isCountdown]="false"
+        />`,
       })
       class Host {
         c = closeTxns;

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

@@ -2,10 +2,13 @@ import {
   ChangeDetectionStrategy,
   Component,
   DestroyRef,
+  computed,
   inject,
   input,
   signal,
 } from '@angular/core';
+import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import { injectStore } from '../../../inject-store';
 import { injectBlockAuthClient } from '../../../provide-block-auth';
 
 // `closeTxns` se mantiene como INPUT DE FUNCIÓN (no output): react lo invoca
@@ -31,40 +34,42 @@ import { injectBlockAuthClient } from '../../../provide-block-auth';
       >
         <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-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>
+          <p class="bas-m-0">{{ helpUsTxtResolved() }}</p>
           } @else {
-            <p class="bas-m-0">{{ thanksForReportTxt() }}</p>
+          <p class="bas-m-0">{{ thanksForReportTxtResolved() }}</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>
+        <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() ? '…' : reportTxtResolved() }}
+        </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>
+        <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()"
+        >
+          {{ textCloseTxtResolved() }}
+        </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 class="bas-flex bas-flex-row bas-items-end bas-gap-2">
+        <p class="bas-m-0">{{ modalWillCloseInTxtResolved() }}</p>
+        <p class="bas-m-0">{{ countDown() }}</p>
+      </div>
       }
     </div>
   `,
@@ -73,14 +78,32 @@ 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...');
+  helpUsTxt = input<string>();
+  thanksForReportTxt = input<string>();
+  reportTxt = input<string>();
+  textCloseTxt = input<string>();
+  modalWillCloseInTxt = input<string>();
   isCountdown = input(true);
 
   private readonly client = injectBlockAuthClient();
+  private readonly locale = injectStore($locale);
+  protected t = (key: TextKey): string => translate(key, this.locale());
+
+  protected readonly helpUsTxtResolved = computed(
+    () => this.helpUsTxt() ?? this.t('helpUsReport'),
+  );
+  protected readonly thanksForReportTxtResolved = computed(
+    () => this.thanksForReportTxt() ?? this.t('thanksForReport'),
+  );
+  protected readonly reportTxtResolved = computed(
+    () => this.reportTxt() ?? this.t('report'),
+  );
+  protected readonly textCloseTxtResolved = computed(
+    () => this.textCloseTxt() ?? this.t('close'),
+  );
+  protected readonly modalWillCloseInTxtResolved = computed(
+    () => this.modalWillCloseInTxt() ?? this.t('modalWillCloseIn'),
+  );
 
   protected readonly sendingReport = signal(false);
   protected readonly reportSent = signal(false);

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

@@ -1,17 +1,23 @@
-import { describe, it, expect, vi } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { Component } from '@angular/core';
 import { render, screen, fireEvent } from '@testing-library/angular';
 import { map } from 'nanostores';
+import { setLocale } from '@block-auth.io/core';
 import { TxnComponent } from './txn.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(),
+  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' })),
+  injected: vi.fn(() => ({ id: 'injected' })),
+  walletConnect: vi.fn(() => ({ id: 'walletConnect' })),
 }));
 
 // Port de packages/react/src/components/txns/internals/Txn.test.tsx +
@@ -30,6 +36,8 @@ describe('Txn', () => {
     } as any;
   }
 
+  afterEach(() => setLocale('en'));
+
   it('renderiza el cuerpo de la txn con aceptar/rechazar', async () => {
     await render(TxnComponent, {
       inputs: { hasSolicitedData: true },
@@ -40,10 +48,27 @@ describe('Txn', () => {
     expect(screen.getByText('REJECT')).toBeDefined();
   });
 
+  it('respeta el locale activo cuando no se pasan textos custom', async () => {
+    setLocale('es');
+    await render(TxnComponent, {
+      inputs: { hasSolicitedData: true },
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    expect(screen.getByText('Permisos requeridos')).toBeDefined();
+    expect(screen.getByText('ACEPTAR')).toBeDefined();
+    expect(screen.getByText('RECHAZAR')).toBeDefined();
+  });
+
   it('ACCEPT esta deshabilitado hasta aceptar PPTC (y allRequiredFilled)', async () => {
-    await render(TxnComponent, { providers: [provideBlockAuthClientForTest(makeClient())] });
-    const acceptBtn = screen.getByText('ACCEPT').closest('button') as HTMLButtonElement;
-    const checkbox = screen.getByTestId('checkbox-animated') as HTMLInputElement;
+    await render(TxnComponent, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
+    const acceptBtn = screen
+      .getByText('ACCEPT')
+      .closest('button') as HTMLButtonElement;
+    const checkbox = screen.getByTestId(
+      'checkbox-animated',
+    ) as HTMLInputElement;
     expect(acceptBtn.disabled).toBe(true);
     expect(checkbox.checked).toBe(false);
 
@@ -58,7 +83,9 @@ describe('Txn', () => {
       providers: [provideBlockAuthClientForTest(makeClient())],
     });
     await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
-    const acceptBtn = screen.getByText('ACCEPT').closest('button') as HTMLButtonElement;
+    const acceptBtn = screen
+      .getByText('ACCEPT')
+      .closest('button') as HTMLButtonElement;
     expect(acceptBtn.disabled).toBe(true);
   });
 
@@ -105,7 +132,10 @@ describe('Txn', () => {
     @Component({
       standalone: true,
       imports: [TxnComponent],
-      template: `<ba-txn [selectedTxnPreParams]="{ appKey: 'k' }" [addError]="e" />`,
+      template: `<ba-txn
+        [selectedTxnPreParams]="{ appKey: 'k' }"
+        [addError]="e"
+      />`,
     })
     class Host {
       e = addError;
@@ -122,7 +152,10 @@ describe('Txn', () => {
     @Component({
       standalone: true,
       imports: [TxnComponent],
-      template: `<ba-txn [selectedTxnPreParams]="{ appKey: 'k', to: '0xabc' }" [userParamValues]="{ 'users-email': 'a@b.com' }" />`,
+      template: `<ba-txn
+        [selectedTxnPreParams]="{ appKey: 'k', to: '0xabc' }"
+        [userParamValues]="{ 'users-email': 'a@b.com' }"
+      />`,
     })
     class Host {}
     await render(Host, { providers: [provideBlockAuthClientForTest(client)] });
@@ -141,13 +174,19 @@ describe('Txn', () => {
     @Component({
       standalone: true,
       imports: [TxnComponent],
-      template: `<ba-txn [hasSolicitedData]="true" (permissionsRequiredClicked)="p()" (solicitedDataClicked)="s()" />`,
+      template: `<ba-txn
+        [hasSolicitedData]="true"
+        (permissionsRequiredClicked)="p()"
+        (solicitedDataClicked)="s()"
+      />`,
     })
     class Host {
       p = onPerm;
       s = onSol;
     }
-    await render(Host, { providers: [provideBlockAuthClientForTest(makeClient())] });
+    await render(Host, {
+      providers: [provideBlockAuthClientForTest(makeClient())],
+    });
     await fireEvent.click(screen.getByText('Permissions required'));
     await fireEvent.click(screen.getByText('Solicited data'));
     expect(onPerm).toHaveBeenCalledOnce();
@@ -160,9 +199,13 @@ describe('Txn', () => {
     });
     // Antes del click no hay ni slider ni TimePicker.
     expect(container.querySelector('#txn-lifetime-slider-slider')).toBeNull();
-    await fireEvent.click(screen.getByText('I want to configure my session time'));
+    await fireEvent.click(
+      screen.getByText('I want to configure my session time'),
+    );
     // El slider estilado (SliderBase) y el input del TimePicker aparecen.
-    const slider = container.querySelector('#txn-lifetime-slider-slider') as HTMLInputElement;
+    const slider = container.querySelector(
+      '#txn-lifetime-slider-slider',
+    ) as HTMLInputElement;
     expect(slider).not.toBeNull();
     expect(slider.type).toBe('range');
     const timeInput = container.querySelector(
@@ -177,8 +220,12 @@ describe('Txn', () => {
     const { container } = await render(TxnComponent, {
       providers: [provideBlockAuthClientForTest(makeClient())],
     });
-    await fireEvent.click(screen.getByText('I want to configure my session time'));
-    const slider = container.querySelector('#txn-lifetime-slider-slider') as HTMLInputElement;
+    await fireEvent.click(
+      screen.getByText('I want to configure my session time'),
+    );
+    const slider = container.querySelector(
+      '#txn-lifetime-slider-slider',
+    ) as HTMLInputElement;
     await fireEvent.input(slider, { target: { value: '7200' } }); // 02:00:00
     const timeInput = container.querySelector(
       '#txn-lifetime-slider-time-picker-time-input',