/* global React, Icon, Btn, Avatar, PlatformIcon, Drawer, LISTS, CREATORS_DB, CAMPAIGNS, PLATFORMS, fmt */ // — Drawers: Create Plan, Send to Campaign, Add Creators — // Small segmented control used across the Create Plan form. const Seg = ({ value, onChange, options }) => (
{options.map(o => ( ))}
); // Compact numeric field used in the Targets & Goals tab. const GoalField = ({ label, value, onChange, step, prefix, suffix = '', hint, placeholder }) => (
{label && }
{prefix && {prefix}} onChange(e.target.value === '' ? 0 : Number(e.target.value))} style={{ width: '100%', paddingLeft: prefix ? 22 : 12, paddingRight: suffix ? 28 : 12 }} /> {suffix && {suffix}}
{hint && {hint}}
); // — Create Plan drawer (mirrors the existing Publish List drawer pattern) — const CreatePlanDrawer = ({ open, fromListId, onClose, onCreate, lists, defaultCpm = 150.76, currency = 'GBP' }) => { const list = lists.find(l => l.id === fromListId); const [name, setName] = React.useState(''); const cur = (window.CURRENCY && window.CURRENCY.symbol) || '£'; const [targetBudget, setTargetBudget] = React.useState(0); // 0 = no goal const [targetViews, setTargetViews] = React.useState(0); // 0 = no goal const [targetCpm, setTargetCpm] = React.useState(defaultCpm); // fixed target CPM (£), set by market const [paidMedia, setPaidMedia] = React.useState(0); const [viewsModifier, setViewsModifier] = React.useState(0); // 0 = off; e.g. 80 / 120 const [payoutBasis, setPayoutBasis] = React.useState('total'); // 'total' | 'perPost' const [payoutValue, setPayoutValue] = React.useState(0); const [agencyEnabled, setAgencyEnabled] = React.useState(false); const [agencyBasis, setAgencyBasis] = React.useState('total'); // 'total' | 'perPost' const [agencyType, setAgencyType] = React.useState('percentage'); // 'percentage' | 'flat' const [agencyValue, setAgencyValue] = React.useState(10); const [seedScope, setSeedScope] = React.useState('all'); // 'all' | 'approved' const [openListPicker, setOpenListPicker] = React.useState(false); const [chosenListId, setChosenListId] = React.useState(fromListId); const [tab, setTab] = React.useState('details'); // 'details' | 'goals' React.useEffect(() => { setChosenListId(fromListId); }, [fromListId]); React.useEffect(() => { if (open) setTargetCpm(defaultCpm); }, [open, defaultCpm]); React.useEffect(() => { if (open) { const def = list ? `${list.name} — plan` : 'New plan'; setName(def); } }, [open, list, fromListId]); const chosen = lists.find(l => l.id === chosenListId); return ( Cancel onCreate({ name, currency, targetBudget, targetViews, targetCpm, paidMedia, viewsModifier, payoutBasis, payoutValue, agencyFee: { enabled: agencyEnabled, basis: agencyBasis, type: agencyType, value: agencyValue }, listId: chosenListId, seedScope })}> Create plan }>
setName(e.target.value)} placeholder="e.g. Lumen Launch — Wave 1"/>
{chosen ? (
{chosen.name}
{chosen.creators} creators · {chosen.desc || 'no description'}
) : ( )} {openListPicker && (
{lists.map(l => ( ))}
)}
Targets & Goals
All optional — set any targets you want the plan to track against. Leave a value at 0 to skip that goal. Everything here can be edited on the plan later.
{cur + Number(targetCpm).toLocaleString((window.CURRENCY&&window.CURRENCY.locale)||'en-GB', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}
Fixed · cost per 1k views
); }; // — Send to Campaign drawer — const SendToCampaignDrawer = ({ open, plan, visibleCreators = [], onClose, onSend }) => { const [campaignName, setCampaignName] = React.useState(''); const [startDate, setStartDate] = React.useState(''); const [endDate, setEndDate] = React.useState(''); React.useEffect(() => { if (open && plan) { setCampaignName(plan.name.replace(/ — plan$/,'')); // Dates are intentionally NOT auto-populated — the user must choose them. setStartDate(''); setEndDate(''); } }, [open, plan]); if (!plan) return null; const visibleCount = visibleCreators.length; const stack = visibleCreators.slice(0, 6); const overflow = visibleCount - stack.length; const dateError = startDate && endDate && endDate < startDate; const canCreate = campaignName.trim() && startDate && endDate && !dateError; return ( Cancel onSend({ mode:'new', campaignName, startDate, endDate })}> Create campaign }> {/* Creator count summary — what this campaign will be created with */}
{visibleCount} {`Creator${visibleCount===1?'':'s'} included`}
{stack.map((c,i)=>(
))} {overflow > 0 && (
+{overflow}
)}
Creates a campaign from this plan's {visibleCount} visible creator{visibleCount===1?'':'s'}. The plan stays editable; any creators you've removed from the plan are not sent.
setCampaignName(e.target.value)} placeholder="e.g. Lumen Launch — Wave 1"/>
setStartDate(e.target.value)} max={endDate || undefined} style={{width:'100%'}}/>
setEndDate(e.target.value)} min={startDate || undefined} style={{width:'100%'}}/>
{dateError &&
End date can't be before the start date.
} ); }; // — Add Creators drawer — const AddCreatorsDrawer = ({ open, plan, onClose, onAdd }) => { const [pickedIds, setPickedIds] = React.useState(new Set()); React.useEffect(() => { if (open) setPickedIds(new Set()); }, [open]); if (!plan) return null; const existing = new Set(plan.creatorIds); const candidates = CREATORS_DB.filter(c => !existing.has(c.id)); const toggle = (id) => { const next = new Set(pickedIds); if (next.has(id)) next.delete(id); else next.add(id); setPickedIds(next); }; return ( Cancel onAdd(Array.from(pickedIds))}> Add {pickedIds.size || ''} creator{pickedIds.size===1?'':'s'} }>
Sourced from the Pandora Creator Database. Source list stays linked.
{candidates.length === 0 ? (
All creators in your lists are already in this plan.
) : (
{candidates.map(c => ( ))}
)} ); }; Object.assign(window, { CreatePlanDrawer, SendToCampaignDrawer, AddCreatorsDrawer });