← back to Butlr
views/public/wizard-4-callback.ejs
150 lines
<%- include('../partials/head', { title, meta_desc }) %>
<%- include('../partials/header') %>
<main class="wizard">
<section class="section">
<div class="wrap narrow">
<p class="muted small"><a href="#" onclick="history.back();return false">← Back</a></p>
<%- include('../partials/wizard-progress', { step }) %>
<h1>How do we reach you?</h1>
<p class="muted">When an agent answers, we'll text and call this number so you can jump in fresh.</p>
<% if (typeof errors !== 'undefined' && errors && errors.length) { %>
<div class="form-errors"><strong>Fix:</strong><ul><% errors.forEach(function(e) { %><li><%= e %></li><% }); %></ul></div>
<% var repeatBlocked = errors.some(function(e){ return String(e).indexOf('repeat_call_blocked') === 0; }); %>
<% if (repeatBlocked) { %>
<form method="POST" action="/new/submit" style="margin:12px 0 24px;padding:12px;border:1px solid var(--line);border-radius:8px;background:rgba(255,210,80,0.08)">
<%- include('../partials/wizard-state', { state, skip: [] }) %>
<input type="hidden" name="allow_repeat" value="true">
<p class="muted small" style="margin:0 0 8px"><strong>Retry anyway?</strong> Butlr already dialed this number for you and the prior call hasn't been marked failed or canceled. Click below to queue a second call to the same number.</p>
<button type="submit" class="btn primary">↻ Retry anyway — dial this number again</button>
</form>
<% } %>
<% } %>
<form method="POST" action="/new/submit" class="wizard-form" autocomplete="off">
<%- include('../partials/wizard-state', { state, skip: ['callback_name','callback_phone','callback_email','best_time_window','max_hold_minutes','max_spend_cents','consent_recording','notify_sms','notify_email','consent_terms'] }) %>
<fieldset>
<legend>Your callback</legend>
<div class="field-row">
<label class="field">
<span class="field-label">Your name <em>required</em></span>
<input type="text" name="callback_name" value="<%= state.callback_name || '' %>" maxlength="80" required>
</label>
<label class="field">
<span class="field-label">Your phone <em>required</em></span>
<input type="tel" name="callback_phone" value="<%= state.callback_phone || '' %>" maxlength="20" placeholder="we bridge here on pickup" required>
</label>
</div>
<label class="field">
<span class="field-label">Your email <span class="muted">— optional</span></span>
<input type="email" name="callback_email" value="<%= state.callback_email || '' %>" maxlength="120">
</label>
<label class="field">
<span class="field-label">Best time window <span class="muted">— optional</span></span>
<input type="text" name="best_time_window" value="<%= state.best_time_window || '' %>" maxlength="60" placeholder='e.g. "weekdays 9am-6pm PT"'>
</label>
</fieldset>
<fieldset>
<legend>Limits</legend>
<div class="field-row">
<label class="field">
<span class="field-label">Max hold time</span>
<select name="max_hold_minutes">
<option value="15" <%= state.max_hold_minutes === '15' ? 'selected' : '' %>>15 min — quick try</option>
<option value="30" <%= state.max_hold_minutes === '30' ? 'selected' : '' %>>30 min</option>
<option value="60" <%= !state.max_hold_minutes || state.max_hold_minutes === '60' ? 'selected' : '' %>>60 min (default)</option>
<option value="120" <%= state.max_hold_minutes === '120' ? 'selected' : '' %>>2 hours</option>
<option value="180" <%= state.max_hold_minutes === '180' ? 'selected' : '' %>>3 hours (insurance / IRS worst-case)</option>
</select>
</label>
<label class="field">
<span class="field-label">Max spend</span>
<select name="max_spend_cents">
<option value="100" <%= state.max_spend_cents === '100' ? 'selected' : '' %>>$1.00</option>
<option value="250" <%= state.max_spend_cents === '250' ? 'selected' : '' %>>$2.50</option>
<option value="500" <%= !state.max_spend_cents || state.max_spend_cents === '500' ? 'selected' : '' %>>$5.00 (default)</option>
<option value="1000" <%= state.max_spend_cents === '1000' ? 'selected' : '' %>>$10.00</option>
<option value="2500" <%= state.max_spend_cents === '2500' ? 'selected' : '' %>>$25.00</option>
</select>
</label>
</div>
</fieldset>
<fieldset>
<legend>Notifications & consent</legend>
<label class="check"><input type="checkbox" name="notify_sms" <%= state.notify_sms ? 'checked' : 'checked' %>> Text me when an agent picks up</label>
<label class="check"><input type="checkbox" name="notify_email" <%= state.notify_email ? 'checked' : '' %>> Email me the call summary afterwards</label>
<label class="check"><input type="checkbox" name="consent_recording" <%= state.consent_recording ? 'checked' : '' %>> Record the call (two-party-consent states get an in-call disclosure)</label>
<label class="check req"><input type="checkbox" name="consent_terms" <%= state.consent_terms ? 'checked' : '' %> required> I authorize Butlr to dial the business on my behalf and bridge me when a human picks up <em>required</em></label>
</fieldset>
<div class="review-card">
<h3>Quick review</h3>
<dl class="kv">
<dt>Calling</dt><dd><strong><%= state.business_name %></strong> · <%= state.business_phone %></dd>
<dt>For</dt><dd><%= state.goal && state.goal.length > 140 ? state.goal.slice(0,140)+'…' : state.goal %></dd>
<% if (state.account_number) { %><dt>Account</dt><dd>•••••• provided</dd><% } %>
</dl>
</div>
<fieldset style="margin:18px 0 4px;padding:14px 16px;border:1px solid var(--line);border-radius:8px;background:rgba(0,0,0,.02);">
<legend style="font:600 11px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);padding:0 8px">When</legend>
<label style="display:flex;gap:8px;align-items:center;cursor:pointer;font-size:14px;margin:6px 0">
<input type="radio" name="when_mode" value="now" checked style="margin:0"> <strong>Right now</strong> <span style="color:var(--ink-faint);font-size:12px">— dial immediately</span>
</label>
<label style="display:flex;gap:8px;align-items:center;cursor:pointer;font-size:14px;margin:6px 0">
<input type="radio" name="when_mode" value="later" style="margin:0"> <strong>Schedule for later</strong> <span style="color:var(--ink-faint);font-size:12px">— pick a date/time</span>
</label>
<label style="display:flex;gap:8px;align-items:center;cursor:pointer;font-size:14px;margin:6px 0">
<input type="radio" name="when_mode" value="recurring" style="margin:0"> <strong>Recurring</strong> <span style="color:var(--ink-faint);font-size:12px">— cron expression (advanced)</span>
</label>
<div id="when-later" style="display:none;margin-top:10px;padding-left:24px">
<label style="font:600 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)">Fire at (your local time)</label>
<input type="datetime-local" name="schedule_at" style="display:block;margin-top:4px;padding:8px;font-size:14px;border:1px solid var(--line);border-radius:5px;min-width:240px">
</div>
<div id="when-recurring" style="display:none;margin-top:10px;padding-left:24px">
<label style="font:600 10px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint)">Cron — minute hour day-of-month month day-of-week</label>
<input type="text" name="cron_expr" placeholder="0 9 * * 1 (every weekday at 9 AM)" style="display:block;margin-top:4px;padding:8px;font-size:14px;font-family:ui-monospace,Menlo,monospace;border:1px solid var(--line);border-radius:5px;min-width:320px">
<div style="font:11px var(--sans);color:var(--ink-faint);margin-top:6px">Examples: <code>0 17 * * 5</code> = every Friday 5 PM · <code>*/30 9-17 * * 1-5</code> = every 30 min on weekdays 9-5 · <code>0 10 1 * *</code> = 1st of each month at 10 AM</div>
</div>
<script>
(function(){
var laterBox = document.getElementById('when-later');
var cronBox = document.getElementById('when-recurring');
document.querySelectorAll('input[name=when_mode]').forEach(function(r){
r.addEventListener('change', function(){
laterBox.style.display = (r.value === 'later' && r.checked) ? 'block' : laterBox.style.display;
cronBox.style.display = (r.value === 'recurring' && r.checked) ? 'block' : cronBox.style.display;
if (document.querySelector('input[name=when_mode]:checked').value !== 'later') laterBox.style.display = 'none';
if (document.querySelector('input[name=when_mode]:checked').value !== 'recurring') cronBox.style.display = 'none';
});
});
})();
</script>
</fieldset>
<div class="form-actions">
<button type="submit" class="btn primary"><span id="btn-label-now">Queue this call →</span><span id="btn-label-later" style="display:none">Schedule call →</span></button>
</div>
<script>
(function(){
var labels = { now: 'btn-label-now', later: 'btn-label-later', recurring: 'btn-label-later' };
document.querySelectorAll('input[name=when_mode]').forEach(function(r){
r.addEventListener('change', function(){
document.getElementById('btn-label-now').style.display = (r.value === 'now' && r.checked) ? '' : 'none';
document.getElementById('btn-label-later').style.display = (r.value !== 'now' && r.checked) ? '' : 'none';
});
});
})();
</script>
</form>
</div>
</section>
</main>
<%- include('../partials/footer') %>