@block-auth.io/angular 0.2.10 → 0.3.0

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

@@ -1,14 +1,31 @@
 import {
   ChangeDetectionStrategy,
   Component,
+  DestroyRef,
+  ElementRef,
+  afterNextRender,
   computed,
   effect,
+  inject,
   input,
   output,
   signal,
+  viewChild,
 } from '@angular/core';
-import { $locale, t as translate, type TextKey } from '@block-auth.io/core';
+import { $locale, t as translate, type TextKey, type TxnDataParam } from '@block-auth.io/core';
 import { injectStore } from '../../../inject-store';
+import { PhoneInputComponent } from './phone-input.component';
+import {
+  PARAM_ERROR_KEYS,
+  PARAM_INPUT_TYPE,
+  PARAM_LABEL_KEYS,
+  getSolicitedFields,
+  getSolicitedHintKey,
+  getSolicitedParams,
+  isSolicitedDataComplete,
+  isSolicitedHintSuccess,
+  type SolicitedField,
+} from '@block-auth.io/core';
 
 // `handleParamChange`/`onValidationChange` (callback props en react) -> outputs
 // `paramChange`/`validationChange`: notificaciones puras de "algo cambió en la
@@ -24,116 +41,239 @@ export interface ParamChange {
   value: string;
 }
 
-const PARAM_LABEL_KEYS: Record<string, TextKey> = {
-  'users-firstname': 'firstName',
-  'users-lastname': 'lastName',
-  'users-secondlastname': 'secondLastName',
-  '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_KEYS: Record<string, TextKey> = {
-  'users-firstname': 'onlyLettersAllowed',
-  'users-lastname': 'onlyLettersAllowed',
-  'users-secondlastname': 'onlyLettersAllowed',
-  'users-email': 'enterValidEmail',
-  'users-phone': 'enterValidPhone',
-};
+export interface ShareChange {
+  slug: string;
+  shared: boolean;
+}
+
+interface SolicitedFieldView extends SolicitedField {
+  isRequired: boolean;
+  isPending: boolean;
+  label: string;
+  inputId: string;
+  inputType: string;
+  error: string | null;
+  hint: string | null;
+  isHintSuccess: boolean;
+  showDecision: boolean;
+  describedBy: string | null;
+  isPhone: boolean;
+}
 
 @Component({
   selector: 'ba-solicited-data-modal',
   standalone: true,
+  imports: [PhoneInputComponent],
   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)]"
+      class="bal-ba-glass-panel bal-ba-glass-pop bal-ba-glass-modal bas-box-border bas-w-[334px] bas-gap-4 bas-p-4"
     >
