feat(workflows): offer a switch from the sandbox sender

products/workflows/frontend/Workflows/WorkflowSandboxSwitchBanner.stories.tsx

@@ -0,0 +1,159 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import { BindLogic } from 'kea'
+
+import { FEATURE_FLAGS } from 'lib/constants'
+
+import { useStorybookMocks } from '~/mocks/browser'
+import { AccessControlLevel } from '~/types'
+
+import type { HogFlow } from './hogflows/types'
+import { NEW_WORKFLOW, WorkflowLogicProps, workflowLogic } from './workflowLogic'
+import { WorkflowSandboxSwitchBanner } from './WorkflowSandboxSwitchBanner'
+
+const LOGIC_PROPS: WorkflowLogicProps = { id: 'storybook-sandbox-switch-banner' }
+
+const SANDBOX_SENDER = {
+    id: 7,
+    kind: 'email',
+    display_name: 'Acme via PostHog <sandbox@example.com>',
+    config: { provider: 'sandbox', name: 'Acme via PostHog', email: 'sandbox@example.com', verified: true },
+    created_at: '2026-08-18T00:00:00Z',
+}
+
+const OWN_SENDER = {
+    id: 8,
+    kind: 'email',
+    display_name: 'Acme <hello@acme.example.com>',
+    config: {
+        provider: 'ses',
+        name: 'Acme',
+        email: 'hello@acme.example.com',
+        domain: 'acme.example.com',
+        verified: true,
+    },
+    created_at: '2026-08-18T00:00:00Z',
+}
+
+const SECOND_OWN_SENDER = {
+    id: 9,
+    kind: 'email',
+    display_name: 'Acme support <support@acme.example.com>',
+    config: {
+        provider: 'ses',
+        name: 'Acme support',
+        email: 'support@acme.example.com',
+        domain: 'acme.example.com',
+        verified: true,
+    },
+    created_at: '2026-08-18T00:00:00Z',
+}
+
+const SANDBOX_WORKFLOW: HogFlow = {
+    ...NEW_WORKFLOW,
+    id: LOGIC_PROPS.id!,
+    name: 'Welcome email',
+    user_access_level: AccessControlLevel.Editor,
+    actions: [
+        {
+            id: 'trigger',
+            type: 'trigger',
+            name: 'New account created',
+            description: '',
+            config: { type: 'event', filters: {} },
+        },
+        {
+            id: 'email',
+            type: 'function_email',
+            name: 'Send welcome email',
+            description: '',
+            config: {
+                template_id: 'template-email',
+                inputs: {
+                    email: {
+                        value: {
+                            to: { email: '{{ person.properties.email }}', name: '' },
+                            from: { integrationId: SANDBOX_SENDER.id },
+                            subject: 'Welcome aboard',
+                            text: 'Your account is ready.',
+                            html: '<p>Your account is ready.</p>',
+                        },
+                        templating: 'liquid',
+                    },
+                },
+            },
+        },
+        { id: 'exit', type: 'exit', name: 'Exit', description: '', config: { reason: 'Completed' } },
+    ],
+    edges: [
+        { from: 'trigger', to: 'email', type: 'continue' },
+        { from: 'email', to: 'exit', type: 'continue' },
+    ],
+}
+
+type StoryArgs = {
+    ownSenders: (typeof OWN_SENDER)[]
+    narrow?: boolean
+    constrained?: boolean
+}
+
+const meta: Meta<StoryArgs> = {
+    title: 'Products/Workflows/Sandbox switch banner',
+    parameters: {
+        layout: 'padded',
+        viewMode: 'story',
+        featureFlags: [FEATURE_FLAGS.WORKFLOWS_SANDBOX_SENDER],
+        testOptions: { waitForSelector: '[data-attr="workflow-sandbox-switch-sender"]' },
+    },
+}
+export default meta
+
+const Template: StoryFn<StoryArgs> = ({ ownSenders, narrow, constrained }): JSX.Element => {
+    useStorybookMocks({
+        get: {
+            '/api/environments/:team_id/hog_flows/:id/': SANDBOX_WORKFLOW,
+            '/api/projects/:team_id/integrations/': { results: [SANDBOX_SENDER, ...ownSenders] },
+            '/api/projects/:team_id/hog_function_templates': { count: 0, results: [] },
+            '/api/environments/:team_id/messaging_categories': { count: 0, results: [] },
+        },
+    })
+    return (
+        <BindLogic logic={workflowLogic} props={LOGIC_PROPS}>
+            <div className={narrow ? 'w-[520px]' : 'max-w-4xl'}>
+                <div className={constrained ? 'h-[400px] flex flex-col' : undefined}>
+                    <WorkflowSandboxSwitchBanner {...LOGIC_PROPS} />
+                    {constrained && <div className="grow min-h-[400px]" />}
+                </div>
+            </div>
+        </BindLogic>
+    )
+}
+
+export const OneOwnSender = Template.bind({})
+OneOwnSender.args = { ownSenders: [OWN_SENDER] }
+
+export const OneOwnSenderNarrow = Template.bind({})
+OneOwnSenderNarrow.args = { ownSenders: [OWN_SENDER], narrow: true }
+
+export const ConstrainedScene = Template.bind({})
+ConstrainedScene.args = { ownSenders: [OWN_SENDER], constrained: true }
+
+export const ConstrainedSceneNarrow = Template.bind({})
+ConstrainedSceneNarrow.args = { ownSenders: [OWN_SENDER], constrained: true, narrow: true }
+
+export const OneOwnSenderLongAddressNarrow = Template.bind({})
+OneOwnSenderLongAddressNarrow.args = {
+    ownSenders: [
+        {
+            ...OWN_SENDER,
+            display_name: 'Acme notifications <notifications-and-billing@mail.acme.example.com>',
+            config: { ...OWN_SENDER.config, email: 'notifications-and-billing@mail.acme.example.com' },
+        },
+    ],
+    narrow: true,
+}
+
+export const SeveralOwnSenders = Template.bind({})
+SeveralOwnSenders.args = { ownSenders: [OWN_SENDER, SECOND_OWN_SENDER] }
+
+export const SeveralOwnSendersNarrow = Template.bind({})
+SeveralOwnSendersNarrow.args = { ownSenders: [OWN_SENDER, SECOND_OWN_SENDER], narrow: true }

