/* global window, React */ // ───────────────────────────────────────────────────────────────────────── // DEDICATED RESOURCES, single-screen inline flow // ───────────────────────────────────────────────────────────────────────── // Layout: // 1. Time toggle (Part-Time / Full-Time, segmented) // 2. Roles section header (title + Onboarding Availability widget) // 3. Roles grid (glass cards, multi-select) // 4. Inline config panel (one panel, switches between selected roles via tabs) // · PT: day-rate plan tiles (1 / 5 / 10 / Custom) + savings // · FT: location / seniority / tasks form // 5. Deposit summary (refundable deposit + per-role line items) // // Per-role configuration is stored in `selection.roleConfigs[roleId]`: // FT: { location, seniority, tasks } // PT: { days: number } // base day-rate plan // ───────────────────────────────────────────────────────────────────────── const { useState: dfUseState, useEffect: dfUseEffect } = React; const DEDICATED_DEPOSIT = 250; window.DEDICATED_DEPOSIT = DEDICATED_DEPOSIT; // Day-rate plans, fixed schedule of discounts off the role's base day rate. // Custom = 11+ days, gets the deepest discount. const DAY_PLANS = [ { id: 'd1', days: 1, discount: 0, label: '1 Day', blurb: 'Ideal for urgent requests or small tasks' }, { id: 'd5', days: 5, discount: 0.10, label: '5 Days', blurb: 'or a total of {total}, giving you {pct}% off' }, { id: 'd10', days: 10, discount: 0.12, label: '10 Days',blurb: 'or a total of {total}, giving you {pct}% off' }, { id: 'custom', days: 11, discount: 0.15, label: 'Custom', blurb: 'Enter 11 days or more for tailored support' }, ]; // Per-location range multipliers applied to a role's `hourlyFrom` baseline // (which is the Philippines floor on each role card). The (lo, hi) pair spans // junior → senior so a single per-country band is shown to the visitor. // Final price is reconfirmed post-shortlist; these are indicative only. const FT_LOCATIONS = [ // 2026-05-26: hourlyFrom = fixed indicative regional floor shown on the // pill as "from £X/hour". Derived from the cheapest role's hourlyFrom (£8) // × the low multiplier of each region so no user sees a price increase // vs the previous per-role range. { id: 'uk', label: 'United Kingdom', flag: '🇬🇧', cc: 'gb', multLo: 2.8, multHi: 4.0, hourlyFrom: 22 }, { id: 'philippines', label: 'Philippines', flag: '🇵🇭', cc: 'ph', multLo: 1.0, multHi: 1.5, hourlyFrom: 8 }, { id: 'south-africa', label: 'South Africa', flag: '🇿🇦', cc: 'za', multLo: 1.3, multHi: 1.9, hourlyFrom: 10 }, ]; // Compute the indicative hourly range for a given role × location combo. // Returns null if the role has no `hourlyFrom` baseline. UI hides the range // gracefully in that case. function dfHourlyRange(role, locId) { if (!role || typeof role.hourlyFrom !== 'number') return null; const loc = FT_LOCATIONS.find(l => l.id === locId); if (!loc) return null; return { lo: Math.round(role.hourlyFrom * loc.multLo), hi: Math.round(role.hourlyFrom * loc.multHi), }; } const FT_SENIORITY = [ // 2026-05-26: `pos` = position within the location's range (0 = lo bound, // 1 = hi bound). Drives the per-seniority hourly rate displayed under // each tile. Junior anchors to the location pill "from £X/hr" floor. { id: 'junior', label: 'Junior', blurb: '1-3 yrs experience', pos: 0 }, { id: 'mid', label: 'Mid', blurb: '3-6 yrs experience', pos: 0.5 }, { id: 'senior', label: 'Senior', blurb: '6+ yrs · lead-capable', pos: 1.0 }, ]; // 2026-05-26: indicative hourly rate for role × location × seniority. // Returns a positive integer £/hr, or null if either input is missing. function dfSeniorityRate(role, locId, senId) { if (!role || typeof role.hourlyFrom !== 'number') return null; const loc = FT_LOCATIONS.find(l => l.id === locId); if (!loc) return null; const sen = FT_SENIORITY.find(s => s.id === senId); if (!sen) return null; const mult = loc.multLo + (loc.multHi - loc.multLo) * sen.pos; return Math.round(role.hourlyFrom * mult); } window.dfSeniorityRate = dfSeniorityRate; window.DEDICATED_FT_LOCATIONS = FT_LOCATIONS; window.DEDICATED_FT_SENIORITY = FT_SENIORITY; window.DEDICATED_ROLE_RECS = ROLE_RECS; // Step status retained for compat with elsewhere in the app (sidebar/summary). function dfStepStatus(selection) { const tier = selection?.tier; const roles = selection?.roles || []; const cfgs = selection?.roleConfigs || {}; const s1 = !!tier; const s2 = s1 && roles.length > 0; const s3 = s2 && roles.every(rid => { const c = cfgs[rid] || {}; if (tier === 'fulltime') return !!c.location && !!c.seniority; if (tier === 'parttime') return typeof c.days === 'number' && c.days >= 1; return false; }); return [s1, s2, s3, s3]; } window.dfStepStatus = dfStepStatus; function dfRolesForTier(service, tier) { if (!service || !tier) return []; return service.roles?.[tier] || []; } function dfRoleById(service, tier, rid) { return dfRolesForTier(service, tier).find(r => r.id === rid) || null; } window.dfRolesForTier = dfRolesForTier; window.dfRoleById = dfRoleById; // Helper: format £ with commas, no decimals. function dfMoney(n) { return '£' + Math.round(n).toLocaleString('en-GB'); } // ── TOP TIME TOGGLE ──────────────────────────────────────────────────────────────── function DFTimeToggle({ service, tier, onTier, hasSelection }) { if (!service.tiers || service.tiers.length < 2) return null; return (
{service.tiers.map(t => { const on = tier === t.id; const isFT = t.id === 'fulltime'; return ( ); })}
); } // ── PER-ROLE LOCATION RECOMMENDATIONS ───────────────────────────────────────────────────── // Philippines = delivery / creative / technical roles (cost-efficient, strong talent pool). // UK = client-facing / sales roles (native English, same time zone as UK clients). const ROLE_RECS = { 'pt-2d': { cc: 'ph', label: 'Philippines' }, 'pt-copy': { cc: 'ph', label: 'Philippines' }, 'pt-video': { cc: 'ph', label: 'Philippines' }, 'pt-motion': { cc: 'ph', label: 'Philippines' }, 'pt-3d': { cc: 'ph', label: 'Philippines' }, 'pt-web': { cc: 'ph', label: 'Philippines' }, 'pt-ai': { cc: 'ph', label: 'Philippines' }, 'pt-va': { cc: 'ph', label: 'Philippines' }, 'pt-marketer': { cc: 'ph', label: 'Philippines' }, 'pt-seo': { cc: 'ph', label: 'Philippines' }, 'pt-appt': { cc: 'ph', label: 'Philippines' }, 'ft-mkt-ops': { cc: 'ph', label: 'Philippines' }, 'ft-graphic': { cc: 'ph', label: 'Philippines' }, 'ft-copy': { cc: 'ph', label: 'Philippines' }, 'ft-video': { cc: 'ph', label: 'Philippines' }, 'ft-fullstack': { cc: 'ph', label: 'Philippines' }, 'ft-ai': { cc: 'ph', label: 'Philippines' }, 'ft-data': { cc: 'ph', label: 'Philippines' }, 'ft-devops': { cc: 'ph', label: 'Philippines' }, 'ft-uiux': { cc: 'ph', label: 'Philippines' }, 'ft-3d': { cc: 'ph', label: 'Philippines' }, 'ft-vmotion': { cc: 'ph', label: 'Philippines' }, 'ft-exec': { cc: 'ph', label: 'Philippines' }, 'ft-va': { cc: 'ph', label: 'Philippines' }, 'pt-sales': { cc: 'gb', label: 'United Kingdom' }, 'ft-sdr': { cc: 'za', label: 'South Africa' }, 'ft-csm': { cc: 'gb', label: 'United Kingdom' }, 'ft-am': { cc: 'gb', label: 'United Kingdom' }, }; // ── ROLE CARD (glass) ──────────────────────────────────────────────────────────────────── // 2026-05-28 Batch 2 (#32 + #35): // #32 — HoverPortalTip pricing tooltip on each card. PT explains tiered day rates; // FT explains indicative hourly rate, confirmed after shortlist. // #35 — Outer )}
{role.name} {/* #32: pricing info tooltip */} {window.HoverPortalTip && ( e.stopPropagation()} /> )}
{role.priceLabel}
{rec && (
Recommended: {rec.label}
)} ); } // ── PT DAY-RATE PLAN TILES ────────────────────────────────────────────────────────────── // ── Per-role commitment toggle (3 / 6 / 12 mo) ── // Reuses the .svc__commit-bar visual treatment (pill row, brand-blue // selected state, orange save chip) so the per-role pills match the // service-level commit toggle pixel-for-pixel. Lives inline in the // role-form header. function DFCommitToggle({ cfg, onPatch }) { const selected = cfg && cfg.commitId ? String(cfg.commitId) : '12'; const COMMITS = (window.COMMITS || [ { id: '3', months: 3, save: 0 }, { id: '6', months: 6, save: 20 }, { id: '12', months: 12, save: 40 }, ]); return (
{COMMITS.map(c => { const on = selected === c.id; return ( ); })}
); } function DFDayRateTiles({ role, cfg, onPatch }) { const baseRate = role.price || 0; const days = typeof cfg.days === 'number' ? cfg.days : null; let selectedPlanId = null; if (days === 1) selectedPlanId = 'd1'; else if (days === 5) selectedPlanId = 'd5'; else if (days === 10) selectedPlanId = 'd10'; else if (typeof days === 'number' && days >= 11) selectedPlanId = 'custom'; const isCustom = selectedPlanId === 'custom'; return (
How many days would you like to collaborate with our {role.name}?
Choose from the following plans:
Day rate
{DAY_PLANS.map(plan => { const on = selectedPlanId === plan.id; const explicit = role.dayRates && typeof role.dayRates[plan.id] === 'number' ? role.dayRates[plan.id] : null; const dayRate = explicit != null ? explicit : Math.round(baseRate * (1 - plan.discount)); const total = dayRate * (plan.id === 'custom' ? Math.max(11, days || 11) : plan.days); const baseDayRate = (role.dayRates && typeof role.dayRates.d1 === 'number') ? role.dayRates.d1 : baseRate; const pct = baseDayRate > 0 ? Math.round((1 - dayRate / baseDayRate) * 100) : Math.round(plan.discount * 100); let blurb = plan.blurb; if (plan.id === 'd5' || plan.id === 'd10') { blurb = blurb.replace('{total}', dfMoney(total)).replace('{pct}', pct); } return ( ); })}
{isCustom && (
onPatch({ days: Math.max(11, Math.min(22, Math.floor(Number(e.target.value) || 11))) })} /> days/month · {dfMoney((role.dayRates && role.dayRates.custom) || Math.round(baseRate * (1 - 0.15)))}/day · total {dfMoney(((role.dayRates && role.dayRates.custom) || Math.round(baseRate * (1 - 0.15))) * (days || 11))}
)}
); } // ── FT FORM ──────────────────────────────────────────────────────────────────────────────── function DFFullTimeForm({ role, cfg, onPatch }) { const recEntry = ROLE_RECS[role.id]; const recLocId = recEntry ? (FT_LOCATIONS.find(l => l.cc === recEntry.cc) || {}).id : null; return (
Configure your {role.name} placement
Where should this specialist be based?
{/* df-radio-row--loc gives all location pills uniform top padding so content aligns */}
{FT_LOCATIONS.map(loc => { const on = cfg.location === loc.id; const range = dfHourlyRange(role, loc.id); const isRec = recLocId === loc.id; return ( ); })}
Floor rate shown. Final monthly fee confirmed after shortlist, once we review the brief and seniority match.
We'll match candidates to this experience tier.
{FT_SENIORITY.map(s => { const on = cfg.seniority === s.id; const rate = dfSeniorityRate(role, cfg.location, s.id); return ( ); })}
A short brief helps us match the right candidates and price the role accurately.