@happyvertical/smrt-marketing 0.39.16

package/dist/svelte/__tests__/components.test.js

@@ -0,0 +1,115 @@
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import { describe, expect, it, vi } from 'vitest';
+import BudgetPacing from '../components/BudgetPacing.svelte';
+import CampaignDetail from '../components/CampaignDetail.svelte';
+import CampaignList from '../components/CampaignList.svelte';
+import ChannelMix from '../components/ChannelMix.svelte';
+import MarketingDashboard from '../components/MarketingDashboard.svelte';
+const campaign = {
+    id: 'campaign-1',
+    campaignKey: 'summer-launch',
+    name: 'Summer launch',
+    objective: 'lead_generation',
+    status: 'active',
+    startAt: '2026-07-01T00:00:00.000Z',
+    endAt: '2026-07-31T00:00:00.000Z',
+    budgetCents: 10_000,
+    currency: 'USD',
+    spendCents: 2_500,
+    impressions: 4_000,
+    clicks: 80,
+    conversions: 4,
+    leads: 12,
+    channelCount: 2,
+};
+const channels = [
+    {
+        id: 'channel-social',
+        channelKind: 'social',
+        channelRef: 'social:post-1',
+        label: 'Social post',
+        status: 'active',
+        allocatedBudgetCents: 7_500,
+        spendCents: 2_000,
+        impressions: 3_000,
+        clicks: 60,
+        leads: 10,
+    },
+    {
+        id: 'channel-ad',
+        channelKind: 'ads',
+        channelRef: 'ads:campaign-1',
+        label: 'Paid campaign',
+        status: 'scheduled',
+        allocatedBudgetCents: 2_500,
+        spendCents: 500,
+        impressions: 1_000,
+        clicks: 20,
+        leads: 2,
+    },
+];
+describe('marketing Svelte surfaces', () => {
+    it('renders dashboard totals from public campaign props', () => {
+        render(MarketingDashboard, {
+            props: { campaigns: [campaign], locale: 'en-US' },
+        });
+        expect(screen.getByText('1 active')).toBeInTheDocument();
+        expect(screen.getByText('2')).toBeInTheDocument();
+        expect(screen.getByText('12')).toBeInTheDocument();
+        expect(screen.getByText('$25.00 spent')).toBeInTheDocument();
+        expect(screen.getByText('of $100.00 budget')).toBeInTheDocument();
+    });
+    it('renders campaign rows and reports selection through its callback', async () => {
+        const onSelect = vi.fn();
+        render(CampaignList, {
+            props: { campaigns: [campaign], locale: 'en-US', onSelect },
+        });
+        expect(screen.getByRole('table')).toBeInTheDocument();
+        expect(screen.getByText('Summer launch')).toBeInTheDocument();
+        await fireEvent.click(screen.getByRole('button', { name: 'View' }));
+        expect(onSelect).toHaveBeenCalledWith('campaign-1');
+    });
+    it('renders campaign details and generic channel references', () => {
+        const detail = {
+            ...campaign,
+            description: 'A cross-channel launch.',
+        };
+        render(CampaignDetail, {
+            props: { campaign: detail, channels, locale: 'en-US' },
+        });
+        expect(screen.getByRole('heading', { name: 'Summer launch' })).toBeInTheDocument();
+        expect(screen.getByText('A cross-channel launch.')).toBeInTheDocument();
+        expect(screen.getByText('Social post')).toBeInTheDocument();
+        expect(screen.getByText('social:post-1')).toBeInTheDocument();
+    });
+    it('renders channel mix percentages and cent-based spend', () => {
+        render(ChannelMix, {
+            props: { channels, currency: 'USD', locale: 'en-US' },
+        });
+        expect(screen.getByRole('heading', { name: 'Channel mix' })).toBeInTheDocument();
+        expect(screen.getByText('$20.00 spent')).toBeInTheDocument();
+        expect(screen.getByText('80% of mix')).toBeInTheDocument();
+        expect(screen.getByText('$5.00 spent')).toBeInTheDocument();
+        expect(screen.getByText('20% of mix')).toBeInTheDocument();
+    });
+    it('renders budget pacing state and formatted evidence', () => {
+        const pacing = {
+            campaignId: campaign.id,
+            currency: 'USD',
+            budgetCents: 10_000,
+            spendCents: 4_000,
+            remainingCents: 6_000,
+            expectedSpendCents: 3_500,
+            varianceCents: 500,
+            budgetFraction: 0.4,
+            elapsedFraction: 0.35,
+            status: 'on_track',
+        };
+        render(BudgetPacing, { props: { pacing, locale: 'en-US' } });
+        expect(screen.getByRole('heading', { name: 'Budget pacing' })).toBeInTheDocument();
+        expect(screen.getByText('On track')).toBeInTheDocument();
+        expect(screen.getByText('$40.00 spent')).toBeInTheDocument();
+        expect(screen.getByText('40%')).toBeInTheDocument();
+        expect(screen.getByText('$60.00')).toBeInTheDocument();
+    });
+});

