feat(campaigns): integrate sequences frontend with create/edit/detail UI#147
Merged
Conversation
- Add Campaigns nav item to sidebar - Add campaigns list page with infinite scroll, search, approve/deactivate actions - Add campaign create Sheet with sequence builder (steps + email templates) - Add campaign detail page with stats, step preview, approve/deactivate buttons - Add campaign edit Sheet pre-filled from Zuko DB (preserves Apollo step IDs) - Fix buildSequenceSteps null safety for missing emailer_steps/touches/templates - Fix createSequence null safety for missing emailer_campaign in MCP response - Include inactive sequences in search (q_active: false) - Add getZukoCampaign query option for fetching stored campaign with step IDs Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Full-page editor layout matching the Apollo UI design
- Step cards with Auto/Manual Email toggle, inline wait time inputs,
subject/body fields, variable chips ({{first_name}}, {{company}}, etc.),
and Switch toggles for include signature, approved, AI personalised opener
- Editor/Analytics tab split: editor shows step builder + settings sidebar,
analytics shows stat grid (open rate, reply rate, bounce, click, opt-out)
- Right sidebar: ACCESS permissions dropdown + CAMPAIGN DETAILS stats panel
- Update Campaign button saves all step changes in-place via Apollo update API
- Prefetch both Apollo and Zuko campaign data on page load
- Extend ApolloSequence type with additional stat fields for analytics tab
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Rename /campaigns/new → /campaigns/add - Navigate to /campaigns/add on "New Campaign" click instead of opening a Sheet - Remove Sheet/CampaignForm import from CampaignsList - Swap EnvelopeIcon for MegaphoneIcon in sidebar nav and empty state Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Replace old FieldGroup layout with Apollo-style inline editor matching CampaignDetail - Editable heading input, step cards with segmented type toggle, variable chips, Switch toggles - Use ui-kit Field/Label/Input/Textarea/ErrorMessage for all form fields - Add validation for subject and body per step with inline error display - Fix post-create navigation to seed query cache and redirect to detail page - Add stable step keys, fix a11y label associations, use cn for dynamic classes - Fix resizable prop warning by using [&_textarea]:resize-none CSS selector Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…invalid on controls Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
anujeet98
requested changes
Jun 3, 2026
| const approveMutation = useMutation({ | ||
| mutationFn: (id: string) => apolloSequencesApi.approve(id), | ||
| onSuccess: () => { | ||
| queryClient.invalidateQueries({ queryKey: ['campaigns', 'infinite'] }); |
Contributor
There was a problem hiding this comment.
missing search in the key
| const deactivateMutation = useMutation({ | ||
| mutationFn: (id: string) => apolloSequencesApi.deactivate(id), | ||
| onSuccess: () => { | ||
| queryClient.invalidateQueries({ queryKey: ['campaigns', 'infinite'] }); |
Contributor
There was a problem hiding this comment.
same, missing search param in the key
| } | ||
| } | ||
|
|
||
| const EditCampaignPage = async ({ params }: EditCampaignPageProps) => { |
Contributor
There was a problem hiding this comment.
This edit page is not needed I guess, as we are already showing edit inside the details page.
anujeet98
reviewed
Jun 3, 2026
| disabled: boolean; | ||
| } | ||
|
|
||
| function StepCard({ |
Contributor
There was a problem hiding this comment.
move all the reusable components as a separate component and reuse it in CampaignForm to avoid code duplication
| }; | ||
| } | ||
|
|
||
| function formatRate(value: number | string): string { |
Contributor
There was a problem hiding this comment.
move this to a common util and reuse it in campaignList.
…mments - Extract StepFormState, StepCard, VariableChips, formatRate, helpers into campaign-shared.tsx to eliminate duplication between CampaignDetail and CampaignForm - Remove edit page as editing is inline on the detail page - Fix mutation invalidation keys to include search param in CampaignsList - Add Apollo API usage stats endpoint (backend + frontend) - Show Apollo API usage stats card in org connections settings Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
anujeet98
approved these changes
Jun 3, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Integrates the frontend for Apollo sequence management, building on the backend added in #146. Adds a full Campaigns section to the app — list,
create, detail, and edit — all wired to the existing
/integrations/apollo/sequencesAPI.What's new
Frontend
EnvelopeIcon)/campaignslist page — infinite-scroll table showing all Apollo sequences (active + inactive) with columns: Name, Status, Steps, OpenRate, Reply Rate, Delivered, Created. Includes search, a manual refresh button, and inline Approve / Deactivate actions per row
or more step cards (type, wait time/unit, email subject + HTML body). Steps can be added or removed dynamically
/campaigns/[id]detail page — shows Apollo stats (Steps, Open Rate, Reply Rate, Delivered), Approve / Deactivate buttons, and a read-onlystep list with email body preview
step/touch/template IDs so updates patch existing steps rather than recreating them
getZukoCampaignquery option — new React Query option that fetches the stored Zuko campaign (with IDs) for edit pre-fillBackend fixes
buildSequenceSteps— added?? []null safety onemailer_steps,emailer_touches, andemailer_templatesin case the Apollo MCP responseomits any of them
createSequence— guarded the DB upsert behindresult?.emailer_campaign?.idso a partial MCP response doesn't crash the endpoint; sequence isstill created in Apollo regardless
searchSequences— addedq_active: falseso inactive (draft) sequences are included in list resultsHow to test