@retalia/pos-components 0.0.4 → 0.0.5

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

@@ -1,367 +0,0 @@
-: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

@@ -1,188 +0,0 @@
-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

@@ -1,163 +0,0 @@
-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,
-  },
-};