@retalia/pos-components 0.0.3 → 0.0.4

package/src/lib/receipt/pos-receipt.ts

@@ -0,0 +1,129 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  output,
+} from '@angular/core';
+
+export interface PosReceiptIntent {
+  readonly type: 'receipt.newSale';
+}
+
+/** Display-only VAT from the host envelope — not calculated here. */
+export interface PosReceiptVat {
+  readonly rate: number;
+  readonly amount: number;
+  readonly included: boolean;
+}
+
+/** Display-only receipt line from the host envelope — not an API DTO. */
+export interface PosReceiptLine {
+  readonly lineId: number;
+  readonly sku: string;
+  readonly name: string;
+  readonly qty: number;
+  readonly unitPrice: number;
+  readonly lineTotal: number;
+  readonly vat: PosReceiptVat;
+  readonly struckThrough: boolean;
+}
+
+/** Display-only totals from the host envelope — not calculated here. */
+export interface PosReceiptTotals {
+  readonly gross: number;
+  readonly net: number;
+  readonly vat: number;
+  readonly discount: number;
+  readonly due: number;
+  readonly currency: string;
+}
+
+/** Display-only tender from the host envelope — not calculated here. */
+export interface PosReceiptPayment {
+  readonly tender: string;
+  readonly amount: number;
+  readonly tendered: number;
+  readonly change: number;
+  readonly state: string;
+}
+
+/** Display-only document metadata from the host envelope. */
+export interface PosReceiptDocument {
+  readonly number: string;
+  readonly receiptReady: boolean;
+}
+
+const EMPTY_TOTALS: PosReceiptTotals = {
+  gross: 0,
+  net: 0,
+  vat: 0,
+  discount: 0,
+  due: 0,
+  currency: 'EUR',
+};
+
+const EMPTY_DOCUMENT: PosReceiptDocument = {
+  number: '',
+  receiptReady: false,
+};
+
+@Component({
+  selector: 'pos-receipt',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './pos-receipt.html',
+  styleUrl: './pos-receipt.scss',
+  host: {
+    class: 'pos-receipt',
+  },
+})
+export class PosReceipt {
+  readonly lines = input<readonly PosReceiptLine[]>([]);
+  readonly totals = input<PosReceiptTotals>(EMPTY_TOTALS);
+  readonly payments = input<readonly PosReceiptPayment[]>([]);
+  readonly document = input<PosReceiptDocument>(EMPTY_DOCUMENT);
+  readonly disabled = input(false);
+
+  readonly title = input('Receipt');
+  readonly emptyMessage = input('No receipt lines');
+  readonly preparingLabel = input('Preparing receipt…');
+  readonly readyLabel = input('Receipt ready');
+  readonly newSaleLabel = input('New sale');
+  readonly tenderLabel = input('Tender');
+  readonly amountLabel = input('Amount');
+  readonly tenderedLabel = input('Tendered');
+  readonly changeLabel = input('Change');
+
+  readonly action = output<PosReceiptIntent>();
+
+  protected readonly hasLines = computed(() => this.lines().length > 0);
+  protected readonly hasPayments = computed(() => this.payments().length > 0);
+  protected readonly hasDocumentNumber = computed(
+    () => this.document().number.trim().length > 0,
+  );
+
+  protected readonly statusText = computed(() =>
+    this.document().receiptReady
+      ? this.readyLabel()
+      : this.preparingLabel(),
+  );
+
+  protected readonly canStartNewSale = computed(() => !this.disabled());
+
+  protected formatMoney(amount: number): string {
+    return new Intl.NumberFormat(undefined, {
+      style: 'currency',
+      currency: this.totals().currency || 'EUR',
+      minimumFractionDigits: 2,
+      maximumFractionDigits: 2,
+    }).format(amount);
+  }
+
+  protected onNewSale(): void {
+    if (!this.canStartNewSale()) {
+      return;
+    }
+
+    this.action.emit({ type: 'receipt.newSale' });
+  }
+}

package/src/lib/tender/pos-tender.html