package/dist/svelte/__tests__/helpers.test.js

@@ -0,0 +1,94 @@
+import { describe, expect, it } from 'vitest';
+import { formatCents } from '../format.js';
+import { calculateChannelMix, campaignStatusBadgeVariant, cappedBudgetProgress, pacingStatusBadgeVariant, summarizeMarketingDashboard, } from '../types.js';
+describe('marketing Svelte helpers', () => {
+    it('keeps currency formatting render-safe for invalid inputs', () => {
+        expect(formatCents(12_345, 'NOT_A_CODE', 'en-US')).toBe('123.45 NOT_A_CODE');
+        expect(formatCents(Number.NaN, 'USD', 'en-US')).toBe('—');
+    });
+    it('summarizes campaign metrics without mixing currencies', () => {
+        const summary = summarizeMarketingDashboard([
+            {
+                id: 'campaign-1',
+                campaignKey: 'one',
+                name: 'One',
+                status: 'active',
+                budgetCents: 100_000,
+                spendCents: 40_000,
+                currency: 'CAD',
+                channelCount: 2,
+                impressions: 10_000,
+                clicks: 500,
+                conversions: 20,
+                leads: 12,
+            },
+            {
+                id: 'campaign-2',
+                campaignKey: 'two',
+                name: 'Two',
+                status: 'completed',
+                budgetCents: 50_000,
+                spendCents: 45_000,
+                currency: 'CAD',
+                channelCount: 1,
+                leads: 5,
+            },
+            {
+                id: 'campaign-3',
+                campaignKey: 'three',
+                name: 'Three',
+                status: 'draft',
+                budgetCents: 80_000,
+                spendCents: 0,
+                currency: 'USD',
+            },
+        ]);
+        expect(summary.activeCampaignCount).toBe(1);
+        expect(summary.channelCount).toBe(3);
+        expect(summary.leads).toBe(17);
+        expect(summary.currencyTotals).toEqual([
+            { currency: 'CAD', budgetCents: 150_000, spendCents: 85_000 },
+            { currency: 'USD', budgetCents: 80_000, spendCents: 0 },
+        ]);
+    });
+    it('calculates channel spend and allocation fractions independently', () => {
+        const mix = calculateChannelMix([
+            {
+                id: 'ads',
+                channelKind: 'ad_group',
+                channelRef: 'ag-1',
+                status: 'active',
+                allocatedBudgetCents: 75_000,
+                spendCents: 30_000,
+            },
+            {
+                id: 'social',
+                channelKind: 'social_post',
+                channelRef: 'post-1',
+                status: 'active',
+                allocatedBudgetCents: 25_000,
+                spendCents: 10_000,
+            },
+        ]);
+        expect(mix[0]?.spendFraction).toBe(0.75);
+        expect(mix[0]?.allocationFraction).toBe(0.75);
+        expect(mix[1]?.spendFraction).toBe(0.25);
+    });
+    it('caps visual progress while preserving status semantics', () => {
+        expect(cappedBudgetProgress({
+            campaignId: 'campaign-1',
+            currency: 'CAD',
+            budgetCents: 100,
+            spendCents: 125,
+            remainingCents: -25,
+            expectedSpendCents: 50,
+            varianceCents: 75,
+            budgetFraction: 1.25,
+            elapsedFraction: 0.5,
+            status: 'over_budget',
+        })).toBe(1);
+        expect(pacingStatusBadgeVariant('over_budget')).toBe('error');
+        expect(pacingStatusBadgeVariant('on_track')).toBe('success');
+        expect(campaignStatusBadgeVariant('paused')).toBe('warning');
+    });
+});

