`views/public/wizard-3-details.ejs`

72 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>What do you want done?</h1>
      <p class="muted">
        Calling <strong><%= state.business_name %></strong> at <%= state.business_phone %>. Be specific about the outcome.
      </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>
      <% } %>

      <form method="POST" action="/new/callback" class="wizard-form" autocomplete="off">
        <%- include('../partials/wizard-state', { state, skip: ['goal','notes','account_number','last4_ssn','billing_zip','date_of_birth','auth_password'] }) %>

        <fieldset>
          <legend>The goal of the call</legend>
          <label class="field">
            <span class="field-label">What should the rep do? <em>required, 8+ chars</em></span>
            <textarea name="goal" rows="5" maxlength="1500" placeholder="<%= preset && preset.defaultGoal ? preset.defaultGoal : 'Be specific. \"Request credit limit increase from $5,000 to $10,000\" is better than \"help with credit card.\"' %>" required><%= state.goal || (preset && preset.defaultGoal) || '' %></textarea>
          </label>
          <label class="field">
            <span class="field-label">Notes the rep should know <span class="muted">— optional</span></span>
            <textarea name="notes" rows="3" maxlength="500" placeholder="Context, history, prior case numbers..."><%= state.notes || '' %></textarea>
          </label>
        </fieldset>

        <fieldset>
          <legend>Account info <span class="muted">(only if the rep will ask)</span></legend>
          <p class="muted small">Masked in queue views, only revealed on the call's own detail page when you click Reveal.</p>
          <div class="field-row">
            <label class="field">
              <span class="field-label">Account number</span>
              <input type="text" name="account_number" value="<%= state.account_number || '' %>" maxlength="40" placeholder="Last 4 minimum, full if needed" autocomplete="off">
            </label>
            <label class="field">
              <span class="field-label">Last 4 of SSN</span>
              <input type="text" name="last4_ssn" value="<%= state.last4_ssn || '' %>" maxlength="4" inputmode="numeric" pattern="\d{4}" placeholder="1234" autocomplete="off">
            </label>
          </div>
          <div class="field-row">
            <label class="field">
              <span class="field-label">Billing ZIP</span>
              <input type="text" name="billing_zip" value="<%= state.billing_zip || '' %>" maxlength="5" inputmode="numeric" pattern="\d{5}" placeholder="90210" autocomplete="off">
            </label>
            <label class="field">
              <span class="field-label">Date of birth</span>
              <input type="text" name="date_of_birth" value="<%= state.date_of_birth || '' %>" maxlength="10" placeholder="MM/DD/YYYY" autocomplete="off">
            </label>
          </div>
          <label class="field">
            <span class="field-label">Verbal-auth password / security answer</span>
            <input type="text" name="auth_password" value="<%= state.auth_password || '' %>" maxlength="60" placeholder='"Maiden name: Smith"' autocomplete="off">
          </label>
        </fieldset>

        <div class="form-actions">
          <button type="submit" class="btn primary">Next: how to reach you →</button>
        </div>
      </form>
    </div>
  </section>
</main>

<%- include('../partials/footer') %>