{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "customer-journey-map", "title": "Customer Journey Map", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/customer-journey-map/customer-journey-map.component.ts", "content": "import { Component, Input, signal, ChangeDetectionStrategy } from '@angular/core'\nimport {\n ArrowRight,\n ArrowUpRight,\n CheckCircle2,\n Clock,\n Compass,\n CreditCard,\n Download,\n HeartHandshake,\n Lightbulb,\n LucideAngularModule,\n MousePointerClick,\n Rocket,\n Share2,\n ShieldAlert,\n Smile,\n TrendingUp,\n Zap,\n type LucideIconData,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent, type BadgeVariant } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiProgressComponent } from '@/ui/progress/progress.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\n\nexport interface JourneyStage {\n id: string\n stageNumber: string\n title: string\n subtitle: string\n icon: LucideIconData\n volume: string\n volumeLabel: string\n volumeChange: string\n volumeChangeTrend: 'up' | 'down'\n conversionRate: string\n conversionLabel: string\n primaryAction: {\n icon: LucideIconData\n text: string\n }\n keyMetrics: {\n label: string\n value: string\n detail?: string\n }[]\n touchpoints: {\n name: string\n channel: string\n type: 'organic' | 'app' | 'email' | 'billing'\n }[]\n sentiment: {\n score: number\n maxScore: number\n label: string\n icon: LucideIconData\n progressColor: string\n gaugeLabel: string\n }\n frictionPoint: string\n opportunity: {\n experiment: string\n expectedImpact: string\n }\n badgeVariant: Extract\n}\n\nconst timeframes = [\n { id: '30d', label: 'Last 30 Days' },\n { id: '90d', label: 'Last 90 Days' },\n { id: 'qtd', label: 'Quarter to Date' },\n { id: 'ytd', label: 'Year to Date' },\n]\n\nconst stages: JourneyStage[] = [\n {\n id: 'acquisition',\n stageNumber: '01',\n title: 'Acquisition',\n subtitle: 'Traffic & Inbound Discovery',\n icon: Compass,\n volume: '120,000',\n volumeLabel: 'Unique Visitors',\n volumeChange: '+14.2%',\n volumeChangeTrend: 'up',\n conversionRate: '6.8%',\n conversionLabel: 'Visitor to Signup',\n primaryAction: {\n icon: MousePointerClick,\n text: 'Browses docs & visits pricing',\n },\n keyMetrics: [\n { label: 'Top Channel', value: 'Organic Search', detail: '48% of volume' },\n { label: 'Signup Conv.', value: '6.8%', detail: '8,160 accounts' },\n { label: 'Avg. Bounce', value: '41.2%', detail: '-2.4% vs benchmark' },\n ],\n touchpoints: [\n { name: 'SEO landing pages & technical blog', channel: 'Search', type: 'organic' },\n { name: 'Interactive sandbox demo playground', channel: 'Web App', type: 'app' },\n { name: 'Product Hunt launch & GitHub repo', channel: 'Community', type: 'organic' },\n { name: 'Developer search & social ad campaigns', channel: 'Paid Ads', type: 'organic' },\n ],\n sentiment: {\n score: 8.2,\n maxScore: 10,\n label: 'High Intent',\n icon: Smile,\n progressColor: 'bg-chart-1',\n gaugeLabel: '8.2 / 10',\n },\n frictionPoint: 'Technical landing page bounce rate spikes on legacy mobile browsers (54%).',\n opportunity: {\n experiment: 'Optimize hero headline for developer intent to lift bounce rate by 5%',\n expectedImpact: '+420 signups/mo',\n },\n badgeVariant: 'secondary',\n },\n {\n id: 'activation',\n stageNumber: '02',\n title: 'Activation',\n subtitle: 'Onboarding & First Success',\n icon: Rocket,\n volume: '8,160',\n volumeLabel: 'Signups Onboarded',\n volumeChange: '+8.6%',\n volumeChangeTrend: 'up',\n conversionRate: '78.0%',\n conversionLabel: 'Reached Aha Milestone',\n primaryAction: {\n icon: Zap,\n text: 'Runs first CLI query & creates project',\n },\n keyMetrics: [\n { label: 'Key Milestone', value: 'Created 1st Project', detail: '78% completed' },\n { label: 'Time to Value', value: '12 min', detail: 'Median onboarding' },\n { label: 'Stage Drop-off', value: '22.0%', detail: 'Step 3 invite friction' },\n ],\n touchpoints: [\n { name: 'Automated 4-part welcome email sequence', channel: 'Email', type: 'email' },\n { name: 'Interactive 3-step setup checklist', channel: 'In-App Modal', type: 'app' },\n { name: 'Pre-populated template project schemas', channel: 'Workspace', type: 'app' },\n { name: 'CLI quickstart terminal prompt', channel: 'Developer Tool', type: 'app' },\n ],\n sentiment: {\n score: 8.8,\n maxScore: 10,\n label: 'Enthusiastic',\n icon: Smile,\n progressColor: 'bg-chart-2',\n gaugeLabel: '8.8 / 10',\n },\n frictionPoint: 'Drop-off occurs during mandatory colleague invite screen before dashboard access.',\n opportunity: {\n experiment: 'Add single-sign on prompt to reduce drop-off by 8%',\n expectedImpact: '+650 activated teams',\n },\n badgeVariant: 'info',\n },\n {\n id: 'monetization',\n stageNumber: '03',\n title: 'Monetization',\n subtitle: 'Free to Paid Conversion',\n icon: CreditCard,\n volume: '1,420',\n volumeLabel: 'Paid Customers',\n volumeChange: '+22.4%',\n volumeChangeTrend: 'up',\n conversionRate: '17.4%',\n conversionLabel: 'Signup to Paid Rate',\n primaryAction: {\n icon: TrendingUp,\n text: 'Selects Team plan & enters credit card',\n },\n keyMetrics: [\n { label: 'Avg. Order Value', value: '$49/mo', detail: 'Blended Team/Pro' },\n { label: 'Conv. Rate', value: '17.4%', detail: '1,420 total accounts' },\n { label: 'Gross New MRR', value: '+$69,580', detail: 'Paced above target' },\n ],\n touchpoints: [\n { name: 'Feature gate limit trigger modal', channel: 'In-App', type: 'app' },\n { name: 'Self-serve pricing comparison drawer', channel: 'Web App', type: 'app' },\n { name: 'Stripe checkout with annual savings toggle', channel: 'Billing Gateway', type: 'billing' },\n { name: 'Instant VAT receipt & team tax invoice', channel: 'Automated Email', type: 'email' },\n ],\n sentiment: {\n score: 8.4,\n maxScore: 10,\n label: 'ROI Positive',\n icon: Smile,\n progressColor: 'bg-chart-3',\n gaugeLabel: '8.4 / 10',\n },\n frictionPoint: '12% checkout abandonment when international VAT verification requires manual review.',\n opportunity: {\n experiment: 'Introduce annual billing 20% discount badge in checkout to lift ARPU',\n expectedImpact: '+$14.2k MRR expansion',\n },\n badgeVariant: 'warning',\n },\n {\n id: 'retention',\n stageNumber: '04',\n title: 'Retention & Advocacy',\n subtitle: 'Active Renewals & Expansion',\n icon: HeartHandshake,\n volume: '92.0%',\n volumeLabel: 'Net Retention Rate',\n volumeChange: '+3.1%',\n volumeChangeTrend: 'up',\n conversionRate: '92.0%',\n conversionLabel: 'Cohort Net Retention',\n primaryAction: {\n icon: Share2,\n text: 'Shares referral link & invites teammates',\n },\n keyMetrics: [\n { label: 'NPS Score', value: '+68', detail: 'Industry world-class' },\n { label: 'Referral Velocity', value: '1.2 invites', detail: 'Per active user/mo' },\n { label: 'Monthly Logo Churn', value: '0.8%', detail: 'Negative revenue churn' },\n ],\n touchpoints: [\n { name: 'Automated weekly performance digest', channel: 'Email Digest', type: 'email' },\n { name: 'Quarterly proactive CSM review email', channel: 'Success Touch', type: 'email' },\n { name: 'Referral program link inside settings', channel: 'Workspace Settings', type: 'app' },\n { name: 'Changelog notification & release notes', channel: 'In-App Feed', type: 'app' },\n ],\n sentiment: {\n score: 9.4,\n maxScore: 10,\n label: 'Brand Advocates',\n icon: Smile,\n progressColor: 'bg-chart-4',\n gaugeLabel: '9.4 / 10',\n },\n frictionPoint: 'Feature discovery lag for advanced multi-region latency controls on growing teams.',\n opportunity: {\n experiment: 'Launch one-click workspace invite link to increase referral velocity to 1.8',\n expectedImpact: '+35% viral coefficient',\n },\n badgeVariant: 'success',\n },\n]\n\nconst overallSummary = {\n funnelConversion: '1.18%',\n funnelConversionDetail: '1,420 Paid from 120,000 Visitors',\n timeToValue: '12 min',\n timeToValueDetail: 'Median signup to Aha moment',\n conversionVelocity: '4.2 days',\n conversionVelocityDetail: 'First touch to paid subscription',\n netRetention: '92.0%',\n netRetentionDetail: 'Expansion outpacing churn by 3.8x',\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-customer-journey-map, [ui-customer-journey-map]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCardDescriptionComponent,\n UiCardContentComponent,\n UiProgressComponent,\n UiSeparatorComponent,\n ],\n template: `\n
\n \n
\n
\n
\n