package/dist/svelte/components/BudgetPacing.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { Progress } from '@happyvertical/smrt-ui/feedback';
+import { Badge, Card } from '@happyvertical/smrt-ui/ui';
+import { formatCents, formatPercent, humanizeKey } from '../format.js';
+import type { BudgetPacingView } from '../types.js';
+import { cappedBudgetProgress, pacingStatusBadgeVariant } from '../types.js';
+
+export interface Props {
+  pacing?: BudgetPacingView | null;
+  locale?: string;
+  label?: string;
+}
+
+let { pacing = null, locale, label = 'Budget pacing' }: Props = $props();
+const progress = $derived(pacing ? cappedBudgetProgress(pacing) : 0);
+</script>
+
+{#if !pacing}
+  <p class="empty">No budget pacing is available.</p>
+{:else}
+  <Card padding="sm" variant="outlined">
+    <section class="budget-pacing">
+      <header>
+        <h3>{label}</h3>
+        <Badge variant={pacingStatusBadgeVariant(pacing.status)} size="sm">
+          {humanizeKey(pacing.status)}
+        </Badge>
+      </header>
+
+      <div class="progress-label">
+        <span>{formatCents(pacing.spendCents, pacing.currency, locale)} spent</span>
+        <span>
+          {pacing.budgetFraction === null
+            ? 'No budget'
+            : formatPercent(pacing.budgetFraction, locale)}
+        </span>
+      </div>
+      <Progress value={progress} max={1} label={label} />
+
+      <dl class="facts">
+        <div>
+          <dt>Budget</dt>
+          <dd>{formatCents(pacing.budgetCents, pacing.currency, locale)}</dd>
+        </div>
+        <div>
+          <dt>Remaining</dt>
+          <dd class:negative={pacing.remainingCents < 0}>
+            {formatCents(pacing.remainingCents, pacing.currency, locale)}
+          </dd>
+        </div>
+        <div>
+          <dt>Expected by now</dt>
+          <dd>
+            {pacing.expectedSpendCents === null
+              ? '—'
+              : formatCents(pacing.expectedSpendCents, pacing.currency, locale)}
+          </dd>
+        </div>
+        <div>
+          <dt>Variance</dt>
+          <dd class:negative={(pacing.varianceCents ?? 0) > 0}>
+            {pacing.varianceCents === null
+              ? '—'
+              : formatCents(pacing.varianceCents, pacing.currency, locale)}
+          </dd>
+        </div>
+      </dl>
+    </section>
+  </Card>
+{/if}
+
+<style>
+  .budget-pacing {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2);
+  }
+
+  header,
+  .progress-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3);
+  }
+
+  h3,
+  .empty {
+    margin: 0;
+  }
+
+  h3 {
+    color: var(--smrt-color-on-surface);
+    font: var(--smrt-typography-title-medium-font);
+  }
+
+  .empty,
+  .progress-label,
+  dt {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .empty {
+    font: var(--smrt-typography-body-medium-font);
+  }
+
+  .progress-label,
+  dt {
+    font: var(--smrt-typography-body-small-font);
+  }
+
+  .facts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
+    gap: var(--smrt-spacing-3);
+    margin: var(--smrt-spacing-3) 0 0;
+  }
+
+  .facts dd {
+    margin: var(--smrt-spacing-1) 0 0;
+    color: var(--smrt-color-on-surface);
+    font: var(--smrt-typography-body-medium-font);
+    font-weight: var(--smrt-typography-weight-medium);
+  }
+
+  .facts dd.negative {
+    color: var(--smrt-color-error);
+  }
+</style>

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

@@ -0,0 +1,10 @@
+import type { BudgetPacingView } from '../types.js';
+export interface Props {
+    pacing?: BudgetPacingView | null;
+    locale?: string;
+    label?: string;
+}
+declare const BudgetPacing: import("svelte").Component<Props, {}, "">;
+type BudgetPacing = ReturnType<typeof BudgetPacing>;
+export default BudgetPacing;
+//# sourceMappingURL=BudgetPacing.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BudgetPacing.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/BudgetPacing.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAIpD,MAAM,WAAW,KAAK;IACpB,MAAM,CAAC,EAAE,gBAAgB,GAAG,IAAI,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuED,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/svelte/components/CampaignDetail.svelte

