@happyvertical/smrt-commerce 0.30.0

package/dist/svelte/components/InvoiceActions.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+/**
+ * InvoiceActions - Status-based action buttons for invoices
+ *
+ * Renders appropriate action buttons based on invoice status.
+ */
+
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { M } from '../i18n.js';
+import type { InvoiceStatus } from '../types.js';
+
+const { t } = useI18n();
+
+/** Props for InvoiceActions component */
+export interface Props {
+  /** Current invoice status */
+  status: InvoiceStatus;
+  /** Loading state */
+  loading?: boolean;
+  /** Called when send is clicked */
+  onsend?: () => void;
+  /** Called when mark paid is clicked */
+  onmarkpaid?: () => void;
+  /** Called when edit is clicked */
+  onedit?: () => void;
+  /** Called when delete is clicked */
+  ondelete?: () => void;
+  /** Called when print is clicked */
+  onprint?: () => void;
+  /** Called when export/download is clicked */
+  onexport?: () => void;
+  /** Size variant */
+  size?: 'sm' | 'md';
+}
+
+const {
+  status,
+  loading = false,
+  onsend,
+  onmarkpaid,
+  onedit,
+  ondelete,
+  onprint,
+  onexport,
+  size = 'md',
+}: Props = $props();
+
+// Determine which actions to show based on status
+const canEdit = $derived(status === 'draft');
+const canSend = $derived(status === 'draft');
+const canMarkPaid = $derived(
+  status === 'sent' || status === 'viewed' || status === 'overdue',
+);
+const canDelete = $derived(status === 'draft');
+</script>
+
+<div class="invoice-actions" class:sm={size === 'sm'}>
+  {#if canSend && onsend}
+    <button type="button" class="btn btn-primary" onclick={onsend} disabled={loading}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M14 2L7 9M14 2l-4 12-3-5-5-3 12-4z" />
+      </svg>
+      {t(M['commerce.invoice_actions.send_invoice'])}
+    </button>
+  {/if}
+
+  {#if canMarkPaid && onmarkpaid}
+    <button type="button" class="btn btn-success" onclick={onmarkpaid} disabled={loading}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M3 8l4 4 6-8" />
+      </svg>
+      {t(M['commerce.invoice_actions.mark_as_paid'])}
+    </button>
+  {/if}
+
+  {#if canEdit && onedit}
+    <button type="button" class="btn btn-secondary" onclick={onedit} disabled={loading}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M11.5 2.5l2 2-8 8H3.5v-2l8-8z" />
+      </svg>
+      Edit
+    </button>
+  {/if}
+
+  {#if onprint}
+    <button type="button" class="btn btn-secondary" onclick={onprint} disabled={loading}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M4 5V2h8v3M4 11h8M2 5h12v6H2z" />
+        <path d="M4 11v3h8v-3" />
+      </svg>
+      Print
+    </button>
+  {/if}
+
+  {#if onexport}
+    <button type="button" class="btn btn-secondary" onclick={onexport} disabled={loading}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M8 2v8M4 6l4-4 4 4M2 12v2h12v-2" />
+      </svg>
+      Export
+    </button>
+  {/if}
+
+  {#if canDelete && ondelete}
+    <button type="button" class="btn btn-danger" onclick={ondelete} disabled={loading}>
+      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+        <path d="M3 4h10M5 4V3a1 1 0 011-1h4a1 1 0 011 1v1M6 7v5M10 7v5" />
+        <path d="M4 4l1 10h6l1-10" />
+      </svg>
+      Delete
+    </button>
+  {/if}
+</div>
+
+<style>
+  .invoice-actions {
+    display: flex;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    flex-wrap: wrap;
+  }
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--smrt-spacing-2, 0.5rem);
+    padding: var(--smrt-spacing-2, 0.5rem) var(--smrt-spacing-4, 1rem);
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-medium, 500);
+    border: none;
+    border-radius: var(--smrt-radius-small, 0.375rem);
+    cursor: pointer;
+    transition: all var(--smrt-duration-fast, 150ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+    white-space: nowrap;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .btn {
+      transition: none;
+    }
+  }
+
+  .sm .btn {
+    padding: var(--smrt-spacing-1_5, 0.375rem) var(--smrt-spacing-3, 0.75rem);
+    font: var(--smrt-typography-label-medium-font);
+  }
+
+  .btn:disabled {
+    opacity: 0.38;
+    cursor: not-allowed;
+  }
+
+  .btn-primary {
+    background: var(--smrt-color-primary, #005ac1);
+    color: var(--smrt-color-on-primary, #ffffff);
+  }
+
+  .btn-primary:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--smrt-color-primary, #005ac1) 85%, var(--smrt-color-shadow, #000));
+  }
+
+  .btn-success {
+    background: var(--smrt-color-tertiary, #006c4c);
+    color: var(--smrt-color-on-tertiary, #ffffff);
+  }
+
+  .btn-success:hover:not(:disabled) {
+    background: color-mix(in srgb, var(--smrt-color-tertiary, #006c4c) 85%, var(--smrt-color-shadow, #000));
+  }
+
+  .btn-secondary {
+    background: var(--smrt-color-surface-container-lowest, #ffffff);
+    color: var(--smrt-color-on-surface-variant, #44474e);
+    border: 1px solid var(--smrt-color-outline, #74777f);
+  }
+
+  .btn-secondary:hover:not(:disabled) {
+    background: var(--smrt-color-surface-container-low, #f7f2fa);
+    border-color: var(--smrt-color-on-surface-variant, #44474e);
+  }
+
+  .btn-danger {
+    background: var(--smrt-color-surface-container-lowest, #ffffff);
+    color: var(--smrt-color-error, #ba1a1a);
+    border: 1px solid var(--smrt-color-error-container, #ffdad6);
+  }
+
+  .btn-danger:hover:not(:disabled) {
+    background: var(--smrt-color-error-container, #ffdad6);
+    border-color: var(--smrt-color-error, #ba1a1a);
+  }
+</style>

package/dist/svelte/components/InvoiceActions.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { InvoiceStatus } from '../types.js';
+/** Props for InvoiceActions component */
+export interface Props {
+    /** Current invoice status */
+    status: InvoiceStatus;
+    /** Loading state */
+    loading?: boolean;
+    /** Called when send is clicked */
+    onsend?: () => void;
+    /** Called when mark paid is clicked */
+    onmarkpaid?: () => void;
+    /** Called when edit is clicked */
+    onedit?: () => void;
+    /** Called when delete is clicked */
+    ondelete?: () => void;
+    /** Called when print is clicked */
+    onprint?: () => void;
+    /** Called when export/download is clicked */
+    onexport?: () => void;
+    /** Size variant */
+    size?: 'sm' | 'md';
+}
+declare const InvoiceActions: import("svelte").Component<Props, {}, "">;
+type InvoiceActions = ReturnType<typeof InvoiceActions>;
+export default InvoiceActions;
+//# sourceMappingURL=InvoiceActions.svelte.d.ts.map

package/dist/svelte/components/InvoiceActions.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceActions.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceActions.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAGjD,yCAAyC;AACzC,MAAM,WAAW,KAAK;IACpB,6BAA6B;IAC7B,MAAM,EAAE,aAAa,CAAC;IACtB,oBAAoB;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,uCAAuC;IACvC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,kCAAkC;IAClC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,oCAAoC;IACpC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,mBAAmB;IACnB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;CACpB;AA8FD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/svelte/components/InvoiceCard.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+/**
+ * InvoiceCard - Invoice list/grid card
+ * refactored for Material 3
+ *
+ * Compact card view for displaying invoices in lists.
+ */
+
+import { ripple } from '@happyvertical/smrt-ui';
+import type { InvoiceData, InvoiceStatus } from '../types.js';
+
+/** Props for InvoiceCard component */
+export interface Props {
+  /** Invoice data */
+  invoice: InvoiceData;
+  /** Currency code */
+  currency?: 'CAD' | 'USD';
+  /** Navigation href */
+  href?: string;
+  /** Click handler */
+  onclick?: () => void;
+}
+
+const { invoice, currency = 'CAD', href, onclick }: Props = $props();
+
+// Format money
+function formatMoney(cents: number): string {
+  return new Intl.NumberFormat('en-CA', {
+    style: 'currency',
+    currency,
+    minimumFractionDigits: 2,
+  }).format(cents / 100);
+}
+
+// Format date
+function formatDate(date: Date | string | null | undefined): string {
+  if (!date) return '';
+  const d = typeof date === 'string' ? new Date(date) : date;
+  return new Intl.DateTimeFormat('en-CA', {
+    month: 'short',
+    day: 'numeric',
+  }).format(d);
+}
+
+// Map status to M3 classes
+const statusClass = $derived.by(() => {
+  switch (invoice.status) {
+    case 'paid':
+      return 'status-paid';
+    case 'overdue':
+      return 'status-error';
+    case 'sent':
+      return 'status-info';
+    case 'viewed':
+      return 'status-info';
+    case 'cancelled':
+      return 'status-error';
+    default:
+      return 'status-default';
+  }
+});
+
+// Check if overdue
+const isOverdue = $derived.by(() => {
+  if (invoice.status === 'paid' || invoice.status === 'cancelled') return false;
+  if (!invoice.dueDate) return false;
+  const due =
+    typeof invoice.dueDate === 'string'
+      ? new Date(invoice.dueDate)
+      : invoice.dueDate;
+  return due < new Date();
+});
+</script>
+
+{#if href}
+  <a class="invoice-card" {href} use:ripple>
+    <div class="card-header">
+      <span class="invoice-number">{invoice.invoiceNumber}</span>
+      <span class="status-badge {isOverdue ? 'status-error' : statusClass}">
+        {isOverdue ? 'Overdue' : invoice.status}
+      </span>
+    </div>
+
+    <div class="card-body">
+      {#if invoice.customerName}
+        <span class="customer-name">{invoice.customerName}</span>
+      {/if}
+      <span class="invoice-amount">{formatMoney(invoice.totalAmount)}</span>
+    </div>
+
+    <div class="card-footer">
+      <span class="issue-date">{formatDate(invoice.issueDate)}</span>
+      {#if invoice.dueDate}
+        <span class="due-date" class:overdue={isOverdue}>
+          Due {formatDate(invoice.dueDate)}
+        </span>
+      {/if}
+    </div>
+  </a>
+{:else}
+  <button type="button" class="invoice-card" onclick={onclick} use:ripple>
+    <div class="card-header">
+      <span class="invoice-number">{invoice.invoiceNumber}</span>
+      <span class="status-badge {isOverdue ? 'status-error' : statusClass}">
+        {isOverdue ? 'Overdue' : invoice.status}
+      </span>
+    </div>
+
+    <div class="card-body">
+      {#if invoice.customerName}
+        <span class="customer-name">{invoice.customerName}</span>
+      {/if}
+      <span class="invoice-amount">{formatMoney(invoice.totalAmount)}</span>
+    </div>
+
+    <div class="card-footer">
+      <span class="issue-date">{formatDate(invoice.issueDate)}</span>
+      {#if invoice.dueDate}
+        <span class="due-date" class:overdue={isOverdue}>
+          Due {formatDate(invoice.dueDate)}
+        </span>
+      {/if}
+    </div>
+  </button>
+{/if}
+
+<style>
+  .invoice-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-3, 12px);
+    padding: var(--smrt-spacing-4, 16px);
+    background-color: var(--smrt-color-surface-container-low);
+    border-radius: var(--smrt-radius-large, 12px);
+    text-decoration: none;
+    color: var(--smrt-color-on-surface);
+    cursor: pointer;
+    transition: 
+      background-color var(--smrt-duration-normal, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1)),
+      box-shadow var(--smrt-duration-normal, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+    text-align: left;
+    width: 100%;
+    border: none;
+    position: relative;
+    overflow: hidden;
+    box-shadow: var(--smrt-elevation-1);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .invoice-card {
+      transition: none;
+    }
+  }
+
+  .invoice-card:hover {
+    background-color: var(--smrt-color-surface-container-high);
+    box-shadow: var(--smrt-elevation-2);
+  }
+
+  .card-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .invoice-number {
+    font: var(--smrt-typography-label-large-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-on-surface);
+  }
+
+  .status-badge {
+    display: inline-flex;
+    padding: 0 var(--smrt-spacing-2, 8px);
+    height: 20px;
+    align-items: center;
+    font: var(--smrt-typography-label-small-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    border-radius: var(--smrt-radius-full, 10px);
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  /* Status Badge Colors */
+  .status-default { 
+    background-color: var(--smrt-color-surface-variant);
+    color: var(--smrt-color-on-surface-variant);
+  }
+  .status-paid {
+    background-color: var(--smrt-color-secondary-container);
+    color: var(--smrt-color-on-secondary-container);
+  }
+  .status-info {
+    background-color: var(--smrt-color-primary-container);
+    color: var(--smrt-color-on-primary-container);
+  }
+  .status-error {
+    background-color: var(--smrt-color-error-container);
+    color: var(--smrt-color-on-error-container);
+  }
+
+  .card-body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-1, 4px);
+  }
+
+  .customer-name {
+    font: var(--smrt-typography-body-small-font);
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .invoice-amount {
+    font: var(--smrt-typography-headline-small-font);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+    color: var(--smrt-color-on-surface);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .card-footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font: var(--smrt-typography-body-small-font);
+    color: var(--smrt-color-on-surface-variant);
+    opacity: 0.8;
+  }
+
+  .due-date.overdue {
+    color: var(--smrt-color-error);
+    font-weight: var(--smrt-typography-weight-semibold, 600);
+  }
+</style>

package/dist/svelte/components/InvoiceCard.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { InvoiceData } from '../types.js';
+/** Props for InvoiceCard component */
+export interface Props {
+    /** Invoice data */
+    invoice: InvoiceData;
+    /** Currency code */
+    currency?: 'CAD' | 'USD';
+    /** Navigation href */
+    href?: string;
+    /** Click handler */
+    onclick?: () => void;
+}
+declare const InvoiceCard: import("svelte").Component<Props, {}, "">;
+type InvoiceCard = ReturnType<typeof InvoiceCard>;
+export default InvoiceCard;
+//# sourceMappingURL=InvoiceCard.svelte.d.ts.map

package/dist/svelte/components/InvoiceCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InvoiceCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/InvoiceCard.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,WAAW,EAAiB,MAAM,aAAa,CAAC;AAG9D,sCAAsC;AACtC,MAAM,WAAW,KAAK;IACpB,mBAAmB;IACnB,OAAO,EAAE,WAAW,CAAC;IACrB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IACzB,sBAAsB;IACtB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oBAAoB;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAkHD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}