@block-auth.io/angular 0.2.10 → 0.3.0

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

@@ -48,60 +48,62 @@ interface TxnPreParams {
       class="bas-flex bas-h-full bas-w-full bas-flex-col bas-items-center bas-justify-between"
     >
       <div
-        class="bal-ba-transition-3 bas-flex bas-w-full bas-flex-col bas-gap-8 bas-pt-2"
+        class="bal-ba-glass-rise bas-flex bas-w-full bas-flex-col bas-gap-8 bas-pt-2"
       >
-        <div
-          class="bal-ba-outline-none bas-grid bas-h-[30px] bas-cursor-pointer bas-grid-cols-[65px_auto_65px] bas-items-center bas-justify-center bas-gap-2"
-          (click)="permissionsRequiredClicked.emit()"
-        >
-          <ba-arrow-icon direction="right" />
-          <div class="bas-flex bas-h-full bas-w-full bas-items-end">
-            <p
-              class="bas-m-0 bas-text-center bas-text-lg bas-font-medium bas-text-[var(--bal-primary-900)]"
-            >
+        <div class="bas-relative bas-flex bas-w-full">
+          <button
+            type="button"
+            id="btn-txn-permissions-required"
+            class="bal-ba-glass-btn"
+            (click)="permissionsRequiredClicked.emit()"
+          >
+            <span class="bal-ba-glass-btn-label">
               {{ permissionsRequiredTxtResolved() }}
-            </p>
-          </div>
-          <ba-arrow-icon direction="left" />
+            </span>
+          </button>
         </div>
 
-        <div
-          [class]="
-            'bas-grid bas-h-[30px] bas-grid-cols-[65px_auto_65px] bas-items-center bas-justify-center bas-gap-2 ' +
-            (hasSolicitedData()
-              ? 'bas-cursor-pointer'
-              : 'bas-cursor-not-allowed bas-opacity-40')
-          "
-          (click)="onSolicitedDataClick()"
-        >
-          <ba-arrow-icon direction="right" />
-          <div
-            class="bas-flex bas-h-full bas-w-full bas-items-end bas-justify-center"
+        <div class="bas-relative bas-flex bas-w-full">
+          <button
+            type="button"
+            id="btn-txn-solicited-data"
+            [disabled]="!hasSolicitedData()"
+            [class]="
+              'bal-ba-glass-btn' +
+              (showSolicitedArrows() ? ' bal-ba-glass-btn-pending' : '') +
+              (acceptHint() === 'solicitedData' ? ' bal-ba-head-shake' : '')
+            "
+            (click)="onSolicitedDataClick()"
           >
-            <p
-              [class]="
-                'bas-m-0 bas-text-center bas-text-lg bas-transition-colors ' +
-                (hasSolicitedData()
-                  ? 'bas-font-medium bas-text-[var(--bal-primary-900)]'
-                  : 'bas-text-slate-400')
-              "
-            >
+            <span class="bal-ba-glass-btn-label">
               {{ solicitedDataTxtResolved() }}
-            </p>
-          </div>
-          <ba-arrow-icon direction="left" />
+            </span>
+          </button>
+          <span class="bal-ba-glass-btn-arrow bal-ba-glass-btn-arrow-left">
+            <ba-arrow-icon
+              direction="right"
+              [visible]="showSolicitedArrows()"
+            />
+          </span>
+          <span class="bal-ba-glass-btn-arrow bal-ba-glass-btn-arrow-right">
+            <ba-arrow-icon direction="left" [visible]="showSolicitedArrows()" />
+          </span>
         </div>
       </div>
 
-      @if (!showLifetime()) {
       <button
         type="button"
         id="btn-configure-session-time"
-        class="bal-ba-transition-2 bas-flex bas-w-full bas-cursor-pointer bas-flex-row bas-items-end bas-justify-center bas-gap-2 bas-border-0 bas-bg-transparent bas-text-[--bal-primary-700] hover:bas-text-[--bal-primary-900]"
+        class="bal-ba-glass-link bal-ba-glass-rise bas-flex bas-w-full bas-cursor-pointer bas-flex-row bas-items-end bas-justify-center bas-gap-2 bas-border-0 bas-bg-transparent bas-text-[--bal-primary-700] hover:bas-text-[--bal-primary-900]"
         (click)="showLifetime.set(true)"
       >
         <p class="bas-m-0 bas-text-center bas-text-base">
           {{ configureSessionTimeTxtResolved() }}
+          @if (isLifetimeConfigured()) {
+          <span id="txn-lifetime-value" class="bal-ba-glass-link-value">{{
+            lifetimeTimeValue()
+          }}</span>
+          }
         </p>
         <svg
           class="bas-h-5 bas-w-5"
@@ -119,37 +121,81 @@ interface TxnPreParams {
           />
         </svg>
       </button>
-      } @else {
-      <ba-lifetime-slider-base
-        id="txn-lifetime-slider"
-        [sliderValue]="lifetimeSign()"
-        [step]="1"
-        [min]="minLifetime()"
-        [max]="maxLifetime()"
-        [timeInputValue]="lifetimeTimeValue()"
-        [isOpen]="isTimePickerOpen()"
-        [isTimePickerInsideModal]="true"
-        modalId="txns-overview"
-        timePickerDropdownDirection="up"
-        classNames="bas-grid bas-h-auto bas-w-full bas-items-center bas-gap-3 bas-grid-cols-[152px_1fr]"
-        timePickerContainerClassNames="bas-flex bas-w-full bas-items-center bas-justify-center"
-        (sliderValueChanged)="onLifetimeValueChanged($event)"
-        (timeChanged)="onLifetimeValueChanged($event)"
-        (isOpenChange)="isTimePickerOpen.set($event)"
-        (toggleTimerDropdown)="toggleTimerDropdown()"
-      />
+
+      @if (showLifetime()) {
+      <div
+        class="bal-ba-glass-backdrop bal-ba-backdrop-blur-base bal-ba-backdrop-blur-sm bas-absolute bas-inset-0 bas-z-30 bas-box-border bas-h-full bas-w-full"
+        (click)="closeLifetime()"
+      ></div>
+      <div
+        class="bal-ba-glass-popup-slot bas-absolute bas-inset-x-0 bas-top-44 bas-z-40"
+      >
+        <div
+          role="dialog"
+          id="txn-lifetime-modal"
+          [attr.aria-label]="configureSessionTimeTxtResolved()"
+          class="bal-ba-glass-panel bal-ba-glass-pop bal-ba-glass-lifetime bas-box-border bas-w-[334px] bas-p-4"
+        >
+          <div class="bal-ba-glass-modal-head">
+            <button
+              type="button"
+              id="txn-lifetime-close"
+              [attr.aria-label]="t('close')"
+              class="bal-ba-glass-close"
+              (click)="closeLifetime()"
+            >
+              <svg
+                viewBox="0 0 10 10"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="1.6"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                <path d="M2 2l6 6M8 2 2 8" />
+              </svg>
+            </button>
+          </div>
+          <ba-lifetime-slider-base
+            id="txn-lifetime-slider"
+            [sliderValue]="lifetimeSign()"
+            [step]="1"
+            [min]="minLifetime()"
+            [max]="maxLifetime()"
+            [timeInputValue]="lifetimeTimeValue()"
+            [isOpen]="isTimePickerOpen()"
+            [isTimePickerInsideModal]="true"
+            modalId="txns-overview"
+            timePickerDropdownDirection="down"
+            classNames="bal-ba-glass-lifetime-body"
+            timePickerContainerClassNames="bal-ba-glass-time bas-flex bas-w-full bas-items-center bas-justify-center"
+            sliderContainerClassNames="bal-ba-glass-slider"
+            (sliderValueChanged)="onLifetimeValueChanged($event)"
+            (timeChanged)="onLifetimeValueChanged($event)"
+            (isOpenChange)="isTimePickerOpen.set($event)"
+            (toggleTimerDropdown)="toggleTimerDropdown()"
+          />
+          <button
+            type="button"
+            id="txn-lifetime-accept"
+            class="bal-ba-glass-action bal-ba-glass-action-primary"
+            (click)="closeLifetime()"
+          >
+            {{ acceptTxtResolved() }}
+          </button>
+        </div>
+      </div>
       }
 
       <div
-        class="bal-ba-transition-3 bas-flex bas-w-full bas-flex-col bas-gap-8 bas-pb-4"
+        class="bal-ba-glass-rise bas-flex bas-w-full bas-flex-col bas-gap-8 bas-pb-4"
       >
         <div
           data-testid="txn-pptc-toggle"
           [class]="
-            'bas-group bal-ba-transition-2 bas-box-border bas-flex bas-h-fit bas-w-full bas-flex-row bas-items-center bas-gap-3 bas-rounded-md bas-border-2 bas-border-solid bas-border-[var(--bal-primary-100)] bas-p-1 bas-pl-2 bal-ba-ring-base bal-ba-hover-ring-2 ' +
-            (pptcAccepted()
-              ? 'bas-border-[var(--bal-primary-300)] bal-ba-hover-ring-primary-300'
-              : 'bal-ba-hover-ring-primary-200')
+            'bal-ba-glass-consent bas-group bas-box-border bas-flex bas-h-fit bas-w-full bas-flex-row bas-items-center bas-gap-3 bas-p-[5px] bas-pl-[9px]' +
+            (pptcAccepted() ? ' bal-ba-glass-consent-checked' : '') +
+            (acceptHint() === 'privacyPolicy' ? ' bal-ba-head-shake' : '')
           "
           (click)="pptcAccepted.set(!pptcAccepted())"
         >
@@ -206,7 +252,7 @@ interface TxnPreParams {
           <button
             type="button"
             id="btn-txn-reject"
-            class="bal-ba-ring-base bal-ba-ring bal-ba-transition-2 bas-group bas-relative bas-box-border bas-flex bas-flex-row bas-gap-2 bas-items-center bas-overflow-hidden bas-bg-transparent bal-ba-hover-ring-slate-400 bal-ba-focus-ring-slate-400 bas-h-[42px] bas-px-2.5 bas-py-0 disabled:bas-cursor-not-allowed disabled:bas-opacity-50 bal-ba-hover-ring-2 bas-cursor-pointer bal-ba-focus-ring-2 focus:bas-opacity-90 bal-ba-focus-ring-offset-0 bas-w-full bas-justify-center bas-border-2 bas-border-slate-400 bas-rounded-md bas-border-solid"
+            class="bal-ba-glass-action bal-ba-glass-action-reject bas-group bas-box-border bas-flex bas-h-[42px] bas-w-full bas-cursor-pointer bas-flex-row bas-items-center bas-justify-center bas-gap-2 bas-px-2.5 bas-py-0"
             (click)="onTxnRejectClicked()"
           >
             <span
@@ -215,19 +261,28 @@ interface TxnPreParams {
               {{ rejectTxtResolved() }}
             </span>
           </button>
-          <button
-            type="button"
-            id="btn-txn-accept"
-            [disabled]="!pptcAccepted() || !allRequiredFilled()"
-            class="bal-ba-ring-base bal-ba-ring bal-ba-transition-2 bas-group bas-relative bas-box-border bas-flex bas-flex-row bas-gap-2 bas-items-center bas-overflow-hidden bas-bg-[#38b000] hover:bas-bg-[#329e00] bal-ba-hover-ring-green-500 bal-ba-focus-ring-green-500 bas-h-[42px] bas-px-2.5 bas-py-0 disabled:bas-cursor-not-allowed disabled:bas-opacity-50 bal-ba-hover-ring-2 bas-cursor-pointer bal-ba-focus-ring-2 focus:bas-opacity-90 bal-ba-focus-ring-offset-2 bal-ba-hover-ring-offset-2 bas-w-full bas-justify-center bas-border-none bas-rounded-md"
-            (click)="onTxnAcceptClicked()"
+          <div
+            data-testid="txn-accept-wrapper"
+            class="bas-flex bas-w-full"
+            (mouseenter)="showAcceptHint.set(true)"
+            (mouseleave)="showAcceptHint.set(false)"
+            (focusin)="showAcceptHint.set(true)"
+            (focusout)="showAcceptHint.set(false)"
           >
-            <span
-              class="bal-ba-transition-2 bas-text-white bas-text-center bas-text-base bas-font-medium bas-flex bas-h-full bas-items-center"
+            <button
+              type="button"
+              id="btn-txn-accept"
+              [disabled]="isAcceptDisabled()"
+              class="bal-ba-glass-action bal-ba-glass-action-accept bas-group bas-box-border bas-flex bas-h-[42px] bas-w-full bas-cursor-pointer bas-flex-row bas-items-center bas-justify-center bas-gap-2 bas-px-2.5 bas-py-0"
+              (click)="onTxnAcceptClicked()"
             >
-              {{ acceptTxtResolved() }}
-            </span>
-          </button>
+              <span
+                class="bal-ba-transition-2 bas-text-white bas-text-center bas-text-base bas-font-medium bas-flex bas-h-full bas-items-center"
+              >
+                {{ acceptTxtResolved() }}
+              </span>
+            </button>
+          </div>
         </div>
       </div>
     </div>
@@ -245,6 +300,7 @@ export class TxnComponent {
   configureSessionTimeTxt = input<string>();
   hasSolicitedData = input(false);
   allRequiredFilled = input(true);
+  solicitedDataPending = input<boolean>();
   closeTxns = input<() => void>(() => {});
   /** Session lifetime in seconds (default 3600). */
   lifetime = input(3600);
@@ -252,6 +308,8 @@ export class TxnComponent {
   selectedTxnPreParams = input<TxnPreParams>({});
   /** User-provided parameter values for solicited data. */
   userParamValues = input<Record<string, string>>({});
+  grantedParams = input<string[]>([]);
+  revokedParams = input<string[]>([]);
   /** Callback when an error occurs during accept validation. */
   addError = input<(messageSlug: string) => void>(() => {});
 
@@ -292,6 +350,21 @@ export class TxnComponent {
 
   protected readonly pptcAccepted = signal(false);
   protected readonly showLifetime = signal(false);
+  protected readonly showAcceptHint = signal(false);
+  protected readonly isAcceptDisabled = computed(
+    () => !this.pptcAccepted() || !this.allRequiredFilled(),
+  );
+  protected readonly acceptHint = computed<
+    'privacyPolicy' | 'solicitedData' | null
+  >(() => {
+    if (!this.showAcceptHint() || !this.isAcceptDisabled()) return null;
+    return this.pptcAccepted() ? 'solicitedData' : 'privacyPolicy';
+  });
+  protected readonly showSolicitedArrows = computed(
+    () =>
+      this.solicitedDataPending() ??
+      (this.hasSolicitedData() && !this.allRequiredFilled()),
+  );
 
   private readonly lifetimeData = computed(
     () => this.selectedTxnPreParams().lifetime ?? {},
@@ -308,6 +381,7 @@ export class TxnComponent {
   // en sync.
   protected readonly lifetimeTimeValue = signal(getTimeBySec(this.lifetime()));
   protected readonly isTimePickerOpen = signal(false);
+  protected readonly isLifetimeConfigured = signal(false);
 
   private autoCloseTimeout: ReturnType<typeof setTimeout> | undefined;
 
@@ -335,6 +409,12 @@ export class TxnComponent {
   onLifetimeValueChanged(value: number): void {
     this.lifetimeSign.set(value);
     this.lifetimeTimeValue.set(getTimeBySec(value));
+    this.isLifetimeConfigured.set(true);
+  }
+
+  closeLifetime(): void {
+    this.isTimePickerOpen.set(false);
+    this.showLifetime.set(false);
   }
 
   openPrivacyPolicy(): void {
@@ -364,10 +444,13 @@ export class TxnComponent {
     if (!preParams) return this.addError()('no_transactions_params_found');
     if (!preParams.appKey) return this.addError()('no_app_key_found');
     if (!preParams.to) return this.addError()('no_contract_address_found');
+    this.client.state.$ui.setKey('acceptTxnError', null);
     this.client.state.$ui.setKey('isAcceptingTxn', true);
     this.client.txns.accept({
       lifetime: this.lifetimeSign(),
       userParams: this.userParamValues(),
+      grantedParams: this.grantedParams(),
+      revokedParams: this.revokedParams(),
     });
     // Auto-close after 4s if txns are cleared (matches original behaviour).
     this.autoCloseTimeout = setTimeout(() => {

package/src/lib/components/txns/txns-overview.component.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/angular';
+import { render, screen, fireEvent, waitFor } from '@testing-library/angular';
 import { map } from 'nanostores';
 import { setExtensionInstalled, resetExtension } from '@block-auth.io/core';
 import { TxnsOverviewComponent } from './txns-overview.component';
@@ -19,12 +19,23 @@ vi.mock('@wagmi/connectors', () => ({
 describe('TxnsOverview', () => {
   function makeClient(ws: Record<string, any> = {}, ui: Record<string, any> = {}) {
     return {
-      txns: { reject: vi.fn(), accept: vi.fn(), report: vi.fn() },
+      txns: {
+        reject: vi.fn(),
+        accept: vi.fn(),
+        report: vi.fn(),
+        dataRequest: vi.fn().mockResolvedValue(null),
+      },
       closeModal: vi.fn(),
       state: { $ui: map({ ...ui }), $ws: map({ requests: [], ...ws }) },
     } as any;
   }
 
+  const acceptButton = () => document.getElementById('btn-txn-accept') as HTMLButtonElement;
+  const visibleArrows = () =>
+    Array.from(document.querySelectorAll('[aria-hidden="true"]')).filter(
+      (el) => el.querySelector('.bal-ba-arrow') && !el.className.includes('bas-invisible'),
+    );
+
   it('renderiza la vista general de txns (estado vacio sin crashear)', async () => {
     await render(TxnsOverviewComponent, {
       providers: [provideBlockAuthClientForTest(makeClient({}, { isSigning: false }))],
@@ -102,10 +113,267 @@ describe('TxnsOverview', () => {
       ],
     });
     await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+    await waitFor(() => expect(acceptButton().disabled).toBe(false));
     await fireEvent.click(screen.getByText('ACCEPT'));
     expect(screen.getByText('No application key found')).toBeDefined();
   });
 
+  describe('con datos solicitados', () => {
+    const pending = {
+      requests: [{ id: 7, pre_params: JSON.stringify({ appName: 'Shop', appKey: 'app', to: '0xabc' }) }],
+    };
+    const solicitedTitle = () => screen.getByText('Solicited data');
+    const solicitedButton = () => solicitedTitle().closest('button') as HTMLButtonElement;
+
+    it('pide los datos de la txn y exige ceder, rellenar y guardar los obligatorios', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockResolvedValue({
+        txnId: 7,
+        params: [
+          { slug: 'users-firstname', mode: 'required', status: 'shared', value: 'Ana' },
+          { slug: 'users-email', mode: 'required', status: 'consent', value: 'ana@block-auth.io' },
+          { slug: 'users-phone', mode: 'required', status: 'missing', value: null },
+        ],
+      });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      expect(client.txns.dataRequest).toHaveBeenCalledWith(7);
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(solicitedButton().disabled).toBe(false));
+      expect(acceptButton().disabled).toBe(true);
+      expect(visibleArrows()).toHaveLength(2);
+
+      await fireEvent.click(solicitedTitle());
+      expect(screen.getByText('First Name')).toBeDefined();
+      await fireEvent.click(screen.getByLabelText('Share Email'));
+      expect(acceptButton().disabled).toBe(true);
+      await fireEvent.input(document.querySelector('input[type="tel"]')!, {
+        target: { value: ' +34 600 000 000 ' },
+      });
+      expect(document.getElementById('solicited-data-share-users-phone')?.getAttribute('aria-checked')).toBe('true');
+      expect(acceptButton().disabled).toBe(true);
+      await fireEvent.click(screen.getByText('Save'));
+      expect(acceptButton().disabled).toBe(false);
+      expect(visibleArrows()).toHaveLength(0);
+
+      await fireEvent.click(acceptButton());
+      expect(client.txns.accept).toHaveBeenCalledWith({
+        lifetime: 3600,
+        userParams: { 'users-phone': '+34600000000' },
+        grantedParams: ['users-email'],
+        revokedParams: [],
+      });
+    });
+
+    it('cierra el modal de datos solicitados con el botón de cerrar', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockResolvedValue({
+        txnId: 7,
+        params: [{ slug: 'users-email', mode: 'required', status: 'granted', value: 'ana@block-auth.io' }],
+      });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+      await fireEvent.click(solicitedTitle());
+      expect(screen.getByText('Email')).toBeDefined();
+      await fireEvent.click(screen.getByRole('button', { name: 'Close' }));
+      expect(screen.queryByText('Email')).toBeNull();
+    });
+
+    it('Aceptar del popup de datos lo cierra conservando los cambios sin aceptar el login', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockResolvedValue({
+        txnId: 7,
+        params: [{ slug: 'users-email', mode: 'optional', status: 'missing', value: null }],
+      });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await waitFor(() => expect(solicitedButton().disabled).toBe(false));
+      await fireEvent.click(solicitedTitle());
+      const slot = document.querySelector('.bal-ba-glass-modal-slot')!;
+      expect(slot.classList.contains('bas-inset-y-6')).toBe(true);
+      await fireEvent.input(document.querySelector('input[type="email"]')!, {
+        target: { value: 'ana@block-auth.io' },
+      });
+      await fireEvent.click(document.getElementById('solicited-data-accept')!);
+      expect(document.querySelector('.bal-ba-glass-modal')).toBeNull();
+      expect(client.txns.accept).not.toHaveBeenCalled();
+      await fireEvent.click(solicitedTitle());
+      expect((document.querySelector('input[type="email"]') as HTMLInputElement).value).toBe(
+        'ana@block-auth.io',
+      );
+    });
+
+    it('retira un dato opcional cedido al desmarcar Ceder', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockResolvedValue({
+        txnId: 7,
+        params: [
+          { slug: 'users-email', mode: 'required', status: 'granted', value: 'ana@block-auth.io' },
+          { slug: 'users-phone', mode: 'optional', status: 'granted', value: '+34 600 000 000' },
+        ],
+      });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+      expect(visibleArrows()).toHaveLength(0);
+      await fireEvent.click(solicitedTitle());
+      await fireEvent.click(screen.getByLabelText('Share Phone'));
+      await fireEvent.click(acceptButton());
+      expect(client.txns.accept).toHaveBeenCalledWith({
+        lifetime: 3600,
+        userParams: {},
+        grantedParams: ['users-email'],
+        revokedParams: ['users-phone'],
+      });
+    });
+
+    it('bloquea ACEPTAR y muestra las flechas si se cambia un dato sin decidir', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockResolvedValue({
+        txnId: 7,
+        params: [{ slug: 'users-email', mode: 'required', status: 'granted', value: 'ana@block-auth.io' }],
+      });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+      await fireEvent.click(solicitedTitle());
+      const emailInput = document.querySelector('input[type="email"]') as HTMLInputElement;
+      await fireEvent.input(emailInput, { target: { value: 'otra@block-auth.io' } });
+      expect(acceptButton().disabled).toBe(true);
+      expect(visibleArrows()).toHaveLength(2);
+      await fireEvent.click(screen.getByText('Undo'));
+      expect(acceptButton().disabled).toBe(false);
+      expect(emailInput.value).toBe('ana@block-auth.io');
+    });
+
+    it('al guardar vacío un dato cedido deja de cederlo sin enviarlo', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockResolvedValue({
+        txnId: 7,
+        params: [
+          { slug: 'users-email', mode: 'required', status: 'granted', value: 'ana@block-auth.io' },
+          { slug: 'users-phone', mode: 'optional', status: 'granted', value: '+34 600 000 000' },
+        ],
+      });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+      await fireEvent.click(solicitedTitle());
+      expect(
+        document
+          .querySelector('.bal-ba-glass-modal')
+          ?.parentElement?.classList.contains('bal-ba-glass-modal-slot'),
+      ).toBe(true);
+      await fireEvent.click(screen.getByLabelText('Clear field Phone'));
+      const phoneSwitch = document.getElementById('solicited-data-share-users-phone') as HTMLButtonElement;
+      expect(phoneSwitch.disabled).toBe(true);
+      expect(phoneSwitch.getAttribute('aria-checked')).toBe('false');
+      await fireEvent.click(screen.getByText('Save'));
+      expect(screen.getByText('This data will not be shared')).toBeDefined();
+      expect(acceptButton().disabled).toBe(false);
+      await fireEvent.click(acceptButton());
+      expect(client.txns.accept).toHaveBeenCalledWith({
+        lifetime: 3600,
+        userParams: {},
+        grantedParams: ['users-email'],
+        revokedParams: ['users-phone'],
+      });
+    });
+
+    it('un obligatorio guardado vacío queda pendiente y bloquea ACEPTAR', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockResolvedValue({
+        txnId: 7,
+        params: [{ slug: 'users-email', mode: 'required', status: 'granted', value: 'ana@block-auth.io' }],
+      });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+      await fireEvent.click(solicitedTitle());
+      await fireEvent.click(screen.getByLabelText('Clear field Email'));
+      await fireEvent.click(screen.getByText('Save'));
+      expect(acceptButton().disabled).toBe(true);
+      expect(
+        document
+          .getElementById('solicited-data-users-email')
+          ?.closest('.bal-ba-glass-field')
+          ?.classList.contains('bal-ba-glass-field-pending'),
+      ).toBe(true);
+      await fireEvent.input(document.querySelector('input[type="email"]')!, {
+        target: { value: 'otra@block-auth.io' },
+      });
+      expect(document.getElementById('solicited-data-share-users-email')?.getAttribute('aria-checked')).toBe('true');
+      await fireEvent.click(screen.getByText('Save'));
+      expect(acceptButton().disabled).toBe(false);
+    });
+
+    it('deja "Datos solicitados" desactivado cuando no hay nada que mostrar', async () => {
+      const client = makeClient(pending, {
+        uiConfig: { config: { params: { 'users-email': { mode: 'required' } } } },
+      });
+      client.txns.dataRequest.mockResolvedValue({ txnId: 7, params: [] });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+      expect(solicitedButton().disabled).toBe(true);
+    });
+
+    it('no bloquea ACEPTAR mientras espera los datos si la app no pide ninguno', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockReturnValue(new Promise(() => undefined));
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+    });
+
+    it('sin respuesta del servidor mantiene el cálculo con uiConfig', async () => {
+      const client = makeClient(pending, {
+        uiConfig: { config: { params: { 'users-email': { mode: 'required' } } } },
+      });
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(solicitedButton().disabled).toBe(false));
+      expect(acceptButton().disabled).toBe(true);
+      await fireEvent.click(solicitedTitle());
+      await fireEvent.input(document.querySelector('input[type="email"]')!, {
+        target: { value: 'ana@block-auth.io' },
+      });
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+      await fireEvent.click(acceptButton());
+      expect(client.txns.accept).toHaveBeenCalledWith({
+        lifetime: 3600,
+        userParams: { 'users-email': 'ana@block-auth.io' },
+        grantedParams: [],
+        revokedParams: [],
+      });
+    });
+
+    it('si el servidor falla mantiene el cálculo con uiConfig', async () => {
+      const client = makeClient(pending, {
+        uiConfig: { config: { params: { 'users-email': { mode: 'optional' } } } },
+      });
+      client.txns.dataRequest.mockRejectedValue(new Error('boom'));
+      await render(TxnsOverviewComponent, { providers: [provideBlockAuthClientForTest(client)] });
+      await fireEvent.click(screen.getByTestId('txn-pptc-toggle'));
+      await waitFor(() => expect(acceptButton().disabled).toBe(false));
+      expect(solicitedButton().disabled).toBe(false);
+    });
+
+    it('muestra el error del servidor en los datos solicitados y permite corregir', async () => {
+      const client = makeClient(pending);
+      client.txns.dataRequest.mockResolvedValue({ txnId: 7, params: [] });
+      const { fixture } = await render(TxnsOverviewComponent, {
+        providers: [provideBlockAuthClientForTest(client)],
+      });
+      await waitFor(() => expect(client.txns.dataRequest).toHaveBeenCalledTimes(1));
+      client.state.$ui.setKey('acceptTxnError', 'Required data not authorized');
+      fixture.detectChanges();
+      await waitFor(() =>
+        expect(screen.getByRole('alert').textContent).toContain('required data is missing or invalid'),
+      );
+      await waitFor(() => expect(client.txns.dataRequest).toHaveBeenCalledTimes(2));
+    });
+  });
+
   describe('con la verificación OTP caducada', () => {
     const pending = { requests: [{ id: 7, pre_params: JSON.stringify({ appName: 'Shop' }) }] };
     afterEach(() => resetExtension());