@retalia/pos-components 0.0.2 → 0.0.4

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

@@ -0,0 +1,285 @@
+: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-basket__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: var(--pos-color-panel);
+}
+
+.pos-basket__header {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--pos-space-md);
+  margin-bottom: var(--pos-space-md);
+}
+
+.pos-basket__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-basket__count {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-basket__lines {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  min-height: 8rem;
+  margin: 0;
+  padding: 0;
+  overflow-y: auto;
+  list-style: none;
+}
+
+.pos-basket__empty {
+  margin: auto 0;
+  padding: var(--pos-space-2xl) var(--pos-space-md);
+  color: var(--pos-color-text-muted);
+  text-align: center;
+}
+
+.pos-basket__line {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  grid-template-areas:
+    'info void'
+    'stepper prices';
+  align-items: center;
+  gap: var(--pos-space-sm) 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-basket__line-info {
+  grid-area: info;
+  min-width: 0;
+}
+
+.pos-basket__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-basket__line-sku,
+.pos-basket__line-voided {
+  margin: var(--pos-space-xs) 0 0;
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-basket__line-sku {
+  color: var(--pos-color-text-muted);
+}
+
+.pos-basket__line-voided {
+  color: var(--pos-color-danger);
+  font-weight: var(--pos-font-weight-semibold);
+}
+
+.pos-basket__stepper {
+  grid-area: stepper;
+  display: inline-flex;
+  align-items: center;
+  gap: var(--pos-space-xs);
+  width: fit-content;
+  padding: var(--pos-space-xs);
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-surface);
+}
+
+.pos-basket__qty-btn,
+.pos-basket__void {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0;
+  border: 0;
+  background: transparent;
+  color: var(--pos-color-text);
+  font: inherit;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pos-basket__qty-btn {
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border-radius: var(--pos-radius-sm);
+  font-size: var(--pos-font-size-lg);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-basket__qty-btn:not(:disabled):active,
+.pos-basket__void:not(:disabled):active {
+  background: var(--pos-color-key-active);
+  color: var(--pos-color-on-key-active);
+}
+
+.pos-basket__qty {
+  min-width: 1.75rem;
+  font-family: var(--pos-font-family-display);
+  font-weight: var(--pos-font-weight-bold);
+  text-align: center;
+}
+
+.pos-basket__line-prices {
+  grid-area: prices;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: var(--pos-space-xs);
+}
+
+.pos-basket__unit-price {
+  margin: 0;
+  color: var(--pos-color-text-muted);
+  font-size: var(--pos-font-size-sm);
+}
+
+.pos-basket__line-total {
+  margin: 0;
+  font-family: var(--pos-font-family-display);
+  font-weight: var(--pos-font-weight-bold);
+}
+
+.pos-basket__void {
+  grid-area: void;
+  justify-self: end;
+  min-width: 2.75rem;
+  min-height: 2.75rem;
+  border: 1px solid var(--pos-color-border);
+  border-radius: var(--pos-radius-md);
+  color: var(--pos-color-text-muted);
+}
+
+.pos-basket__qty-btn:disabled,
+.pos-basket__void:disabled,
+.pos-basket__clear:disabled {
+  cursor: not-allowed;
+  opacity: 0.55;
+}
+
+.pos-basket__qty-btn:focus-visible,
+.pos-basket__void:focus-visible,
+.pos-basket__clear:focus-visible {
+  outline: 2px solid var(--pos-color-primary);
+  outline-offset: 2px;
+}
+
+.pos-basket__line--voided .pos-basket__line-name,
+.pos-basket__line--voided .pos-basket__line-sku,
+.pos-basket__line--voided .pos-basket__line-prices {
+  color: var(--pos-color-text-muted);
+  text-decoration: line-through;
+}
+
+.pos-basket__footer {
+  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-basket__totals {
+  display: flex;
+  flex-direction: column;
+  gap: var(--pos-space-sm);
+  margin: 0;
+}
+
+.pos-basket__total-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-basket__total-row dt,
+.pos-basket__total-row dd {
+  margin: 0;
+}
+
+.pos-basket__total-row--due {
+  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-basket__clear {
+  min-height: var(--pos-button-min-height);
+  border: 0;
+  border-radius: var(--pos-radius-md);
+  background: var(--pos-color-danger);
+  color: var(--pos-color-on-danger);
+  font: inherit;
+  font-weight: var(--pos-font-weight-bold);
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.pos-basket__clear:not(:disabled):active {
+  transform: translateY(1px);
+}
+
+.pos-basket__clear:disabled {
+  background: var(--pos-color-disabled);
+  color: var(--pos-color-on-disabled);
+  transform: none;
+}
+
+@media (min-width: 768px) {
+  .pos-basket__panel {
+    padding: var(--pos-space-xl);
+  }
+
+  .pos-basket__line {
+    grid-template-columns: minmax(0, 1fr) auto auto auto;
+    grid-template-areas: 'info stepper prices void';
+    gap: var(--pos-space-md);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .pos-basket__clear {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,198 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import {
+  PosBasket,
+  PosBasketIntent,
+  PosBasketLine,
+  PosBasketTotals,
+} from './pos-basket';
+
+const COFFEE_LINE: PosBasketLine = {
+  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 MID_SALE_TOTALS: PosBasketTotals = {
+  gross: 12,
+  net: 9.6,
+  vat: 2.4,
+  discount: 0,
+  due: 12,
+  currency: 'EUR',
+};
+
+describe('PosBasket', () => {
+  let fixture: ComponentFixture<PosBasket>;
+  let component: PosBasket;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [PosBasket],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(PosBasket);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should render the empty basket state by default', () => {
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.pos-basket__title')?.textContent).toContain(
+      'Basket',
+    );
+    expect(compiled.querySelector('.pos-basket__empty')?.textContent).toContain(
+      'Basket is empty',
+    );
+  });
+
+  it('should render lines and totals exactly as received without calculating', async () => {
+    const mismatched: PosBasketLine = {
+      ...COFFEE_LINE,
+      qty: 2,
+      unitPrice: 6,
+      lineTotal: 99,
+    };
+    const totals: PosBasketTotals = {
+      ...MID_SALE_TOTALS,
+      gross: 50,
+      due: 40,
+    };
+
+    fixture.componentRef.setInput('lines', [mismatched]);
+    fixture.componentRef.setInput('totals', totals);
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(
+      compiled.querySelector('.pos-basket__line-name')?.textContent,
+    ).toContain('Coffee 250g');
+    expect(
+      compiled.querySelector('.pos-basket__line-sku')?.textContent,
+    ).toContain('SKU-001');
+    expect(compiled.querySelector('.pos-basket__qty')?.textContent?.trim()).toBe(
+      '2',
+    );
+    expect(
+      compiled.querySelector('.pos-basket__line-total')?.textContent,
+    ).toContain('99');
+    expect(
+      compiled.querySelector('.pos-basket__line-total')?.textContent,
+    ).not.toContain('12');
+
+    const due = compiled.querySelector('.pos-basket__total-row--due dd');
+    expect(due?.textContent).toContain('40');
+    expect(due?.textContent).not.toContain('50');
+  });
+
+  it('should emit change-quantity when the cashier increments a line', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    await fixture.whenStable();
+
+    const increase = (
+      fixture.nativeElement as HTMLElement
+    ).querySelectorAll('.pos-basket__qty-btn')[1] as HTMLButtonElement;
+    increase.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([
+      { type: 'basket.changeQuantity', lineId: 1, qty: 3 },
+    ]);
+  });
+
+  it('should emit change-quantity when the cashier decrements a line', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    await fixture.whenStable();
+
+    const decrease = (
+      fixture.nativeElement as HTMLElement
+    ).querySelector('.pos-basket__qty-btn') as HTMLButtonElement;
+    decrease.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([
+      { type: 'basket.changeQuantity', lineId: 1, qty: 1 },
+    ]);
+  });
+
+  it('should emit void-line for the selected line', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    await fixture.whenStable();
+
+    const voidBtn = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-basket__void',
+    ) as HTMLButtonElement;
+    voidBtn.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([{ type: 'basket.voidLine', lineId: 1 }]);
+  });
+
+  it('should emit clear-basket when the cashier clears', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [COFFEE_LINE]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    await fixture.whenStable();
+
+    const clear = (fixture.nativeElement as HTMLElement).querySelector(
+      '.pos-basket__clear',
+    ) as HTMLButtonElement;
+    clear.click();
+    await fixture.whenStable();
+
+    expect(intents).toEqual([{ type: 'basket.clear' }]);
+  });
+
+  it('should not emit while disabled, and should disable void on struck-through lines', async () => {
+    const intents: PosBasketIntent[] = [];
+    component.action.subscribe((intent) => intents.push(intent));
+
+    fixture.componentRef.setInput('lines', [
+      { ...COFFEE_LINE, struckThrough: true },
+    ]);
+    fixture.componentRef.setInput('totals', MID_SALE_TOTALS);
+    fixture.componentRef.setInput('disabled', true);
+    await fixture.whenStable();
+
+    const compiled = fixture.nativeElement as HTMLElement;
+    const increase = compiled.querySelectorAll(
+      '.pos-basket__qty-btn',
+    )[1] as HTMLButtonElement;
+    const voidBtn = compiled.querySelector(
+      '.pos-basket__void',
+    ) as HTMLButtonElement;
+    const clear = compiled.querySelector(
+      '.pos-basket__clear',
+    ) as HTMLButtonElement;
+
+    increase.click();
+    voidBtn.click();
+    clear.click();
+    await fixture.whenStable();
+
+    expect(increase.disabled).toBe(true);
+    expect(voidBtn.disabled).toBe(true);
+    expect(clear.disabled).toBe(true);
+    expect(intents).toEqual([]);
+    expect(compiled.querySelector('.pos-basket__line--voided')).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,114 @@
+import type { Meta, StoryObj } from '@storybook/angular-vite';
+
+import { PosBasket, PosBasketLine, PosBasketTotals } from './pos-basket';
+
+const coffee: PosBasketLine = {
+  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: PosBasketLine = {
+  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 midSaleTotals: PosBasketTotals = {
+  gross: 12,
+  net: 9.6,
+  vat: 2.4,
+  discount: 0,
+  due: 12,
+  currency: 'EUR',
+};
+
+const meta: Meta<PosBasket> = {
+  title: 'Basket',
+  component: PosBasket,
+  args: {
+    lines: [],
+    totals: {
+      gross: 0,
+      net: 0,
+      vat: 0,
+      discount: 0,
+      due: 0,
+      currency: 'EUR',
+    },
+    disabled: false,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PosBasket>;
+
+export const Empty: Story = {};
+
+export const MidSale: Story = {
+  args: {
+    lines: [coffee],
+    totals: midSaleTotals,
+  },
+};
+
+export const MultipleLines: Story = {
+  args: {
+    lines: [coffee, pastry],
+    totals: {
+      gross: 15.5,
+      net: 12.52,
+      vat: 2.98,
+      discount: 0,
+      due: 15.5,
+      currency: 'EUR',
+    },
+  },
+};
+
+export const VoidedLine: Story = {
+  args: {
+    lines: [{ ...coffee, struckThrough: true }, pastry],
+    totals: {
+      gross: 3.5,
+      net: 2.92,
+      vat: 0.58,
+      discount: 0,
+      due: 3.5,
+      currency: 'EUR',
+    },
+  },
+};
+
+export const AsReceivedNotCalculated: Story = {
+  args: {
+    lines: [{ ...coffee, qty: 2, unitPrice: 6, lineTotal: 99 }],
+    totals: {
+      gross: 50,
+      net: 40,
+      vat: 10,
+      discount: 5,
+      due: 45,
+      currency: 'EUR',
+    },
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    lines: [coffee],
+    totals: midSaleTotals,
+    disabled: true,
+  },
+};