products/workflows/frontend/Workflows/WorkflowSandboxSwitchBanner.tsx

@@ -0,0 +1,36 @@
+import { useActions, useValues } from 'kea'
+
+import { LemonBanner } from '@posthog/lemon-ui'
+
+import { WorkflowLogicProps } from './workflowLogic'
+import { workflowSandboxSwitchBannerLogic } from './workflowSandboxSwitchBannerLogic'
+import { WorkflowSandboxSwitchSenderButton } from './WorkflowSandboxSwitchSenderButton'
+
+export function WorkflowSandboxSwitchBanner(props: WorkflowLogicProps): JSX.Element | null {
+    const logic = workflowSandboxSwitchBannerLogic(props)
+    const { bannerVisible, verifiedOwnSenders, switchDisabledReason } = useValues(logic)
+    const { switchToOwnSender } = useActions(logic)
+
+    if (!bannerVisible) {
+        return null
+    }
+
+    return (
+        <LemonBanner type="info" alignItems="start" className="@container shrink-0">
+            <div
+                className="flex flex-col gap-2 @xl:flex-row @xl:items-center"
+                data-attr="workflow-sandbox-switch-banner"
+            >
+                <span className="min-w-0 flex-1">
+                    Your project has a verified email sender. This workflow still sends from the sandbox sender, which
+                    delivers only to verified members of your organization.
+                </span>
+                <WorkflowSandboxSwitchSenderButton
+                    senders={verifiedOwnSenders}
+                    disabledReason={switchDisabledReason}
+                    onSwitch={switchToOwnSender}
+                />
+            </div>
+        </LemonBanner>
+    )
+}

products/workflows/frontend/Workflows/WorkflowSandboxSwitchSenderButton.tsx

@@ -0,0 +1,43 @@
+import { LemonButton, LemonMenu } from '@posthog/lemon-ui'
+
+import { IntegrationType } from '~/types'
+
+export function WorkflowSandboxSwitchSenderButton({
+    senders,
+    disabledReason,
+    onSwitch,
+}: {
+    senders: IntegrationType[]
+    disabledReason: string | null
+    onSwitch: (integrationId: number) => void
+}): JSX.Element {
+    const buttonProps = {
+        type: 'secondary' as const,
+        size: 'small' as const,
+        disabledReason,
+        'data-attr': 'workflow-sandbox-switch-sender',
+        className: 'max-w-full self-start @xl:self-auto',
+    }
+
+    if (senders.length === 1) {
+        const label = `Switch to ${senders[0].config.email}`
+        return (
+            <LemonButton {...buttonProps} truncate tooltip={label} onClick={() => onSwitch(senders[0].id)}>
+                {label}
+            </LemonButton>
+        )
+    }
+
+    return (
+        <LemonMenu
+            items={senders.map((sender) => ({
+                label: sender.display_name,
+                onClick: () => onSwitch(sender.id),
+                'data-attr': 'workflow-sandbox-switch-sender-option',
+            }))}
+            placement="bottom-end"
+        >
+            <LemonButton {...buttonProps}>Switch sender</LemonButton>
+        </LemonMenu>
+    )
+}

products/workflows/frontend/Workflows/WorkflowScene.tsx

@@ -51,6 +51,7 @@ import { WorkflowInvocations } from './WorkflowInvocations'
 import { WorkflowLogicProps, workflowLogic } from './workflowLogic'
 import { WorkflowMetrics } from './WorkflowMetrics'
 import { WorkflowRevisions } from './WorkflowRevisions'
+import { WorkflowSandboxSwitchBanner } from './WorkflowSandboxSwitchBanner'
 import { WorkflowSceneHeader } from './WorkflowSceneHeader'
 import { WorkflowSceneLogicProps, WorkflowTab, workflowSceneLogic } from './workflowSceneLogic'
 import { TRIGGER_PREFILL_PARAM } from './workflowTriggerPrefill'
@@ -255,6 +256,7 @@ export function WorkflowScene(props: WorkflowSceneLogicProps): JSX.Element {
                 <WorkflowEmailPauseBanner />
                 {isSavedWorkflow && <WorkflowBroadcastMoveBanner id={props.id!} />}
                 {!isSavedWorkflow && <WorkflowAiEmailDraftStatus {...workflowProps} />}
+                <WorkflowSandboxSwitchBanner {...workflowProps} />
                 {suggestionsAvailable && isSavedWorkflow && <WorkflowSuggestionsNotice id={props.id!} />}
                 {/* Only show Logs and Metrics tabs if the workflow has already been created */}
                 {!props.id || props.id === 'new' ? (