Customer Journey & Growth Lifecycle Map

\n \n Live Lifecycle\n \n
\n

\n Analyze conversion velocity, friction points, and retention cohorts across user lifecycle stages.\n

\n
\n\n \n
\n
\n @for (tf of timeframes; track tf.id) {\n \n }\n
\n\n \n @if (!isExporting()) {\n \n } @else {\n \n }\n {{ isExporting() ? 'Exported' : 'Export Journey Map' }}\n \n
\n
\n\n \n
\n
\n \n
\n
\n
\n \n
\n
\n

1. Acquisition

\n

120,000 Visitors

\n
\n
\n
\n\n \n
\n
\n 6.8%\n \n
\n \n
\n\n \n
\n
\n
\n \n
\n
\n

2. Activation

\n

8,160 Signups

\n
\n
\n
\n\n \n
\n
\n 17.4%\n \n
\n \n
\n\n \n
\n
\n
\n \n
\n
\n

3. Monetization

\n

1,420 Paid

\n
\n
\n
\n\n \n
\n
\n 92.0%\n \n
\n \n
\n\n \n
\n
\n
\n \n
\n
\n

4. Retention

\n

1,306 Advocates

\n
\n
\n
\n
\n
\n\n \n
\n @for (stage of stages; track stage.id; let idx = $index) {\n \n
\n \n
\n \n Stage {{ stage.stageNumber }}\n \n \n {{ stage.conversionLabel }}\n \n
\n\n \n
\n
\n \n
\n
\n

{{ stage.title }}

\n

{{ stage.subtitle }}

\n
\n
\n\n \n \n
\n

{{ stage.volumeLabel }}

\n

{{ stage.volume }}

\n
\n
\n \n \n {{ stage.volumeChange }}\n \n

\n Conv: {{ stage.conversionRate }}\n

\n
\n
\n
\n\n
\n \n
\n

Primary Customer Action

\n \n \n {{ stage.primaryAction.text }}\n
\n
\n\n \n
\n

Key Stage Signals

\n
\n @for (metric of stage.keyMetrics; track $index) {\n \n {{ metric.label }}\n
\n {{ metric.value }}\n @if (metric.detail) {\n ({{ metric.detail }})\n }\n
\n
\n }\n
\n
\n\n \n
\n

Active Touchpoints

\n
    \n @for (tp of stage.touchpoints; track $index) {\n
  • \n \n •\n
\n
\n {{ tp.name }}\n \n {{ tp.channel }}\n \n
\n \n }\n \n
\n\n \n\n \n
\n
\n \n \n \n Sentiment Score\n \n \n {{ stage.sentiment.gaugeLabel }} ({{ stage.sentiment.label }})\n \n
\n \n
\n\n \n
\n
\n \n \n
\n Friction Point: \n {{ stage.frictionPoint }}\n
\n
\n
\n\n \n
\n
\n \n
\n
\n Growth Experiment:\n \n {{ stage.opportunity.expectedImpact }}\n \n
\n

{{ stage.opportunity.experiment }}

\n
\n
\n
\n \n \n }\n \n\n \n
\n
\n
\n
\n

