support-foo/web

<%= render 'shared/steps' %>

<%= hidden_field_tag :account_slug, @account.slug %>

<div class="container">

  <div class="page-header">
    <h1>Try it out and see how Helpful works.</h1>

    <p class="lead">Here's a quick demo of how customers will send you support
    requests and how you'll respond to them.</p>
  </div>

  <div class="row">
    <div class="col-xs-12 col-sm-5">

      <h2>1. Send a support request.</h2>

      <p>Pretend to be a customer and send an email or support request with the widget. Then watch it show up in the inbox to the right.</p>

      <div class="padding-vertical">
        <ul class="nav nav-tabs" role="tablist">
          <li class="active">
            <a href="#email" role="tab" data-toggle="tab">Email</a>
          </li>
          <li>
            <a href="#widget" role="tab" data-toggle="tab">Widget</a>
          </li>
        </ul>

        <div class="sheet">
          <div class="tab-content">
            <div class="tab-pane active" id="email">

              <form class="form-horizontal">
                <div class="form-group">

                  <div class="col-xs-2">
                    <label class="control-label">To</label>
                  </div>

                  <div class="col-xs-10">
                    <p class="form-control-static">helpful@helpful.io</p>
                  </div>

                </div>

                <div class="form-group">

                  <div class="col-xs-2">
                    <label class="control-label">From</label>
                  </div>

                  <div class="col-xs-10">
                    <input name="email[from]" required="required" type="email" class="form-control input-sm" value="<%= current_user.email %>">
                  </div>
                </div>

                <div class="form-group">

                  <div class="col-xs-2">
                    <label class="control-label">Subject</label>
                  </div>

                  <div class="col-xs-10">
                    <input name="email[subject]" required="required" type="text" class="form-control input-sm" value="Halp!">
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-xs-12">
                    <textarea name="email[body]" required="required" class="form-control input-sm" rows="3">Everything was going well, until I ran into a problem. Can you help?</textarea>
                  </div>
                </div>

                <div class="form-group">
                  <div class="col-xs-12">
                    <button class="email-send btn btn-primary pull-right">Send</button>
                  </div>
                </div>
              </form>
            </div>

            <div class="tab-pane" id="widget">
              <div class="helpful-container" style="margin-left: auto; margin-right: auto">
                <div class="helpful-embed helpful-reset" style="position: relative; width: auto; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3)">
                  <div class="helpful-question-container">
                    <div class="helpful-header">
                      <h1>How may we help you?</h1>
                    </div>
                    <textarea name="question" id="helpful-question" required="required" cols="10" rows="3" placeholder="Type your message here..."></textarea>
                    <button class="helpful-btn helpful-btn-default">Next</button>
                  </div>
                  <div class="helpful-details-container">
                    <div class="helpful-header">
                      <h1>Your contact information.</h1>
                      <img src="//assets.helpful.io/assets/widget-arrow.svg" class="helpful-icon helpful-back-button">
                    </div>
                    <p>So we can respond to your question.</p>
                    <input type="text" name="name" id="helpful-name" placeholder="Name" value="<%= current_user.name %>">
                    <input type="email" name="email" id="helpful-email" placeholder="Email" value="<%= current_user.email %>">
                    <input type="submit" class="widget-send helpful-btn helpful-btn-primary" value="Submit your Question">
                  </div>
                  <div class="helpful-thanks-container">
                    <div class="helpful-header">
                      <h1>Thanks!</h1>
                      <img src="//assets.helpful.io/assets/widget-close.svg" class="helpful-icon helpful-close-button">
                    </div>
                    <p>Have a wonderful day.</p>
                    <button class="helpful-btn helpful-btn-default helpful-btn-return">Submit another question?</button>
                  </div>
                  <div class="helpful-footer">
                    <a href="https://helpful.io/">Helpful.io</a> by <a href="https://assemblymade.com/">Assembly</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="col-xs-12 col-sm-5 col-sm-offset-2">
      <h2>2. Watch your inbox.</h2>

      <p>Here's where all of your support requests will show up. You can respond directly from the inbox by clicking on a conversation.</p>

      <div class="react"></div>
    </div>
  </div>

  <hr>

  <div class="text-right">
    <p>Looks like you're all set. Here are some next steps. Happy supporting!</p>

    <ul class="list-unstyled">
      <li class="padding-vertical">
        <%= link_to inbox_account_conversations_path(@account), class: 'btn btn-default' do %>
          Check out your new Helpful inbox
          <span class="geomicon geomicon-navigateright"></span>
        <% end %>
      </li>
      <li class="padding-vertical">
        <%= link_to edit_account_path(@account, anchor: 'team'), class: 'btn btn-link' do %>
          Invite the rest of your team
          <span class="geomicon geomicon-navigateright"></span>
        <% end %>
      </li>
      <li class="padding-vertical">
        <%= link_to docs_path, class: 'btn btn-link' do %>
          Add the widget to your site
          <span class="geomicon geomicon-navigateright"></span>
        <% end %>
      </li>
    </ul>
  </div>
</div>