-      @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)
-                ? requiredLabelTxtResolved()
-                : optionalLabelTxtResolved()
-            }}
-          </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)) {
+      @if (closable()) {
+      <div class="bal-ba-glass-modal-head">
+        <button
+          type="button"
+          id="solicited-data-close"
+          [attr.aria-label]="t('close')"
+          class="bal-ba-glass-close"
+          (click)="closed.emit()"
+        >
           <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"
+            viewBox="0 0 10 10"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
             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"
-            />
+            <path d="M2 2l6 6M8 2 2 8" />
           </svg>
+        </button>
+      </div>
+      }
+      <div
+        #scroll
+        [class]="'bal-ba-glass-scroll' + (isScrollable() ? ' bal-ba-glass-scroll-overflow' : '')"
+      >
+        <div class="bal-ba-glass-stagger bas-flex bas-flex-col bas-gap-3">
+          @for (field of fields(); track field.slug) {
+          <div
+            [class]="'bal-ba-glass-field' + (field.isPending ? ' bal-ba-glass-field-pending' : '')"
+          >
+            <div class="bal-ba-glass-field-head">
+              <label [for]="field.inputId" class="bal-ba-glass-label">
+                <span>{{ field.label }}</span>
+                @if (field.isRequired) {
+                <span class="bal-ba-glass-label-required">{{ requiredLabelTxtResolved() }}</span>
+                } @else {
+                <span class="bal-ba-glass-label-optional">{{ optionalLabelTxtResolved() }}</span>
+                }
+              </label>
+              @if (withConsent()) {
+              <button
+                type="button"
+                role="switch"
+                [id]="'solicited-data-share-' + field.slug"
+                [attr.aria-checked]="field.isShared ? 'true' : 'false'"
+                [disabled]="field.isEmpty"
+                [attr.aria-label]="t('shareData') + ' ' + field.label"
+                class="bal-ba-glass-switch"
+                (click)="onShare(field)"
+              >
+                <span aria-hidden="true">{{ t('shareData') }}</span>
+                <span class="bal-ba-glass-switch-track" aria-hidden="true">
+                  <span class="bal-ba-glass-switch-thumb"></span>
+                </span>
+              </button>
+              }
+            </div>
+            @if (field.isPhone) {
+            <ba-phone-input
+              #phoneInput
+              [inputId]="field.inputId"
+              [value]="field.inputValue"
+              [invalid]="!!field.error"
+              [describedBy]="field.describedBy"
+              (valueChange)="paramChange.emit({ slug: field.slug, value: $event })"
+              (blurred)="onBlur(field.slug)"
+            >
+              @if (field.inputValue) {
+              <button
+                type="button"
+                [attr.aria-label]="t('clearField') + ' ' + field.label"
+                class="bal-ba-glass-input-clear"
+                (click)="onClear(field.slug, phoneInput)"
+              >
+                <svg
+                  viewBox="0 0 10 10"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  aria-hidden="true"
+                >
+                  <path d="M2 2l6 6M8 2 2 8" />
+                </svg>
+              </button>
+              }
+            </ba-phone-input>
+            } @else {
+            <div class="bal-ba-glass-input-wrap">
+              <input
+                #fieldInput
+                [id]="field.inputId"
+                [type]="field.inputType"
+                [value]="field.inputValue"
+                [attr.aria-invalid]="field.error ? 'true' : 'false'"
+                [attr.aria-describedby]="field.describedBy"
+                class="bal-ba-glass-input"
+                (input)="onInput(field.slug, $event)"
+                (blur)="onBlur(field.slug)"
+              />
+              @if (field.inputValue) {
+              <button
+                type="button"
+                [attr.aria-label]="t('clearField') + ' ' + field.label"
+                class="bal-ba-glass-input-clear"
+                (click)="onClear(field.slug, fieldInput)"
+              >
+                <svg
+                  viewBox="0 0 10 10"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.8"
+                  stroke-linecap="round"
+                  aria-hidden="true"
+                >
+                  <path d="M2 2l6 6M8 2 2 8" />
+                </svg>
+              </button>
+              }
+            </div>
+            }
+            @if (field.error) {
+            <p [id]="field.inputId + '-error'" class="bal-ba-glass-error">
+              {{ field.error }}
+            </p>
+            } @if (field.showDecision) {
+            <div class="bal-ba-glass-decision">
+              @if (field.hint) {
+              <p
+                [id]="field.inputId + '-hint'"
+                [class]="
+                  'bal-ba-glass-hint' +
+                  (field.isHintSuccess ? ' bal-ba-glass-hint-success' : '')
+                "
+              >
+                {{ field.hint }}
+              </p>
+              }
+              <div class="bal-ba-glass-decision-actions">
+                <button
+                  type="button"
+                  [id]="'solicited-data-undo-' + field.slug"
+                  class="bal-ba-glass-chip-btn"
+                  (click)="undoParam.emit(field.slug)"
+                >
+                  {{ t('undoChange') }}
+                </button>
+                @if (!field.isSaved) {
+                <button
+                  type="button"
+                  [id]="'solicited-data-save-' + field.slug"
+                  [disabled]="!field.isValid && !field.isEmpty"
+                  class="bal-ba-glass-chip-btn bal-ba-glass-chip-btn-primary"
+                  (click)="saveParam.emit(field.slug)"
+                >
+                  {{ t('saveData') }}
+                </button>
+                }
+              </div>
+            </div>
+            } @else { @if (field.hint) {
+            <p
+              [id]="field.inputId + '-hint'"
+              [class]="
+                'bal-ba-glass-hint' +
+                (field.isHintSuccess ? ' bal-ba-glass-hint-success' : '')
+              "
+            >
+              {{ field.hint }}
+            </p>
+            } }
+          </div>
           }
         </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">
-        {{ fillRequiredTxtResolved() }}
+      @if (!allRequiredFilled()) {
+      <p id="solicited-data-notice" class="bal-ba-glass-notice bal-ba-glass-rise">
+        <svg
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.5"
+          stroke-linecap="round"
+          aria-hidden="true"
+          class="bal-ba-glass-notice-icon"
+        >
+          <circle cx="8" cy="8" r="6.25" />
+          <path d="M8 7.25v3.5M8 5.1v.01" />
+        </svg>
+        <span>{{ fillRequiredTxtResolved() }}</span>
+      </p>
+      } @if (errorTxt()) {
+      <p role="alert" class="bal-ba-glass-notice bal-ba-glass-notice-error bal-ba-glass-rise">
+        {{ errorTxt() }}
       </p>
+      } @if (acceptable()) {
+      <button
+        type="button"
+        id="solicited-data-accept"
+        class="bal-ba-glass-action bal-ba-glass-action-primary"
+        (click)="accepted.emit()"
+      >
+        {{ acceptTxt() ?? t('acceptData') }}
+      </button>
       }
     </div>
   `,
@@ -141,76 +281,131 @@ const PARAM_ERROR_KEYS: Record<string, TextKey> = {
 export class SolicitedDataModalComponent {
   requiredParams = input<string[]>([]);
   optionalParams = input<string[]>([]);
+  params = input<TxnDataParam[] | null>();
   userParamValues = input<Record<string, string>>({});
+  sharedParams = input<Record<string, boolean>>({});
+  savedParams = input<Record<string, string>>({});
   requiredLabelTxt = input<string>();
   optionalLabelTxt = input<string>();
   fillRequiredTxt = input<string>();
+  errorTxt = input<string>();
+  closable = input(false);
+  acceptable = input(false);
+  acceptTxt = input<string>();
 
   paramChange = output<ParamChange>();
+  shareChange = output<ShareChange>();
+  saveParam = output<string>();
+  undoParam = output<string>();
   validationChange = output<boolean>();
+  closed = output<void>();
+  accepted = output<void>();
 
   private readonly locale = injectStore($locale);
   protected t = (key: TextKey): string => translate(key, this.locale());
 
   protected readonly requiredLabelTxtResolved = computed(
-    () => this.requiredLabelTxt() ?? this.t('required'),
+    () => this.requiredLabelTxt() ?? this.t('required')
   );
   protected readonly optionalLabelTxtResolved = computed(
-    () => this.optionalLabelTxt() ?? this.t('optional'),
+    () => this.optionalLabelTxt() ?? this.t('optional')
   );
+  protected readonly withConsent = computed(() => !!this.params());
   protected readonly fillRequiredTxtResolved = computed(
-    () => this.fillRequiredTxt() ?? this.t('fillRequiredFields'),
+    () =>
+      this.fillRequiredTxt() ??
+      this.t(this.withConsent() ? 'completeRequiredData' : 'fillRequiredFields')
   );
 
   private readonly touched = signal<Record<string, boolean>>({});
+  private readonly scroll = viewChild.required<ElementRef<HTMLDivElement>>('scroll');
+  protected readonly isScrollable = signal(false);
+
+  private readonly solicitedFields = computed(() =>
+    getSolicitedFields(
+      getSolicitedParams({
+        params: this.params(),
+        requiredParams: this.requiredParams(),
+        optionalParams: this.optionalParams(),
+      }),
+      {
+        values: this.userParamValues(),
+        shared: this.sharedParams(),
+        saved: this.savedParams(),
+      },
+      this.withConsent()
+    )
+  );
 
   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);
-    }),
+    isSolicitedDataComplete(this.solicitedFields())
   );
 
-  protected readonly visibleParams = computed(() =>
-    PARAM_DISPLAY_ORDER.filter(
-      (slug) =>
-        slug !== 'modules-kyc' &&
-        (this.requiredParams().includes(slug) ||
-          this.optionalParams().includes(slug)),
-    ),
+  protected readonly fields = computed<SolicitedFieldView[]>(() =>
+    this.solicitedFields().map((field) => {
+      const labelKey = PARAM_LABEL_KEYS[field.slug];
+      const label = labelKey ? this.t(labelKey) : field.slug;
+      const inputId = `solicited-data-${field.slug}`;
+      const errorKey = PARAM_ERROR_KEYS[field.slug];
+      const error =
+        this.touched()[field.slug] &&
+        field.inputValue.trim() &&
+        !field.isValid &&
+        errorKey
+          ? this.t(errorKey)
+          : null;
+      const showDecision = this.withConsent() && field.isChanged;
+      const hintKey = getSolicitedHintKey(field, this.withConsent());
+      const hint = hintKey ? this.t(hintKey) : null;
+      return {
+        ...field,
+        isRequired: field.mode === 'required',
+        isPending: field.mode === 'required' && !field.isComplete,
+        label,
+        inputId,
+        inputType: PARAM_INPUT_TYPE[field.slug] || 'text',
+        isPhone: PARAM_INPUT_TYPE[field.slug] === 'tel',
+        error,
+        hint,
+        isHintSuccess: isSolicitedHintSuccess(field),
+        showDecision,
+        describedBy: error ? `${inputId}-error` : hint ? `${inputId}-hint` : null,
+      };
+    })
   );
 
   constructor() {
     effect(() => {
       this.validationChange.emit(this.allRequiredFilled());
     });
-  }
 
-  isRequired = (slug: string): boolean => this.requiredParams().includes(slug);
-  label = (slug: string): string => {
-    const key = PARAM_LABEL_KEYS[slug];
-    return key ? this.t(key) : 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 this.t(PARAM_ERROR_KEYS[slug]);
-    return null;
+    const destroyRef = inject(DestroyRef);
+    afterNextRender(() => {
+      const el = this.scroll().nativeElement;
+      const update = () => this.isScrollable.set(el.scrollHeight > el.clientHeight + 1);
+      update();
+      if (typeof ResizeObserver === 'undefined') return;
+      const observer = new ResizeObserver(update);
+      observer.observe(el);
+      if (el.firstElementChild) observer.observe(el.firstElementChild);
+      destroyRef.onDestroy(() => observer.disconnect());
+    });
   }
 
-  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 }));
   }
 
+  onShare(field: SolicitedField): void {
+    if (field.isEmpty) return;
+    this.shareChange.emit({ slug: field.slug, shared: !field.isShared });
+  }
+
+  onClear(slug: string, inputEl: { focus: () => void }): void {
+    this.paramChange.emit({ slug, value: '' });
+    inputEl.focus();
+  }
+
   onInput(slug: string, event: Event): void {
     this.paramChange.emit({
       slug,

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

@@ -25,11 +25,11 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
         >
       }
       <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>
+        <span class="bal-ba-glass-divider bas-h-px bas-flex-1"></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>
+        <span class="bal-ba-glass-divider bal-ba-glass-divider-end bas-h-px bas-flex-1"></span>
       </div>
       @if (txnsLength() > 1) {
         <span