\n Lifecycle Conversion Velocity & Health Diagnostics\n

\n

\n End-to-end efficiency metrics tracking user progression speed from initial acquisition to retained\n advocacy.\n

\n
\n \n \n Healthy Velocity (+18% QoQ)\n \n
\n
\n\n
\n \n
\n
\n
\n \n \n Overall Conversion\n
\n

\n {{ overallSummary.funnelConversion }}\n

\n

{{ overallSummary.funnelConversionDetail }}

\n
\n\n
\n
\n \n Time to Value (TTV)\n
\n

\n {{ overallSummary.timeToValue }}\n

\n

{{ overallSummary.timeToValueDetail }}

\n
\n\n
\n
\n \n Avg. Conversion Velocity\n
\n

\n {{ overallSummary.conversionVelocity }}\n

\n

{{ overallSummary.conversionVelocityDetail }}

\n
\n\n
\n
\n \n Net Revenue Retention\n
\n

\n {{ overallSummary.netRetention }}\n

\n

{{ overallSummary.netRetentionDetail }}

\n
\n
\n\n \n
\n
\n Lifecycle Pass-Through Velocity\n 4 Stages Active • 120,000 Cohort Cohere\n
\n\n \n
\n
\n
\n
\n
\n
\n\n
\n
\n \n Acquisition (100%)\n
\n
\n \n Activation (6.8%)\n
\n
\n \n Monetization (17.4%)\n
\n
\n \n Retention (92.0%)\n
\n
\n
\n\n \n\n \n \n
\n \n \n
\n
\n
\n