@@ -0,0 +1,79 @@
+<section
+  class="pos-tender__panel"
+  [attr.aria-busy]="disabled() ? true : null"
+>
+  <header class="pos-tender__header">
+    <p class="pos-tender__kicker">Adaptive POS</p>
+    <h2 class="pos-tender__title">{{ title() }}</h2>
+  </header>
+
+  <div class="pos-tender__status" aria-live="polite">
+    @if (statusText()) {
+      <p>{{ statusText() }}</p>
+    }
+    @if (errorMessage()) {
+      <p class="pos-tender__error">{{ errorMessage() }}</p>
+    }
+  </div>
+
+  <div class="pos-tender__summary">
+    <dl class="pos-tender__due">
+      <div class="pos-tender__row">
+        <dt>{{ amountDueLabel() }}</dt>
+        <dd>{{ formatMoney(amountDue()) }}</dd>
+      </div>
+    </dl>
+
+    @if (hasChangeDue()) {
+      <div class="pos-tender__change" role="status" aria-live="polite">
+        <p class="pos-tender__change-label">{{ changeDueLabel() }}</p>
+        <p class="pos-tender__change-value">
+          {{ formatMoney(changeDue() ?? 0) }}
+        </p>
+      </div>
+    }
+  </div>
+
+  <div
+    class="pos-tender__display"
+    role="group"
+    [attr.aria-label]="tenderedLabel()"
+  >
+    <p class="pos-tender__display-label">{{ tenderedLabel() }}</p>
+    <p class="pos-tender__display-value" aria-live="polite">
+      <span class="pos-tender__currency">{{ currency() }}</span>
+      <span class="pos-tender__digits">{{ displayTendered() }}</span>
+    </p>
+  </div>
+
+  <div class="pos-tender__keypad" role="group" aria-label="Cash amount keypad">
+    @for (row of keypadRows; track $index) {
+      <div class="pos-tender__keypad-row">
+        @for (key of row; track key) {
+          <button
+            type="button"
+            class="pos-tender__key"
+            [class.pos-tender__key--action]="key === '←' || key === '.'"
+            [disabled]="disabled()"
+            [attr.aria-label]="key === '←' ? 'Backspace' : key === '.' ? 'Decimal point' : key"
+            (click)="onKeypad(key)"
+          >
+            {{ key }}
+          </button>
+        }
+      </div>
+    }
+  </div>
+
+  <div class="pos-tender__actions">
+    <button
+      type="button"
+      class="pos-tender__primary"
+      [class.pos-tender__primary--disabled]="!canTender()"
+      [disabled]="!canTender()"
+      (click)="onTender()"
+    >
+      {{ tenderLabel() }}
+    </button>
+  </div>
+</section>

package/src/lib/tender/pos-tender.scss

