@retalia/pos-components 0.0.3 → 0.0.4

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

@@ -0,0 +1,367 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--pos-color-text);
+  font-family: var(--pos-font-family);
+  font-size: var(--pos-font-size-md);
+}
+
+.pos-receipt__panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  height: 100%;
+  padding: var(--pos-space-lg);
+  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-receipt__header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--pos-space-md);
+}
+
+.pos-receipt__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  min-width: 0;
+}
+
+.pos-receipt__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-receipt__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;
+}
+
+.pos-receipt__number {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-family: var(--pos-font-family-display);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+  overflow-wrap: anywhere;
+  text-align: right;
+}
+
+.pos-receipt__status {
+  margin: var(--pos-space-md) 0 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-receipt__lines {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  min-height: 8rem;
+  margin: var(--pos-space-md) 0 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.pos-receipt__empty {
+  margin: auto 0;
+  padding: var(--pos-space-2xl) var(--pos-space-md);
+  color: var(--pos-color-text-muted);
+  text-align: center;
+}
+
+.pos-receipt__line {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'info qty'
+    'prices prices';
+  align-items: center;
+  gap: var(--pos-space-xs) var(--pos-space-md);
+  padding: var(--pos-space-md);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-panel-elevated);
+}
+
+.pos-receipt__line-info {
+  grid-area: info;
+  min-width: 0;
+}
+
+.pos-receipt__line-name {
+  margin: 0;
+  font-size: var(--pos-font-size-md);
+  font-weight: var(--pos-font-weight-semibold);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pos-receipt__line-sku,
+.pos-receipt__line-voided {
+  margin: var(--pos-space-xs) 0 0;
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-receipt__line-sku {
+  color: var(--pos-color-text-muted);
+}
+
+.pos-receipt__line-voided {
+  color: var(--pos-color-danger);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-receipt__qty {
+  grid-area: qty;
+  margin: 0;
+  font-family: var(--pos-font-family-display);
+  font-weight: var(--pos-font-weight-bold);
+  font-variant-numeric: tabular-nums;
+  text-align: right;
+}
+
+.pos-receipt__line-prices {
+  grid-area: prices;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--pos-space-md);
+}
+
+.pos-receipt__unit-price {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-receipt__line-total {
+  margin: 0;
+  font-family: var(--pos-font-family-display);
+  font-weight: var(--pos-font-weight-bold);
+  font-variant-numeric: tabular-nums;
+}
+
+.pos-receipt__line--voided .pos-receipt__line-name,
+.pos-receipt__line--voided .pos-receipt__line-sku,
+.pos-receipt__line--voided .pos-receipt__line-prices,
+.pos-receipt__line--voided .pos-receipt__qty {
+  color: var(--pos-color-text-muted);
+  text-decoration: line-through;
+}
+
+.pos-receipt__summary {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-md);
+  margin-top: var(--pos-space-md);
+  padding-top: var(--pos-space-md);
+  border-top: 1px solid var(--pos-color-border);
+}
+
+.pos-receipt__totals,
+.pos-receipt__payment-amounts {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  margin: 0;
+}
+
+.pos-receipt__row {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--pos-space-md);
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-receipt__row dt,
+.pos-receipt__row dd {
+  margin: 0;
+}
+
+.pos-receipt__row dd {
+  font-variant-numeric: tabular-nums;
+}
+
+.pos-receipt__row--due,
+.pos-receipt__row--change {
+  padding-top: var(--pos-space-sm);
+  border-top: 1px solid var(--pos-color-border);
+  color: var(--pos-color-text);
+  font-family: var(--pos-font-family-display);
+  font-size: var(--pos-font-size-lg);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-receipt__tender {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+}
+
+.pos-receipt__tender-title {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.pos-receipt__payments {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.pos-receipt__payment {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  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-receipt__payment-header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--pos-space-md);
+}
+
+.pos-receipt__payment-tender {
+  margin: 0;
+  font-size: var(--pos-font-size-md);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-receipt__payment-state {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-receipt__actions {
+  margin-top: var(--pos-space-md);
+}
+
+.pos-receipt__new-sale {
+  width: 100%;
+  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-weight: var(--pos-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pos-receipt__new-sale:not(:disabled):active {
+  transform: translateY(1px);
+}
+
+.pos-receipt__new-sale:disabled {
+  background: var(--pos-color-disabled);
+  color: var(--pos-color-on-disabled);
+  cursor: not-allowed;
+  transform: none;
+}
+
+.pos-receipt__new-sale:focus-visible {
+  outline: 2px solid var(--pos-color-primary);
+  outline-offset: 2px;
+}
+
+@media (min-width: 768px) {
+  .pos-receipt__panel {
+    display: grid;
+    grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 1fr);
+    grid-template-areas:
+      'header header'
+      'status status'
+      'lines summary'
+      'actions actions';
+    gap: var(--pos-space-lg);
+    padding: var(--pos-space-xl);
+    align-items: start;
+  }
+
+  .pos-receipt__header {
+    grid-area: header;
+  }
+
+  .pos-receipt__status {
+    grid-area: status;
+    margin: 0;
+  }
+
+  .pos-receipt__lines {
+    grid-area: lines;
+    margin: 0;
+  }
+
+  .pos-receipt__line {
+    grid-template-columns: minmax(0, 1fr) auto auto;
+    grid-template-areas: 'info qty prices';
+    gap: var(--pos-space-md);
+  }
+
+  .pos-receipt__line-prices {
+    flex-direction: column;
+    align-items: flex-end;
+    justify-content: center;
+  }
+
+  .pos-receipt__summary {
+    grid-area: summary;
+    margin: 0;
+    padding: 0;
+    border-top: 0;
+  }
+
+  .pos-receipt__actions {
+    grid-area: actions;
+    margin: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pos-receipt__new-sale {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,188 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import {
+  PosReceipt,
+  PosReceiptIntent,
+  PosReceiptLine,
+  PosReceiptPayment,
+  PosReceiptTotals,
+} from './pos-receipt';
+
+const COFFEE_LINE: PosReceiptLine = {
+  lineId: 1,
+  sku: 'SKU-001',
+  name: 'Coffee 250g',
+  qty: 2,
+  unitPrice: 6,
+  lineTotal: 12,
+  vat: { rate: 0.25, amount: 2.4, included: true },
+  struckThrough: false,
+};
+
+const COMPLETED_TOTALS: PosReceiptTotals = {
+  gross: 12,
+  net: 9.6,
+  vat: 2.4,
+  discount: 0,
+  due: 0,
+  currency: 'EUR',
+};
+
+const CASH_PAYMENT: PosReceiptPayment = {
+  tender: 'cash',
+  amount: 12,
+  tendered: 20,
+  change: 8,
+  state: 'captured',
+};
+
+describe('PosReceipt', () => {
+  let fixture: ComponentFixture<PosReceipt>;
+  let component: PosReceipt;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PosReceipt],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PosReceipt);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should render the preparing receipt state by default', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.pos-receipt__title')?.textContent).toContain(
+      'Receipt',
+    );
+    expect(
+      compiled.querySelector('.pos-receipt__status')?.textContent,
+    ).toContain('Preparing receipt');
+    expect(compiled.querySelector('.pos-receipt__empty')?.textContent).toContain(
+      'No receipt lines',
+    );
+    expect(compiled.querySelector('.pos-receipt__number')).toBeNull();
+    expect(compiled.querySelector('.pos-receipt__payments')).toBeNull();
+  });
+
+  it('should render lines, totals, tender and change exactly as received without calculating', async () => {
+    const mismatched: PosReceiptLine = {
+      ...COFFEE_LINE,
+      qty: 2,
+      unitPrice: 6,
+      lineTotal: 99,
+    };
+    const totals: PosReceiptTotals = {
+      ...COMPLETED_TOTALS,
+      gross: 50,
+      due: 1,
+    };
+    const payment: PosReceiptPayment = {
+      ...CASH_PAYMENT,
+      amount: 12,
+      tendered: 20,
+      change: 3,
+    };
+
+    fixture.componentRef.setInput('lines', [mismatched]);
+    fixture.componentRef.setInput('totals', totals);
+    fixture.componentRef.setInput('payments', [payment]);
+    fixture.componentRef.setInput('document', {
+      number: 'ENV-999',
+      receiptReady: true,
+    });
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(
+      compiled.querySelector('.pos-receipt__line-name')?.textContent,
+    ).toContain('Coffee 250g');
+    expect(
+      compiled.querySelector('.pos-receipt__line-sku')?.textContent,
+    ).toContain('SKU-001');
+    expect(compiled.querySelector('.pos-receipt__qty')?.textContent?.trim()).toBe(
+      '2',
+    );
+    expect(
+      compiled.querySelector('.pos-receipt__line-total')?.textContent,
+    ).toContain('99');
+    expect(
+      compiled.querySelector('.pos-receipt__line-total')?.textContent,
+    ).not.toContain('12');
+
+    const due = compiled.querySelector('.pos-receipt__row--due dd');
+    expect(due?.textContent).toContain('1');
+    expect(due?.textContent).not.toContain('50');
+
+    const change = compiled.querySelector('.pos-receipt__row--change dd');
+    expect(change?.textContent).toContain('3');
+    expect(change?.textContent).not.toContain('8');
+
+    expect(
+      compiled.querySelector('.pos-receipt__payment-tender')?.textContent,
+    ).toContain('cash');
+    expect(
+      compiled.querySelector('.pos-receipt__number')?.textContent,
+    ).toContain('ENV-999');
+    expect(
+      compiled.querySelector('.pos-receipt__status')?.textContent,
+    ).toContain('Receipt ready');
+  });
+
+  it('should emit receipt.newSale when the cashier starts a new sale', async () => {
+    const intents: PosReceiptIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', COMPLETED_TOTALS);
+    fixture.componentRef.setInput('payments', [CASH_PAYMENT]);
+    fixture.componentRef.setInput('document', {
+      number: 'POS-1001',
+      receiptReady: true,
+    });
+    await fixture.whenStable();
+
+    const newSale = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-receipt__new-sale',
+    ) as HTMLButtonElement;
+    newSale.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([{ type: 'receipt.newSale' }]);
+  });
+
+  it('should not emit while disabled', async () => {
+    const intents: PosReceiptIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('disabled', true);
+    await fixture.whenStable();
+
+    const newSale = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-receipt__new-sale',
+    ) as HTMLButtonElement;
+    newSale.click();
+    await fixture.whenStable();
+
+    expect(newSale.disabled).toBe(true);
+    expect(intents).toEqual([]);
+  });
+
+  it('should mark voided lines without recalculating totals', async () => {
+    fixture.componentRef.setInput('lines', [
+      { ...COFFEE_LINE, struckThrough: true },
+    ]);
+    fixture.componentRef.setInput('totals', COMPLETED_TOTALS);
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.pos-receipt__line--voided')).toBeTruthy();
+    expect(
+      compiled.querySelector('.pos-receipt__line-voided')?.textContent,
+    ).toContain('Voided');
+    expect(
+      compiled.querySelector('.pos-receipt__row--due dd')?.textContent,
+    ).toContain('0');
+  });
+});

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

@@ -0,0 +1,163 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import {
+  PosReceipt,
+  PosReceiptLine,
+  PosReceiptPayment,
+  PosReceiptTotals,
+} from './pos-receipt';
+
+const coffee: PosReceiptLine = {
+  lineId: 1,
+  sku: 'SKU-001',
+  name: 'Coffee 250g',
+  qty: 2,
+  unitPrice: 6,
+  lineTotal: 12,
+  vat: { rate: 0.25, amount: 2.4, included: true },
+  struckThrough: false,
+};
+
+const pastry: PosReceiptLine = {
+  lineId: 2,
+  sku: 'SKU-014',
+  name: 'Almond croissant',
+  qty: 1,
+  unitPrice: 3.5,
+  lineTotal: 3.5,
+  vat: { rate: 0.2, amount: 0.58, included: true },
+  struckThrough: false,
+};
+
+const completedTotals: PosReceiptTotals = {
+  gross: 12,
+  net: 9.6,
+  vat: 2.4,
+  discount: 0,
+  due: 0,
+  currency: 'EUR',
+};
+
+const cashPayment: PosReceiptPayment = {
+  tender: 'cash',
+  amount: 12,
+  tendered: 20,
+  change: 8,
+  state: 'captured',
+};
+
+const meta: Meta<PosReceipt> = {
+  title: 'Receipt',
+  component: PosReceipt,
+  args: {
+    lines: [],
+    totals: {
+      gross: 0,
+      net: 0,
+      vat: 0,
+      discount: 0,
+      due: 0,
+      currency: 'EUR',
+    },
+    payments: [],
+    document: { number: '', receiptReady: false },
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PosReceipt>;
+
+export const Preparing: Story = {};
+
+export const CompletedCashSale: Story = {
+  args: {
+    lines: [coffee],
+    totals: completedTotals,
+    payments: [cashPayment],
+    document: { number: 'POS-1001', receiptReady: true },
+  },
+};
+
+export const MultipleLines: Story = {
+  args: {
+    lines: [coffee, pastry],
+    totals: {
+      gross: 15.5,
+      net: 12.52,
+      vat: 2.98,
+      discount: 0,
+      due: 0,
+      currency: 'EUR',
+    },
+    payments: [
+      {
+        tender: 'cash',
+        amount: 15.5,
+        tendered: 20,
+        change: 4.5,
+        state: 'captured',
+      },
+    ],
+    document: { number: 'POS-1002', receiptReady: true },
+  },
+};
+
+export const VoidedLine: Story = {
+  args: {
+    lines: [{ ...coffee, struckThrough: true }, pastry],
+    totals: {
+      gross: 3.5,
+      net: 2.92,
+      vat: 0.58,
+      discount: 0,
+      due: 0,
+      currency: 'EUR',
+    },
+    payments: [
+      {
+        tender: 'cash',
+        amount: 3.5,
+        tendered: 5,
+        change: 1.5,
+        state: 'captured',
+      },
+    ],
+    document: { number: 'POS-1003', receiptReady: true },
+  },
+};
+
+export const AsReceivedNotCalculated: Story = {
+  args: {
+    lines: [{ ...coffee, qty: 2, unitPrice: 6, lineTotal: 99 }],
+    totals: {
+      gross: 50,
+      net: 40,
+      vat: 10,
+      discount: 5,
+      due: 1,
+      currency: 'EUR',
+    },
+    payments: [
+      {
+        tender: 'cash',
+        amount: 12,
+        tendered: 20,
+        change: 3,
+        state: 'captured',
+      },
+    ],
+    document: { number: 'ENV-999', receiptReady: true },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    lines: [coffee],
+    totals: completedTotals,
+    payments: [cashPayment],
+    document: { number: 'POS-1001', receiptReady: true },
+    disabled: true,
+  },
+};