Primary Strategic Growth Takeaway

\n \n High Priority\n \n
\n

\n The largest leverage point in the current cohort is the\n Activation-to-Monetization conversion gap (17.4%).\n Implementing contextual in-app checkout prompts at high-usage milestones and launching annual billing\n discounts is modeled to generate an additional\n +$14,200 / mo in net new MRR.\n

\n
\n
\n\n \n
\n \n \n \n `,\n})\nexport class UiCustomerJourneyMapComponent {\n @Input('class') className?: string\n\n readonly selectedTimeframe = signal('30d')\n readonly isExporting = signal(false)\n readonly selectedStageIndex = signal(null)\n\n protected readonly timeframes = timeframes\n protected readonly stages = stages\n protected readonly overallSummary = overallSummary\n\n protected readonly ArrowRight = ArrowRight\n protected readonly ArrowUpRight = ArrowUpRight\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Compass = Compass\n protected readonly CreditCard = CreditCard\n protected readonly Download = Download\n protected readonly HeartHandshake = HeartHandshake\n protected readonly Lightbulb = Lightbulb\n protected readonly Rocket = Rocket\n protected readonly ShieldAlert = ShieldAlert\n protected readonly Smile = Smile\n protected readonly TrendingUp = TrendingUp\n protected readonly Zap = Zap\n\n get rootClass(): string {\n return cn('space-y-6', this.className)\n }\n\n handleExport(): void {\n this.isExporting.set(true)\n setTimeout(() => {\n this.isExporting.set(false)\n }, 1200)\n }\n\n toggleStage(idx: number): void {\n this.selectedStageIndex.set(this.selectedStageIndex() === idx ? null : idx)\n }\n\n toggleStageKey(idx: number, event: KeyboardEvent): void {\n event.preventDefault()\n this.toggleStage(idx)\n }\n\n protected timeframeClass(id: string): string {\n return cn(\n 'focus-visible:ring-ring rounded-md px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-2 focus-visible:outline-hidden',\n this.selectedTimeframe() === id\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n protected stageCardClass(idx: number): string {\n return cn(\n 'border-border hover:border-primary/40 focus-visible:ring-ring relative flex cursor-pointer flex-col justify-between transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none',\n this.selectedStageIndex() === idx && 'ring-primary/40 ring-2',\n )\n }\n\n protected stageIconClass(idx: number): string {\n return cn(\n 'flex size-10 shrink-0 items-center justify-center rounded-lg border shadow-xs',\n idx === 0 && 'border-chart-1/30 bg-chart-1/10 text-chart-1',\n idx === 1 && 'border-chart-2/30 bg-chart-2/10 text-chart-2',\n idx === 2 && 'border-chart-3/30 bg-chart-3/10 text-chart-3',\n idx === 3 && 'border-chart-4/30 bg-chart-4/10 text-chart-4',\n )\n }\n\n protected sentimentValue(stage: JourneyStage): number {\n return (stage.sentiment.score / stage.sentiment.maxScore) * 100\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/customer-journey-map/customer-journey-map.component.ts" }, { "path": "packages/registry-angular/blocks/customer-journey-map/index.ts", "content": "export { UiCustomerJourneyMapComponent, type JourneyStage } from './customer-journey-map.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/customer-journey-map/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/progress.json", "https://uipkge.dev/r/angular/separator.json" ], "description": "Visual customer lifecycle funnel and journey map tracking user touchpoints across Acquisition, Activation, Monetization, and Retention. Features conversion rates, friction analysis, sentiment gauges, growth experiment notes, and cross-stage velocity summaries.", "categories": [ "analytics", "dashboard", "marketing" ] }