@@ -0,0 +1,318 @@
+:host {
+  display: block;
+  width: 100%;
+  max-width: 42rem;
+  color: var(--pos-color-text);
+  font-family: var(--pos-font-family);
+  font-size: var(--pos-font-size-md);
+}
+
+.pos-tender__panel {
+  display: grid;
+  grid-template-areas:
+    'header'
+    'status'
+    'summary'
+    'display'
+    'keypad'
+    'actions';
+  gap: var(--pos-space-md);
+  padding: var(--pos-space-xl);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-lg);
+  background:
+    radial-gradient(120% 80% at 100% 0%, rgb(0 194 178 / 0.08), transparent 55%),
+    var(--pos-color-panel);
+}
+
+.pos-tender__header {
+  grid-area: header;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+}
+
+.pos-tender__kicker {
+  margin: 0;
+  color: var(--pos-color-primary);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-bold);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+.pos-tender__title {
+  margin: 0;
+  font-family: var(--pos-font-family-display);
+  font-size: var(--pos-font-size-xl);
+  font-weight: var(--pos-font-weight-bold);
+  letter-spacing: -0.03em;
+  line-height: 1.15;
+}
+
+.pos-tender__status {
+  grid-area: status;
+  min-height: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+}
+
+.pos-tender__status p {
+  margin: 0;
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-tender__error {
+  padding: var(--pos-space-sm) var(--pos-space-md);
+  border-left: 3px solid var(--pos-color-danger);
+  background: rgb(214 69 69 / 0.08);
+  color: var(--pos-color-danger);
+}
+
+.pos-tender__summary {
+  grid-area: summary;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-md);
+}
+
+.pos-tender__due {
+  margin: 0;
+}
+
+.pos-tender__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: var(--pos-space-md);
+  margin: 0;
+  padding: var(--pos-space-md) var(--pos-space-lg);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-panel-elevated);
+}
+
+.pos-tender__row dt,
+.pos-tender__row dd {
+  margin: 0;
+}
+
+.pos-tender__row dt {
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-tender__row dd {
+  font-family: var(--pos-font-family-display);
+  font-size: var(--pos-font-size-lg);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-tender__display {
+  grid-area: display;
+  padding: var(--pos-space-lg) var(--pos-space-xl);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-lg);
+  background: var(--pos-color-display);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06);
+}
+
+.pos-tender__display-label {
+  margin: 0 0 var(--pos-space-sm);
+  color: rgb(232 237 242 / 0.7);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.pos-tender__display-value {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--pos-space-md);
+  margin: 0;
+  color: var(--pos-color-on-display);
+  font-family: var(--pos-font-family-display);
+}
+
+.pos-tender__currency {
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-bold);
+  letter-spacing: 0.12em;
+}
+
+.pos-tender__digits {
+  font-size: clamp(1.5rem, 4vw, 2rem);
+  font-weight: var(--pos-font-weight-semibold);
+  letter-spacing: 0.04em;
+  font-variant-numeric: tabular-nums;
+}
+
+.pos-tender__keypad {
+  grid-area: keypad;
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-md);
+}
+
+.pos-tender__keypad-row {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: var(--pos-space-md);
+}
+
+.pos-tender__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--pos-keypad-size);
+  border: 1px solid var(--pos-color-key-border);
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-key);
+  color: var(--pos-color-text);
+  font-family: inherit;
+  font-size: 1.15rem;
+  font-weight: var(--pos-font-weight-bold);
+  cursor: pointer;
+  transition:
+    background 120ms ease,
+    color 120ms ease,
+    border-color 120ms ease,
+    transform 120ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pos-tender__key--action {
+  color: var(--pos-color-text-muted);
+  background: var(--pos-color-surface-muted);
+}
+
+.pos-tender__key:not(:disabled):active {
+  background: var(--pos-color-key-active);
+  border-color: var(--pos-color-key-active);
+  color: var(--pos-color-on-key-active);
+  transform: translateY(1px);
+}
+
+.pos-tender__key:disabled,
+.pos-tender__primary:disabled {
+  cursor: not-allowed;
+}
+
+.pos-tender__key:disabled {
+  opacity: 0.55;
+}
+
+.pos-tender__key:focus-visible,
+.pos-tender__primary:focus-visible {
+  outline: 2px solid var(--pos-color-primary);
+  outline-offset: 2px;
+}
+
+.pos-tender__change {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-xs);
+  padding: var(--pos-space-md) var(--pos-space-lg);
+  border: 1px solid var(--pos-color-success);
+  border-radius: var(--pos-radius-md);
+  background: color-mix(in srgb, var(--pos-color-success) 14%, var(--pos-color-panel-elevated));
+}
+
+.pos-tender__change-label {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-tender__change-value {
+  margin: 0;
+  color: var(--pos-color-text);
+  font-family: var(--pos-font-family-display);
+  font-size: var(--pos-font-size-xl);
+  font-weight: var(--pos-font-weight-bold);
+  font-variant-numeric: tabular-nums;
+}
+
+.pos-tender__actions {
+  grid-area: actions;
+  display: flex;
+  margin-top: 0;
+}
+
+.pos-tender__primary {
+  flex: 1 1 auto;
+  min-height: var(--pos-button-min-height);
+  border: 0;
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-primary);
+  color: var(--pos-color-on-primary);
+  font: inherit;
+  font-size: 1.05rem;
+  font-weight: var(--pos-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  transition:
+    filter 120ms ease,
+    transform 120ms ease;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pos-tender__primary:not(:disabled):hover {
+  filter: brightness(0.97);
+}
+
+.pos-tender__primary:not(:disabled):active {
+  transform: translateY(1px);
+}
+
+.pos-tender__primary--disabled,
+.pos-tender__primary:disabled {
+  background: var(--pos-color-disabled);
+  color: var(--pos-color-on-disabled);
+  filter: none;
+  transform: none;
+}
+
+@media (min-width: 768px) {
+  .pos-tender__panel {
+    grid-template-columns: minmax(0, 1fr) minmax(16rem, 1.1fr);
+    grid-template-areas:
+      'header header'
+      'status status'
+      'summary keypad'
+      'display keypad'
+      'actions keypad';
+    gap: var(--pos-space-lg);
+    padding: var(--pos-space-2xl);
+    align-items: start;
+  }
+
+  .pos-tender__key {
+    min-height: var(--pos-keypad-size-md);
+  }
+
+  .pos-tender__keypad {
+    align-self: start;
+  }
+}
+
+@media (min-width: 1100px) {
+  .pos-tender__key {
+    min-height: var(--pos-keypad-size-lg);
+    font-size: 1.25rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pos-tender__key,
+  .pos-tender__primary {
+    transition: none;
+  }
+}

package/src/lib/tender/pos-tender.spec.ts

@@ -0,0 +1,150 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PosTender, PosTenderIntent } from './pos-tender';
+
+function clickKey(fixture: ComponentFixture<PosTender>, key: string): void {
+  const keys = Array.from(
+    (fixture.nativeElement as HTMLElement).querySelectorAll('.pos-tender__key'),
+  ) as HTMLButtonElement[];
+  keys.find((button) => button.textContent?.trim() === key)?.click();
+}
+
+function enterAmount(
+  fixture: ComponentFixture<PosTender>,
+  keys: readonly string[],
+): void {
+  for (const key of keys) {
+    clickKey(fixture, key);
+  }
+}
+
+describe('PosTender', () => {
+  let fixture: ComponentFixture<PosTender>;
+  let component: PosTender;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PosTender],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PosTender);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should render the cash tender title and amount due as received', async () => {
+    fixture.componentRef.setInput('amountDue', 12);
+    fixture.componentRef.setInput('currency', 'EUR');
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.pos-tender__title')?.textContent).toContain(
+      'Cash tender',
+    );
+    expect(compiled.querySelector('.pos-tender__due')?.textContent).toContain(
+      '12',
+    );
+    expect(compiled.querySelector('.pos-tender__change')).toBeNull();
+  });
+
+  it('should emit tender.cash with the entered amount and not calculate change', async () => {
+    const intents: PosTenderIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('amountDue', 12);
+    await fixture.whenStable();
+
+    enterAmount(fixture, ['2', '0']);
+    await fixture.whenStable();
+
+    const tender = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-tender__primary',
+    ) as HTMLButtonElement;
+    tender.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([{ type: 'tender.cash', amount: 20 }]);
+    expect(
+      (fixture.nativeElement as HTMLElement).querySelector('.pos-tender__change'),
+    ).toBeNull();
+  });
+
+  it('should display change due from the envelope without calculating it', async () => {
+    fixture.componentRef.setInput('amountDue', 12);
+    fixture.componentRef.setInput('changeDue', 99);
+    fixture.componentRef.setInput('currency', 'EUR');
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const change = compiled.querySelector('.pos-tender__change-value');
+    expect(change?.textContent).toContain('99');
+    expect(change?.textContent).not.toContain('8');
+  });
+
+  it('should display a zero change due from the envelope', async () => {
+    fixture.componentRef.setInput('changeDue', 0);
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.pos-tender__change')).toBeTruthy();
+    expect(
+      compiled.querySelector('.pos-tender__change-value')?.textContent,
+    ).toContain('0');
+  });
+
+  it('should not emit while disabled', async () => {
+    const intents: PosTenderIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('disabled', true);
+    await fixture.whenStable();
+
+    enterAmount(fixture, ['1', '0']);
+    const tender = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-tender__primary',
+    ) as HTMLButtonElement;
+    tender.click();
+    await fixture.whenStable();
+
+    expect(tender.disabled).toBe(true);
+    expect(intents).toEqual([]);
+    expect(
+      (fixture.nativeElement as HTMLElement).querySelector('.pos-tender__status')
+        ?.textContent,
+    ).toContain('Processing tender');
+  });
+
+  it('should not emit when no cash amount has been entered', async () => {
+    const intents: PosTenderIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    const tender = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-tender__primary',
+    ) as HTMLButtonElement;
+    tender.click();
+    await fixture.whenStable();
+
+    expect(tender.disabled).toBe(true);
+    expect(intents).toEqual([]);
+  });
+
+  it('should accept decimal cash amounts from the keypad', async () => {
+    const intents: PosTenderIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    enterAmount(fixture, ['1', '2', '.', '5']);
+    await fixture.whenStable();
+
+    const tender = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-tender__primary',
+    ) as HTMLButtonElement;
+    tender.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([{ type: 'tender.cash', amount: 12.5 }]);
+    expect(
+      (fixture.nativeElement as HTMLElement).querySelector('.pos-tender__digits')
+        ?.textContent,
+    ).toContain('12.5');
+  });
+});