Skip to content

Commit bc81505

Browse files
pawel-cebulapawel-cebula
authored
feat: add workflows to pricing (#14133)
* feat: add workflows to pricing * Revert env and package files * remove hardcoded billingData * remove sms
1 parent a9d95eb commit bc81505

File tree

6 files changed

+53
-237
lines changed

6 files changed

+53
-237
lines changed

‎src/components/Pricing/Plans/index.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Discount } from 'components/NotProductIcons'
1212
import Link from 'components/Link'
1313
import { IconInfo } from '@posthog/icons'
1414
import { formatUSD } from '../PricingSlider/pricingSliderLogic'
15+
import pluralizeWord from 'pluralize'
1516

1617
const Heading = ({ title, subtitle, className = '' }: { title?: string; subtitle?: string; className?: string }) => {
1718
return (
@@ -117,7 +118,7 @@ export const PricingTiers = ({ plans, unit, compact = false, type, test = false,
117118
className={`${compact ? 'text-sm' : ''} ${showSubtotal ? 'col-span-3' : 'flex-grow'}`}
118119
title={
119120
index === 0 && up_to
120-
? `First ${formatCompactNumber(up_to)} ${unit}s`
121+
? `First ${formatCompactNumber(up_to)} ${pluralizeWord(unit, up_to)}`
121122
: index === 0 && !up_to
122123
? `Unlimited ${unit}s`
123124
: !up_to
@@ -133,7 +134,7 @@ export const PricingTiers = ({ plans, unit, compact = false, type, test = false,
133134
className={
134135
showSubtotal
135136
? `col-span-4`
136-
: `flex ${test ? 'shrink-0' : 'max-w-[25%] w-full min-w-[150px]'}`
137+
: `flex ${test ? 'shrink-0' : 'max-w-[40%] w-full min-w-[150px]'}`
137138
}
138139
>
139140
<Title

‎src/components/Pricing/PricingCalculator/Tabs/StandaloneAddonsTab.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { calculatePrice, formatUSD } from '../../PricingSlider/pricingSliderLogi
55
import { PricingTiers } from '../../Plans'
66
import { NumericFormat } from 'react-number-format'
77
import AutosizeInput from 'react-input-autosize'
8+
import pluralizeWord from 'pluralize'
89

910
const SliderRow = ({
1011
label = '',
@@ -71,7 +72,8 @@ const SliderRow = ({
7172
freeAllocationText
7273
) : (
7374
<>
74-
First {Math.round(freeAllocation).toLocaleString()} {unit}s free –&nbsp;
75+
First {Math.round(freeAllocation).toLocaleString()}{' '}
76+
{pluralizeWord(unit, Math.round(freeAllocation))} free –&nbsp;
7577
<em>every month!</em>
7678
</>
7779
)}
@@ -160,7 +162,9 @@ export default function StandaloneAddonsTab({ activeProduct, setVolume, setProdu
160162
return (
161163
<div className="mb-4">
162164
<div className="mb-4">
163-
<h4 className="mb-3 text-base font-semibold">{activeProduct.name}</h4>
165+
<h4 className="mb-3 text-base font-semibold">
166+
{activeProduct.productVariantName || activeProduct.name}
167+
</h4>
164168
<SliderRow
165169
label={activeProduct.billingData.unit}
166170
sliderConfig={activeProduct.slider}
@@ -230,7 +234,9 @@ export default function StandaloneAddonsTab({ activeProduct, setVolume, setProdu
230234
</p>
231235
<div className="space-y-8">
232236
<div>
233-
<h4 className="text-lg m-0">{activeProduct.name}</h4>
237+
<h4 className="text-lg m-0">
238+
{activeProduct.productVariantName || activeProduct.name}
239+
</h4>
234240
<p className="opacity-70 m-0 text-sm mb-2">
235241
<strong>{mainVolume.toLocaleString()}</strong> {activeProduct.billingData.unit}s
236242
</p>

‎src/components/Pricing/Test/FreeTier.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,12 @@ export default function FreeTier({ size = 'normal' }: { size?: 'normal' | 'large
103103
icon={<Icons.IconSparkles className={`text-blue size-5 ${size === 'large' && 'size-7'}`} />}
104104
size={size}
105105
/>
106+
<FreeTierItem
107+
name="Workflows"
108+
allocation="10K messages per channel"
109+
icon={<Icons.IconDecisionTree className={`text-teal size-5 ${size === 'large' && 'size-7'}`} />}
110+
size={size}
111+
/>
106112
</>
107113
)
108114
}

‎src/components/Pricing/Test/PricingAccordion.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ const AccordionItem = ({
6868
type,
6969
includeAddonRates,
7070
categoryName,
71+
productVariantName,
7172
}) => {
7273
const contentRef = useRef(null)
7374
const displayName = categoryName || name
@@ -168,7 +169,7 @@ const AccordionItem = ({
168169
<div className="space-y-6">
169170
{/* Main product pricing */}
170171
<div>
171-
<h5 className="text-sm font-semibold mb-3">{name}</h5>
172+
<h5 className="text-sm font-semibold mb-3">{productVariantName || name}</h5>
172173
<PricingTiers plans={billingData?.plans} type={type} unit={unit} />
173174
</div>
174175
{/* Addon products pricing */}

‎src/hooks/productData/workflows.tsx‎

Lines changed: 32 additions & 230 deletions
Original file line numberDiff line numberDiff line change
@@ -4,28 +4,53 @@ import { Link } from 'react-scroll/modules'
44

55
export const workflows = {
66
name: 'Workflows',
7+
productVariantName: 'Emails',
78
Icon: IconDecisionTree,
89
description: 'Automate workflows with your product data',
9-
handle: 'workflows',
10-
type: 'workflows',
10+
handle: 'workflows_emails',
11+
type: 'workflows_emails',
1112
slug: 'workflows',
1213
color: 'teal',
1314
colorSecondary: 'green-2',
1415
category: 'automation',
1516
status: 'beta',
16-
hideFromPricingTableAndCalculator: true,
17+
includeAddonRates: true,
1718
slider: {
1819
marks: [10000, 50000, 100000, 1000000, 10000000],
1920
min: 10000,
2021
max: 10000000,
2122
},
2223
volume: 10000,
24+
addonSliders: [
25+
{
26+
key: 'workflows_push',
27+
label: 'Push notifications',
28+
sliderConfig: {
29+
marks: [10000, 50000, 100000, 1000000, 10000000],
30+
min: 10000,
31+
max: 10000000,
32+
},
33+
volume: 10000,
34+
unit: 'notification',
35+
},
36+
{
37+
key: 'workflows_destinations',
38+
label: 'Destinations',
39+
sliderConfig: {
40+
marks: [10000, 50000, 100000, 1000000, 10000000],
41+
min: 10000,
42+
max: 10000000,
43+
},
44+
volume: 10000,
45+
unit: 'dispatch',
46+
},
47+
],
2348
seo: {
2449
title: 'Workflows – Automate workflows with product data',
2550
description: 'Trigger Slack messages, emails, or events based on live user behavior.',
2651
},
2752
overview: {
28-
title: 'Automate workflows with product data',
53+
title: 'Automate workflows with product data',
2954
description: 'Trigger Slack messages, emails, or events based on live user behavior.',
3055
textColor: 'text-black',
3156
layout: 'overlay',
@@ -310,231 +335,8 @@ export const workflows = {
310335
},
311336
],
312337
worksWith: ['experiments', 'product-analytics', 'feature-flags', 'error-tracking'],
313-
// presenterNotes: {
314-
// overview:
315-
// '<strong>Presenter notes:</strong> Track conversations, model performance, spans, costs, latency, and traces in LLM applications – all as regular PostHog events - roughly 10x cheaper than other LLM observability tools.',
316-
// },
317-
billingData: {
318-
description: 'Automate workflows with your product data.',
319-
docs_url: 'https://posthog.com/docs/workflows',
320-
image_url: 'https://res.cloudinary.com/dmukukwp6/image/upload/llm_overview_desktop_2399cc57d6.png',
321-
icon_key: 'IconDecisionTree',
322-
inclusion_only: false,
323-
contact_support: false,
324-
addons: [],
325-
name: 'Workflows',
326-
type: 'workflows',
327-
unit: 'message',
328-
usage_key: 'workflow_messages',
329-
legacy_product: false,
330-
plans: [
331-
{
332-
description: 'Automate workflows with your product data.',
333-
docs_url: 'https://posthog.com/docs/workflows',
334-
features: [
335-
{
336-
key: 'workflow_messages',
337-
name: 'Messages (email, SMS, push, or CDP events)',
338-
description: 'Send automated messages across multiple channels.',
339-
category: null,
340-
limit: null,
341-
note: null,
342-
entitlement_only: false,
343-
is_plan_default: true,
344-
unit: null,
345-
},
346-
{
347-
key: 'workflow_channels',
348-
name: 'Channels included',
349-
description: 'Email, SMS, Push, CDP',
350-
category: null,
351-
limit: null,
352-
note: null,
353-
entitlement_only: false,
354-
is_plan_default: true,
355-
unit: null,
356-
},
357-
{
358-
key: 'workflow_volume_discounts',
359-
name: 'Volume discounts',
360-
description: 'Automatic discounts as your usage scales.',
361-
category: null,
362-
limit: null,
363-
note: null,
364-
entitlement_only: false,
365-
is_plan_default: true,
366-
unit: null,
367-
},
368-
{
369-
key: 'workflow_api_builder',
370-
name: 'API & builder access',
371-
description: 'Full access to workflow builder and API.',
372-
category: null,
373-
limit: null,
374-
note: null,
375-
entitlement_only: false,
376-
is_plan_default: true,
377-
unit: null,
378-
},
379-
{
380-
key: 'workflow_triggers_logic',
381-
name: 'Advanced triggers & logic',
382-
description: 'Complex automation logic and conditional triggers.',
383-
category: null,
384-
limit: null,
385-
note: null,
386-
entitlement_only: false,
387-
is_plan_default: true,
388-
unit: null,
389-
},
390-
{
391-
key: 'workflow_logs_metrics',
392-
name: 'Logs & metrics',
393-
description: 'Monitor workflow performance and delivery.',
394-
category: null,
395-
limit: null,
396-
note: null,
397-
entitlement_only: false,
398-
is_plan_default: true,
399-
unit: null,
400-
},
401-
],
402-
free_allocation: 10000,
403-
image_url: 'https://res.cloudinary.com/dmukukwp6/image/upload/llm_overview_desktop_2399cc57d6.png',
404-
included_if: null,
405-
name: 'Free',
406-
plan_key: 'free-20250822',
407-
product_key: 'workflows',
408-
contact_support: null,
409-
unit_amount_usd: null,
410-
tiers: null,
411-
unit: 'message',
412-
},
413-
{
414-
description: 'Automate workflows with your product data.',
415-
docs_url: 'https://posthog.com/docs/workflows',
416-
features: [
417-
{
418-
key: 'workflow_messages',
419-
name: 'Messages (email, SMS, push, or CDP events)',
420-
description: 'Send automated messages across multiple channels.',
421-
category: null,
422-
limit: null,
423-
note: null,
424-
entitlement_only: false,
425-
is_plan_default: true,
426-
unit: null,
427-
},
428-
{
429-
key: 'workflow_channels',
430-
name: 'Channels included',
431-
description: 'Email, SMS, Push, CDP',
432-
category: null,
433-
limit: null,
434-
note: null,
435-
entitlement_only: false,
436-
is_plan_default: true,
437-
unit: null,
438-
},
439-
{
440-
key: 'workflow_volume_discounts',
441-
name: 'Volume discounts',
442-
description: 'Automatic discounts as your usage scales.',
443-
category: null,
444-
limit: null,
445-
note: null,
446-
entitlement_only: false,
447-
is_plan_default: true,
448-
unit: null,
449-
},
450-
{
451-
key: 'workflow_api_builder',
452-
name: 'API & builder access',
453-
description: 'Full access to workflow builder and API.',
454-
category: null,
455-
limit: null,
456-
note: null,
457-
entitlement_only: false,
458-
is_plan_default: true,
459-
unit: null,
460-
},
461-
{
462-
key: 'workflow_triggers_logic',
463-
name: 'Advanced triggers & logic',
464-
description: 'Complex automation logic and conditional triggers.',
465-
category: null,
466-
limit: null,
467-
note: null,
468-
entitlement_only: false,
469-
is_plan_default: true,
470-
unit: null,
471-
},
472-
{
473-
key: 'workflow_logs_metrics',
474-
name: 'Logs & metrics',
475-
description: 'Monitor workflow performance and delivery.',
476-
category: null,
477-
limit: null,
478-
note: null,
479-
entitlement_only: false,
480-
is_plan_default: true,
481-
unit: null,
482-
},
483-
],
484-
free_allocation: null,
485-
image_url: 'https://res.cloudinary.com/dmukukwp6/image/upload/llm_overview_desktop_2399cc57d6.png',
486-
included_if: null,
487-
name: 'Paid',
488-
plan_key: 'paid-20250822',
489-
product_key: 'workflows',
490-
contact_support: null,
491-
unit_amount_usd: null,
492-
tiers: [
493-
{
494-
current_amount_usd: '0.00',
495-
current_usage: 0,
496-
flat_amount_usd: '0',
497-
unit_amount_usd: '0',
498-
up_to: 10000,
499-
},
500-
{
501-
current_amount_usd: '0.00',
502-
current_usage: 0,
503-
flat_amount_usd: '0',
504-
unit_amount_usd: '0.005',
505-
up_to: 50000,
506-
},
507-
{
508-
current_amount_usd: '0.00',
509-
current_usage: 0,
510-
flat_amount_usd: '0',
511-
unit_amount_usd: '0.003',
512-
up_to: 100000,
513-
},
514-
{
515-
current_amount_usd: '0.00',
516-
current_usage: 0,
517-
flat_amount_usd: '0',
518-
unit_amount_usd: '0.0015',
519-
up_to: 1000000,
520-
},
521-
{
522-
current_amount_usd: '0.00',
523-
current_usage: 0,
524-
flat_amount_usd: '0',
525-
unit_amount_usd: '0.001',
526-
up_to: 10000000,
527-
},
528-
{
529-
current_amount_usd: '0.00',
530-
current_usage: 0,
531-
flat_amount_usd: '0',
532-
unit_amount_usd: '0.0005',
533-
up_to: null,
534-
},
535-
],
536-
unit: 'message',
537-
},
538-
],
338+
presenterNotes: {
339+
overview:
340+
'<strong>Presenter notes:</strong> Track conversations, model performance, spans, costs, latency, and traces in LLM applications – all as regular PostHog events - roughly 10x cheaper than other LLM observability tools.',
539341
},
540342
}

‎src/pages/workflows/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { useStaticQuery, graphql } from 'gatsby'
33
import { SlidesTemplate, createSlideConfig } from 'components/Products/Slides'
44
import { useContentData } from 'hooks/useContentData'
55

6-
const PRODUCT_HANDLE = 'workflows'
6+
const PRODUCT_HANDLE = 'workflows_emails'
77

88
const CustomPricingSlide = () => {
99
return (

0 commit comments

Comments
 (0)