@@ -0,0 +1,208 @@
+<script lang="ts">
+import { Badge, Card } from '@happyvertical/smrt-ui/ui';
+import type { Snippet } from 'svelte';
+import {
+  formatCents,
+  formatDateRange,
+  formatNumber,
+  humanizeKey,
+} from '../format.js';
+import type { CampaignChannelView, CampaignDetailView } from '../types.js';
+import { campaignStatusBadgeVariant } from '../types.js';
+
+export interface Props {
+  campaign?: CampaignDetailView | null;
+  channels?: CampaignChannelView[];
+  locale?: string;
+  pacing?: Snippet;
+  channelMix?: Snippet;
+  children?: Snippet;
+}
+
+let {
+  campaign = null,
+  channels = [],
+  locale,
+  pacing,
+  channelMix,
+  children,
+}: Props = $props();
+</script>
+
+{#if !campaign}
+  <p class="empty">Select a campaign to see its details.</p>
+{:else}
+  <article class="campaign-detail">
+    <Card variant="outlined">
+      <header class="header">
+        <div>
+          <p class="eyebrow">{campaign.campaignKey}</p>
+          <h2>{campaign.name}</h2>
+          {#if campaign.description}<p class="description">{campaign.description}</p>{/if}
+        </div>
+        <Badge variant={campaignStatusBadgeVariant(campaign.status)}>
+          {humanizeKey(campaign.status)}
+        </Badge>
+      </header>
+
+      <dl class="facts">
+        <div>
+          <dt>Objective</dt>
+          <dd>{campaign.objective ? humanizeKey(campaign.objective) : '—'}</dd>
+        </div>
+        <div>
+          <dt>Schedule</dt>
+          <dd>{formatDateRange(campaign.startAt, campaign.endAt, locale)}</dd>
+        </div>
+        <div>
+          <dt>Budget</dt>
+          <dd>{formatCents(campaign.budgetCents, campaign.currency, locale)}</dd>
+        </div>
+        <div>
+          <dt>Spend</dt>
+          <dd>{formatCents(campaign.spendCents ?? 0, campaign.currency, locale)}</dd>
+        </div>
+        <div>
+          <dt>Impressions</dt>
+          <dd>{formatNumber(campaign.impressions ?? 0, locale)}</dd>
+        </div>
+        <div>
+          <dt>Leads</dt>
+          <dd>{formatNumber(campaign.leads ?? 0, locale)}</dd>
+        </div>
+      </dl>
+    </Card>
+
+    {#if channels.length > 0}
+      <Card padding="sm">
+        <section class="channels" aria-label="Campaign channels">
+          <h3>Executions</h3>
+          <ul>
+            {#each channels as channel (channel.id)}
+              <li>
+                <span>
+                  <span class="channel-name">{channel.label ?? humanizeKey(channel.channelKind)}</span>
+                  <span class="channel-ref">{channel.channelRef}</span>
+                </span>
+                <Badge variant={campaignStatusBadgeVariant(channel.status)} size="sm">
+                  {humanizeKey(channel.status)}
+                </Badge>
+              </li>
+            {/each}
+          </ul>
+        </section>
+      </Card>
+    {/if}
+
+    {#if pacing}<section aria-label="Budget pacing">{@render pacing()}</section>{/if}
+    {#if channelMix}<section aria-label="Channel mix">{@render channelMix()}</section>{/if}
+    {@render children?.()}
+  </article>
+{/if}
+
+<style>
+  .campaign-detail {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .empty,
+  .description,
+  .channel-ref {
+    color: var(--smrt-color-on-surface-variant);
+  }
+
+  .empty,
+  .description {
+    margin: 0;
+    font: var(--smrt-typography-body-medium-font);
+  }
+
+  .header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-4);
+  }
+
+  .eyebrow {
+    margin: 0;
+    color: var(--smrt-color-on-surface-variant);
+    font: var(--smrt-typography-label-medium-font);
+  }
+
+  h2,
+  h3 {
+    margin: 0;
+    color: var(--smrt-color-on-surface);
+  }
+
+  h2 {
+    font: var(--smrt-typography-headline-small-font);
+  }
+
+  h3 {
+    font: var(--smrt-typography-title-medium-font);
+  }
+
+  .description {
+    margin-top: var(--smrt-spacing-2);
+  }
+
+  .facts {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+    gap: var(--smrt-spacing-4);
+    margin: var(--smrt-spacing-5) 0 0;
+  }
+
+  .facts dt {
+    color: var(--smrt-color-on-surface-variant);
+    font: var(--smrt-typography-label-medium-font);
+  }
+
+  .facts dd {
+    margin: var(--smrt-spacing-1) 0 0;
+    color: var(--smrt-color-on-surface);
+    font: var(--smrt-typography-body-large-font);
+    font-weight: var(--smrt-typography-weight-medium);
+  }
+
+  .channels h3 {
+    margin-bottom: var(--smrt-spacing-3);
+  }
+
+  ul {
+    display: flex;
+    flex-direction: column;
+    gap: var(--smrt-spacing-2);
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  li {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--smrt-spacing-3);
+    padding-bottom: var(--smrt-spacing-2);
+    border-bottom: 1px solid var(--smrt-color-outline-variant);
+  }
+
+  .channel-name,
+  .channel-ref {
+    display: block;
+  }
+
+  .channel-name {
+    color: var(--smrt-color-on-surface);
+    font: var(--smrt-typography-body-medium-font);
+    font-weight: var(--smrt-typography-weight-medium);
+  }
+
+  .channel-ref {
+    font: var(--smrt-typography-body-small-font);
+  }
+</style>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { CampaignChannelView, CampaignDetailView } from '../types.js';
+export interface Props {
+    campaign?: CampaignDetailView | null;
+    channels?: CampaignChannelView[];
+    locale?: string;
+    pacing?: Snippet;
+    channelMix?: Snippet;
+    children?: Snippet;
+}
+declare const CampaignDetail: import("svelte").Component<Props, {}, "">;
+type CampaignDetail = ReturnType<typeof CampaignDetail>;
+export default CampaignDetail;
+//# sourceMappingURL=CampaignDetail.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CampaignDetail.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/CampaignDetail.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAOtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAI3E,MAAM,WAAW,KAAK;IACpB,QAAQ,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AA8FD,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}