Skip to content

Instantly share code, notes, and snippets.

@jimmyandrade

jimmyandrade/disparo-passo-1.html

Created May 16, 2018 21:47
Show Gist options
  • Save jimmyandrade/5a21f90c2cf4b344947ff9d8e8d9c701 to your computer and use it in GitHub Desktop.
Save jimmyandrade/5a21f90c2cf4b344947ff9d8e8d9c701 to your computer and use it in GitHub Desktop.
Download ZIP
Exemplo de código do novo passo de disparo
Raw
disparo-passo-1.html
<div class="dispatch-page">
<div class="header-box">
<div class="header-title">
<h4>Realizar ou agendar um novo disparo
</h4>
</div>
</div>
<div class="row">
<div class="stepwizard row col-xs-12 col-sm-8 col-md-6">
<div class="stepwizard-row setup-panel">
<div class="stepwizard-step">
<a class="btn btn-circle btn-default btn-primary" href="#step-2" role="button" onclick="Intercom('trackEvent', 'clicked-dispatch-import-customers-step', {previousIndex: 1});">
1 </a>
<p>Importação de clientes</p>
</div>
<div class="stepwizard-step">
<a class="btn btn-default btn-circle" disabled="disabled" href="#step-3" onclick="Intercom('trackEvent', 'clicked-dispatch-detail-step', {previousIndex: 2});" role="button">
2 </a>
<p>Detalhes do Disparo</p>
</div>
<div class="stepwizard-step">
<a class="btn btn-default btn-circle" disabled="disabled" href="#step-4" onclick="Intercom('trackEvent', 'clicked-dispatch-shelf-life', {previousIndex: 3});" role="button">
3 </a>
<p>Validade da Pesquisa</p>
</div>
<div class="stepwizard-step">
<a class="btn btn-default btn-circle" disabled="disabled" href="#step-5" onclick="Intercom('trackEvent', 'clicked-dispatch-revision', {previousIndex: 4});" role="button">
4 </a>
<p>Revisão</p>
</div>
</div>
</div>
</div>
<div class="steps">
<div class="row setup-content" id="step-1" style="display: none;">
<div class="col-xs-12 col-sm-8 col-md-6">
<div class="step-box">
<div class="step-title">
<b>01 | Escolha o idioma</b>
</div>
<div class="step-body">
<div>
</div>
</div>
</div>
<div class="step-box">
<span style="margin-top: 15px" class="spin-discard-dispatch">
<span><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span>
</span>
<button style="margin-top: 15px; display: inline-block;" class="discard-button btn btn-ts btn-ts-vermelho" onclick="Intercom('trackEvent', 'clicked-discard-dispatch'); discardDispatch();" type="button">
<span>Descartar Disparo</span>
</button>
<button class="btn btn-ts nextBtn pull-right btn-ts-azul" onclick="Intercom('trackEvent', 'clicked-dispatch-next-step');" type="button">
Próximo &gt;
</button>
</div>
</div>
</div>
<div class="row setup-content" id="step-2" style="display: block;">
<div class="col-xs-12 col-sm-8 col-md-8">
<div class="customers-add-box">
<div class="well" style="margin-top: 1em">
<p class="lead">Você já adicionou 2657 clientes<small><br>para a campanha <q>NPS Vendas</q></small></p>
<ul class="list-unstyled">
<li>2000 clientes adicionados no dia 04/05/2018</li>
<li>457 clientes adicionados no dia 16/05/2018</li>
</ul>
<button class="btn btn-default total-customer-icon btn-sm" onclick="Intercom('trackEvent', 'opened-customers-modal-on-dispatch'); openModalCustomer()">
<i aria-hidden="true" data-toggle="tooltip" title="" class="fa fa-pencil" data-original-title="Editar Clientes"></i>&nbsp;Visualizar e editar clientes</button>
<button style="" class="discard-button btn btn-sm btn-danger" onclick="Intercom('trackEvent', 'clicked-discard-dispatch'); discardDispatch()" type="button">
<span>Cancelar este disparo</span>
</button></div>
</div>
<div class="step-box">
<div class="step-title how-to-import-ask">
<b>Adicione clientes a este disparo</b>
</div>
<p>Como você gostaria de importar clientes para este disparo?</p>
<div class="step-body">
<div class="insertion">
<ul class="nav nav-tabs">
<li class="active">
<a data-target="#lotInsertionTab" data-toggle="tab" onclick="Intercom('trackEvent', 'clicked-dispatch-spreadsheet-insertion');" aria-expanded="true">
<i class="fa fa-file-excel-o"></i>&nbsp;Importando um CSV</a>
</li>
<li class="">
<a data-target="#manualInsertionTab" data-toggle="tab" onclick="Intercom('trackEvent', 'clicked-dispatch-manual-insertion');" aria-expanded="false">
<i class="fa fa-keyboard-o"></i>&nbsp;Inserindo manualmente</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="lotInsertionTab">
<div class="box-upload">
<div class="">
<p><strong>Antes de importar a planilha CSV, garanta que…</strong></p>
<ol>
<li>A <strong>primeira linha</strong> da planilha contenha os nomes das colunas.<br>Se você inserir dados de clientes, eles serão <strong>descartados</strong></li>
<li>Cada linha contenha informação sobre apenas 1 cliente e não esteja vazia;</li>
<li>A primeira coluna da planilha contenha o <b>nome</b> do cliente.</li>
<li>A segunda coluna da planilha contenha um&nbsp;<b>email válido</b>.
</li>
</ol>
</div>
<hr>
<p><button class="btn btn-sm fileinput-button" style="display: inline-block;">
<i class="glyphicon glyphicon-plus"></i>
<span>Adicionar mais clientes usando uma planilha CSV</span>
<input id="fileupload" type="file" name="Customer" accept=".csv" onclick="Intercom('trackEvent', 'clicked-dispatch-fileupload-field');" onchange="Intercom('trackEvent', 'changed-dispatch-spreadsheet-insertion');">
</button></p>
<p><label style="font-weight: normal"><input type="checkbox"> Confirmo que a planilha que estou enviando segue as <a href="#">recomendações de formato de planilha CSV</a></label></p>
</div>
</div>
<div class="tab-pane" id="manualInsertionTab">
<div class="row">
<div class="col-xs-12 col-sm-6 form-group">
<label for="manual-name">Nome</label>
<input class="form-control" id="manual-name" type="text">
</div>
<div class="col-xs-12 col-sm-6 form-group">
<label for="manual-email">Email</label>
<input class="form-control" id="manual-email" type="text">
</div>
</div>
<div class="add-manual-box">
<button class="button-add-manual btn btn-ts btn-ts-verde" onclick="Intercom('trackEvent', 'clicked-save-manual-customer-on-dispatch'); saveManualCustomer()" type="button">
Adicionar</button>
<span class="spin-add-manual"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="step-box">
<span style="margin-top: 15px" class="spin-discard-dispatch">
<span><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span>
</span>
<button id="button-next--01" onclick="Intercom('trackEvent', 'clicked-dispatch-next', {totalCustomers: 2657});" class="btn btn-primary nextBtn" type="button">Terminei de adicionar os clientes deste disparo →</button>
</div>
</div>
<div class="col-md-4">
<p style="margin-top:1.5em"><strong>Sua base de clientes está em outro sistema? <wbr>Você realiza disparos para bases muito grandes?</strong></p>
<p>Utilize a <a data-target="#apiIntegrationTab" data-toggle="tab" onclick="Intercom('trackEvent', 'clicked-dispatch-api-insertion');" aria-expanded="true">API da Tracksale <i class="fa fa-external-link"></i></a> para realizar integração com seu
CRM ou outros sistemas da sua organização e automatizar os disparos.</p>
</div>
</div>
<div class="row setup-content" id="step-3" style="display: none;">
<div class="col-xs-12 col-sm-8 col-md-6">
<div class="step-box">
<div class="step-title">
<b>02 | Detalhes do Disparo</b>
</div>
<div class="step-body">
<div class="dispatch-name">
<label for="dispatch-name">Nome do Disparo</label>
<i class="fa fa-question-circle" data-title="Nome do Disparo" data-placement="right" data-content="Para facilitar o encontro posterior do disparo, dê um nome a ele<br><br>Seu cliente não será impactado com essa informação" data-toggle="popover" data-html="true"
data-trigger="hover"></i>
<input class="form-control" name="lot_name" id="dispatch-name" placeholder="ex.: Lista da Loja X" type="text">
</div>
<div>Selecione o momento de envio desejado:</div>
<div class="alert alert-warning warning-monday-morning">
<div class="warn-icon-box"><i class="fa fa-warning"></i></div>
<div>As melhores taxas de respostas acontecem de segunda a quarta-feira no período da manhã.</div>
</div>
<div class="dispatch-input-box">
<input onchange="Intercom('trackEvent', 'changed-to-dispatch-immediately'); scheduleEvent(this);" id="dispatch-now-input--send-now" name="sendNow" value="1" type="radio" checked="">
<label for="dispatch-now-input--send-now">Desejo iniciar imediatamente o disparo</label>
</div>
<div class="dispatch-input-box">
<input onchange="Intercom('trackEvent', 'changed-to-schedule-dispatch'); scheduleEvent(this);" id="schedule-now-input--schedule" name="sendNow" value="0" type="radio">
<label for="schedule-now-input--schedule">Desejo agendar o disparo</label>
</div>
<div class="picker-box--schedule row">
<div class="col-xs-12 col-sm-6">
<label for="picker-date--schedule">Data:</label>
<input class="form-control date-time-picker" id="picker-date--schedule">
<div class="bootstrap-datetimepicker-widget usetwentyfour bottom" style="display: block; top: 34px; bottom: auto; left: 0px; right: auto;">
<ul class="list-unstyled">
<li>
<div class="datepicker">
<div class="datepicker-days" style="display: block;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev disabled" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title="Previous Month"></span></th>
<th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Month">Maio 2018</th>
<th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Month"></span></th>
</tr>
<tr>
<th class="dow">Dom</th>
<th class="dow">2ª</th>
<th class="dow">3ª</th>
<th class="dow">4ª</th>
<th class="dow">5ª</th>
<th class="dow">6ª</th>
<th class="dow">Sáb</th>
</tr>
</thead>
<tbody>
<tr>
<td data-action="selectDay" data-day="29/04/2018" class="day old disabled weekend">29</td>
<td data-action="selectDay" data-day="30/04/2018" class="day old disabled">30</td>
<td data-action="selectDay" data-day="01/05/2018" class="day disabled">1</td>
<td data-action="selectDay" data-day="02/05/2018" class="day disabled">2</td>
<td data-action="selectDay" data-day="03/05/2018" class="day disabled">3</td>
<td data-action="selectDay" data-day="04/05/2018" class="day disabled">4</td>
<td data-action="selectDay" data-day="05/05/2018" class="day disabled weekend">5</td>
</tr>
<tr>
<td data-action="selectDay" data-day="06/05/2018" class="day disabled weekend">6</td>
<td data-action="selectDay" data-day="07/05/2018" class="day disabled">7</td>
<td data-action="selectDay" data-day="08/05/2018" class="day disabled">8</td>
<td data-action="selectDay" data-day="09/05/2018" class="day disabled">9</td>
<td data-action="selectDay" data-day="10/05/2018" class="day disabled">10</td>
<td data-action="selectDay" data-day="11/05/2018" class="day disabled">11</td>
<td data-action="selectDay" data-day="12/05/2018" class="day disabled weekend">12</td>
</tr>
<tr>
<td data-action="selectDay" data-day="13/05/2018" class="day disabled weekend">13</td>
<td data-action="selectDay" data-day="14/05/2018" class="day disabled">14</td>
<td data-action="selectDay" data-day="15/05/2018" class="day disabled">15</td>
<td data-action="selectDay" data-day="16/05/2018" class="day active today">16</td>
<td data-action="selectDay" data-day="17/05/2018" class="day">17</td>
<td data-action="selectDay" data-day="18/05/2018" class="day">18</td>
<td data-action="selectDay" data-day="19/05/2018" class="day weekend">19</td>
</tr>
<tr>
<td data-action="selectDay" data-day="20/05/2018" class="day weekend">20</td>
<td data-action="selectDay" data-day="21/05/2018" class="day">21</td>
<td data-action="selectDay" data-day="22/05/2018" class="day">22</td>
<td data-action="selectDay" data-day="23/05/2018" class="day">23</td>
<td data-action="selectDay" data-day="24/05/2018" class="day">24</td>
<td data-action="selectDay" data-day="25/05/2018" class="day">25</td>
<td data-action="selectDay" data-day="26/05/2018" class="day weekend">26</td>
</tr>
<tr>
<td data-action="selectDay" data-day="27/05/2018" class="day weekend">27</td>
<td data-action="selectDay" data-day="28/05/2018" class="day">28</td>
<td data-action="selectDay" data-day="29/05/2018" class="day">29</td>
<td data-action="selectDay" data-day="30/05/2018" class="day">30</td>
<td data-action="selectDay" data-day="31/05/2018" class="day">31</td>
<td data-action="selectDay" data-day="01/06/2018" class="day new">1</td>
<td data-action="selectDay" data-day="02/06/2018" class="day new weekend">2</td>
</tr>
<tr>
<td data-action="selectDay" data-day="03/06/2018" class="day new weekend">3</td>
<td data-action="selectDay" data-day="04/06/2018" class="day new">4</td>
<td data-action="selectDay" data-day="05/06/2018" class="day new">5</td>
<td data-action="selectDay" data-day="06/06/2018" class="day new">6</td>
<td data-action="selectDay" data-day="07/06/2018" class="day new">7</td>
<td data-action="selectDay" data-day="08/06/2018" class="day new">8</td>
<td data-action="selectDay" data-day="09/06/2018" class="day new weekend">9</td>
</tr>
</tbody>
</table>
</div>
<div class="datepicker-months" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev disabled" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title="Previous Year"></span></th>
<th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Year">2018</th>
<th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Year"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span data-action="selectMonth" class="month disabled">Jan</span><span data-action="selectMonth" class="month disabled">Fev</span><span data-action="selectMonth" class="month disabled">Mar</span><span data-action="selectMonth"
class="month disabled">Abr</span><span data-action="selectMonth" class="month active">Mai</span><span data-action="selectMonth" class="month">Jun</span><span data-action="selectMonth" class="month">Jul</span><span data-action="selectMonth"
class="month">Ago</span><span data-action="selectMonth" class="month">Set</span><span data-action="selectMonth" class="month">Out</span><span data-action="selectMonth" class="month">Nov</span><span data-action="selectMonth"
class="month">Dez</span></td>
</tr>
</tbody>
</table>
</div>
<div class="datepicker-years" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev disabled" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title="Next Decade"></span></th>
<th class="picker-switch" data-action="pickerSwitch" colspan="5" title="Select Decade">2013-2024</th>
<th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Previous Decade"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span data-action="selectYear" class="year disabled">2013</span><span data-action="selectYear" class="year disabled">2014</span><span data-action="selectYear" class="year disabled">2015</span><span data-action="selectYear"
class="year disabled">2016</span><span data-action="selectYear" class="year disabled">2017</span><span data-action="selectYear" class="year active">2018</span><span data-action="selectYear" class="year">2019</span>
<span
data-action="selectYear" class="year">2020</span><span data-action="selectYear" class="year">2021</span><span data-action="selectYear" class="year">2022</span><span data-action="selectYear" class="year">2023</span><span data-action="selectYear" class="year">2024</span></td>
</tr>
</tbody>
</table>
</div>
<div class="datepicker-decades" style="display: none;">
<table class="table-condensed">
<thead>
<tr>
<th class="prev disabled" data-action="previous"><span class="glyphicon glyphicon-chevron-left" title="Previous Century"></span></th>
<th class="picker-switch" data-action="pickerSwitch" colspan="5">1999-2099</th>
<th class="next" data-action="next"><span class="glyphicon glyphicon-chevron-right" title="Next Century"></span></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="7"><span data-action="selectDecade" class="decade disabled" data-selection="2005">2000 - 2011</span><span data-action="selectDecade" class="decade disabled" data-selection="2017">2012 - 2023</span><span data-action="selectDecade"
class="decade" data-selection="2029">2024 - 2035</span><span data-action="selectDecade" class="decade" data-selection="2041">2036 - 2047</span><span data-action="selectDecade" class="decade" data-selection="2053">2048 - 2059</span>
<span
data-action="selectDecade" class="decade" data-selection="2065">2060 - 2071</span><span data-action="selectDecade" class="decade" data-selection="2077">2072 - 2083</span><span data-action="selectDecade" class="decade" data-selection="2089">2084 - 2095</span><span data-action="selectDecade"
class="decade" data-selection="2101">2096 - 2107</span><span></span><span></span><span></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
<li class="picker-switch accordion-toggle">
<table class="table-condensed">
<tbody>
<tr></tr>
</tbody>
</table>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<label for="picker-hour--schedule">Hora:</label>
<input class="form-control date-time-picker" id="picker-hour--schedule">
<div class="bootstrap-datetimepicker-widget usetwentyfour bottom" style="display: block; top: 34px; bottom: auto; left: 0px; right: auto;">
<ul class="list-unstyled">
<li class="picker-switch accordion-toggle">
<table class="table-condensed">
<tbody>
<tr></tr>
</tbody>
</table>
</li>
<li>
<div class="timepicker">
<div class="timepicker-picker">
<table class="table-condensed">
<tbody>
<tr>
<td><a href="#" tabindex="-1" title="Increment Hour" class="btn" data-action="incrementHours"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
<td class="separator"></td>
<td><a href="#" tabindex="-1" title="Increment Minute" class="btn" data-action="incrementMinutes"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
</tr>
<tr>
<td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">13</span></td>
<td class="separator">:</td>
<td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">21</span></td>
</tr>
<tr>
<td><a href="#" tabindex="-1" title="Decrement Hour" class="btn" data-action="decrementHours"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
<td class="separator"></td>
<td><a href="#" tabindex="-1" title="Decrement Minute" class="btn" data-action="decrementMinutes"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
</tr>
</tbody>
</table>
</div>
<div class="timepicker-hours" style="display: none;">
<table class="table-condensed">
<tbody>
<tr>
<td data-action="selectHour" class="hour">00</td>
<td data-action="selectHour" class="hour">01</td>
<td data-action="selectHour" class="hour">02</td>
<td data-action="selectHour" class="hour">03</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">04</td>
<td data-action="selectHour" class="hour">05</td>
<td data-action="selectHour" class="hour">06</td>
<td data-action="selectHour" class="hour">07</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">08</td>
<td data-action="selectHour" class="hour">09</td>
<td data-action="selectHour" class="hour">10</td>
<td data-action="selectHour" class="hour">11</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">12</td>
<td data-action="selectHour" class="hour">13</td>
<td data-action="selectHour" class="hour">14</td>
<td data-action="selectHour" class="hour">15</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">16</td>
<td data-action="selectHour" class="hour">17</td>
<td data-action="selectHour" class="hour">18</td>
<td data-action="selectHour" class="hour">19</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">20</td>
<td data-action="selectHour" class="hour">21</td>
<td data-action="selectHour" class="hour">22</td>
<td data-action="selectHour" class="hour">23</td>
</tr>
</tbody>
</table>
</div>
<div class="timepicker-minutes" style="display: none;">
<table class="table-condensed">
<tbody>
<tr>
<td data-action="selectMinute" class="minute">00</td>
<td data-action="selectMinute" class="minute">05</td>
<td data-action="selectMinute" class="minute">10</td>
<td data-action="selectMinute" class="minute">15</td>
</tr>
<tr>
<td data-action="selectMinute" class="minute">20</td>
<td data-action="selectMinute" class="minute">25</td>
<td data-action="selectMinute" class="minute">30</td>
<td data-action="selectMinute" class="minute">35</td>
</tr>
<tr>
<td data-action="selectMinute" class="minute">40</td>
<td data-action="selectMinute" class="minute">45</td>
<td data-action="selectMinute" class="minute">50</td>
<td data-action="selectMinute" class="minute">55</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-ts nextBtn pull-right btn-ts-azul" onclick="Intercom('trackEvent', 'clicked-dispatch-next');" type="button">Próximo &gt;
</button>
</div>
</div>
<div class="row setup-content" id="step-4" style="display: none;">
<div class="col-xs-12 col-sm-8 col-md-6">
<div class="step-box">
<div class="step-title">
<b>03 | Validade da Pesquisa</b>
</div>
<div class="step-body">
<div class="define-shelf-life-ask">Definir validade para o disparo atual? <i class="fa fa-question-circle" data-title="Validade da Pesquisa por Disparo" data-placement="right" data-content="Você pode configurar uma data de validade da pesquisa para o disparo atual. <br><br> Dessa forma caso alguém entre na pesquisa após a data configurada, aparecerá uma tela de bloqueio informando que a pequisa não está mais disponível."
data-toggle="popover" data-trigger="hover" data-html="true"></i></div>
<div>
<div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-off">
<div class="bootstrap-switch-container"><span class="bootstrap-switch-handle-on bootstrap-switch-ts-on">Sim</span><span class="bootstrap-switch-label">&nbsp;</span><span class="bootstrap-switch-handle-off bootstrap-switch-ts-off">Não</span><input type="checkbox" name="finish_psl"></div>
</div>
</div>
<div class="picker-box--shelf-life row" style="display: none;">
<div class="col-xs-12 col-sm-6">
<label for="picker-date--shelf-life">Data :</label>
<input class="form-control date-time-picker" id="picker-date--shelf-life">
</div>
<div class="col-xs-12 col-sm-6">
<label for="picker-hour--shelf-life">Hora :</label>
<input class="form-control date-time-picker" id="picker-hour--shelf-life">
<div class="bootstrap-datetimepicker-widget usetwentyfour bottom" style="display: block; top: 34px; bottom: auto; left: 0px; right: auto;">
<ul class="list-unstyled">
<li class="picker-switch accordion-toggle">
<table class="table-condensed">
<tbody>
<tr></tr>
</tbody>
</table>
</li>
<li>
<div class="timepicker">
<div class="timepicker-picker">
<table class="table-condensed">
<tbody>
<tr>
<td><a href="#" tabindex="-1" title="Increment Hour" class="btn" data-action="incrementHours"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
<td class="separator"></td>
<td><a href="#" tabindex="-1" title="Increment Minute" class="btn" data-action="incrementMinutes"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
</tr>
<tr>
<td><span class="timepicker-hour" data-time-component="hours" title="Pick Hour" data-action="showHours">13</span></td>
<td class="separator">:</td>
<td><span class="timepicker-minute" data-time-component="minutes" title="Pick Minute" data-action="showMinutes">21</span></td>
</tr>
<tr>
<td><a href="#" tabindex="-1" title="Decrement Hour" class="btn" data-action="decrementHours"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
<td class="separator"></td>
<td><a href="#" tabindex="-1" title="Decrement Minute" class="btn" data-action="decrementMinutes"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
</tr>
</tbody>
</table>
</div>
<div class="timepicker-hours" style="display: none;">
<table class="table-condensed">
<tbody>
<tr>
<td data-action="selectHour" class="hour">00</td>
<td data-action="selectHour" class="hour">01</td>
<td data-action="selectHour" class="hour">02</td>
<td data-action="selectHour" class="hour">03</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">04</td>
<td data-action="selectHour" class="hour">05</td>
<td data-action="selectHour" class="hour">06</td>
<td data-action="selectHour" class="hour">07</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">08</td>
<td data-action="selectHour" class="hour">09</td>
<td data-action="selectHour" class="hour">10</td>
<td data-action="selectHour" class="hour">11</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">12</td>
<td data-action="selectHour" class="hour">13</td>
<td data-action="selectHour" class="hour">14</td>
<td data-action="selectHour" class="hour">15</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">16</td>
<td data-action="selectHour" class="hour">17</td>
<td data-action="selectHour" class="hour">18</td>
<td data-action="selectHour" class="hour">19</td>
</tr>
<tr>
<td data-action="selectHour" class="hour">20</td>
<td data-action="selectHour" class="hour">21</td>
<td data-action="selectHour" class="hour">22</td>
<td data-action="selectHour" class="hour">23</td>
</tr>
</tbody>
</table>
</div>
<div class="timepicker-minutes" style="display: none;">
<table class="table-condensed">
<tbody>
<tr>
<td data-action="selectMinute" class="minute">00</td>
<td data-action="selectMinute" class="minute">05</td>
<td data-action="selectMinute" class="minute">10</td>
<td data-action="selectMinute" class="minute">15</td>
</tr>
<tr>
<td data-action="selectMinute" class="minute">20</td>
<td data-action="selectMinute" class="minute">25</td>
<td data-action="selectMinute" class="minute">30</td>
<td data-action="selectMinute" class="minute">35</td>
</tr>
<tr>
<td data-action="selectMinute" class="minute">40</td>
<td data-action="selectMinute" class="minute">45</td>
<td data-action="selectMinute" class="minute">50</td>
<td data-action="selectMinute" class="minute">55</td>
</tr>
</tbody>
</table>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-ts nextBtn pull-right btn-ts-azul" onclick="Intercom('trackEvent', 'clicked-dispatch-next');" type="button">Próximo &gt;
</button>
</div>
</div>
<div class="row setup-content " id="step-5" style="display: none;">
<div class="col-xs-12 col-sm-8 col-md-6">
<div class="step-box">
<div class="step-title">
<b>04 | Revisão</b>
</div>
<div class="step-body">
<div class="revision-box">
<span><b>Agendamento:</b></span>
<table>
<tbody>
<tr>
<td>Disparo:</td>
<td>
<b><span id="schedule-time-label">Imediato</span></b>
</td>
</tr>
<tr>
<td>Validade</td>
<td>
<b>
<span id="shelf-life-time-label">Indefinida</span>
</b>
</td>
</tr>
</tbody>
</table>
<span><b>Email:</b></span>
<table>
<tbody>
<tr>
<td>Disparo:</td>
<td style="padding-bottom: 0">
<a data-target="#emailModal" data-toggle="modal" onclick="Intercom('trackEvent', 'clicked-email-modal-on-dispatch');">
Ver layout de email</a>
</td>
</tr>
<tr>
<td></td>
<td style="padding-top: 0">
<span>
<span class="spin-send-mail">
<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
</span>
<a onclick="Intercom('trackEvent', 'clicked-on-test-dispatch'); testDispatch()" class="recv-send-mail">
Receber email de teste em luiz.fernando1@tracksale.co </a>
</span>
</td>
</tr>
</tbody>
</table>
<!-- Modal Email -->
<div class="modal fade" id="emailModal" tabindex="-1" role="dialog" aria-labelledby="emailModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<link rel="stylesheet" type="text/css" href="https://tracksale.co/v2/css/font-awesome.min.css?v=4.7.0">
<div style="text-align: center; border-radius: 4px; width: 640px; margin: 0 auto; box-shadow: inset 0 0 0 1px #b6c5ce,0 0 5px 1px rgba(0,0,0,.1);">
<div style="padding: 6px 8px; text-align: left; background: linear-gradient(#f0f0f0,#e9e9e9); border: 1px solid #b6c5ce; border-radius: 3px 3px 0 0;">
<div style="width: 8px; height: 8px; border: 1px solid #f25156; background: #f25156; border-radius: 50%; margin-right: 3px; display: inline-block;"></div>
<div style="width: 8px; height: 8px; border: 1px solid #ffc109; background: #ffc109; border-radius: 50%; margin-right: 3px; display: inline-block;"></div>
<div style="width: 8px; height: 8px; border: 1px solid #0ed439; background: #0ed439; border-radius: 50%; margin-right: 3px; display: inline-block;"></div>
</div>
<div style="border-bottom: 1px solid; padding: 8px; text-align: left; border-color: #B6C5CE;">
<span>De:
<span style="font-weight: bold;">
Pear</span> &lt;pear40@tracksale.com.br&gt;
</span>
</div>
<div style="border-bottom: 1px solid; padding: 8px; text-align: left; border-color: #B6C5CE;">
<span>Assunto: <span style="font-weight: bold;">Sua experiência com a Pear</span></span>
</div>
<div style="padding: 8px;">
<iframe src="https://pear40.tracksale.co/email/preview?code=310" frameborder="0" scrolling="no" id="iframe" onload="resizeIframe(this);" width="580px" style="height: 994px;"></iframe>
</div>
</div>
<style>
.top,
.bottom {
border: 0;
background: none;
}
</style>
</div>
</div>
</div>
</div>
<!-- Modal Email Reminder -->
<div class="modal fade" id="emailReminderModal" tabindex="-1" role="dialog" aria-labelledby="emailReminderModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<link rel="stylesheet" type="text/css" href="https://tracksale.co/v2/css/font-awesome.min.css?v=4.7.0">
<div style="text-align: center; border-radius: 4px; width: 640px; margin: 0 auto; box-shadow: inset 0 0 0 1px #b6c5ce,0 0 5px 1px rgba(0,0,0,.1);">
<div style="padding: 6px 8px; text-align: left; background: linear-gradient(#f0f0f0,#e9e9e9); border: 1px solid #b6c5ce; border-radius: 3px 3px 0 0;">
<div style="width: 8px; height: 8px; border: 1px solid #f25156; background: #f25156; border-radius: 50%; margin-right: 3px; display: inline-block;"></div>
<div style="width: 8px; height: 8px; border: 1px solid #ffc109; background: #ffc109; border-radius: 50%; margin-right: 3px; display: inline-block;"></div>
<div style="width: 8px; height: 8px; border: 1px solid #0ed439; background: #0ed439; border-radius: 50%; margin-right: 3px; display: inline-block;"></div>
</div>
<div style="border-bottom: 1px solid; padding: 8px; text-align: left; border-color: #B6C5CE;">
<span>De:
<span style="font-weight: bold;">
Pear</span> &lt;pear40@tracksale.com.br&gt;
</span>
</div>
<div style="border-bottom: 1px solid; padding: 8px; text-align: left; border-color: #B6C5CE;">
<span>Assunto: <span style="font-weight: bold;">Sua experiência com a Pear</span></span>
</div>
<div style="padding: 8px;">
<iframe src="https://pear40.tracksale.co/reminder/preview?code=310" frameborder="0" scrolling="no" id="iframe" onload="resizeIframe(this);" width="580px" style="height: 994px;"></iframe>
</div>
</div>
<style>
.top,
.bottom {
border: 0;
background: none;
}
</style>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="step-box">
<div style="margin-top: 3px" id="spin-do-dispatch">
<span><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></span>
</div>
<span id="do-dispatch-button" onclick="Intercom('trackEvent', 'clicked-submit-dispatch'); submitDispatch()" class="dispatch-event btn btn-success" style="float: right;">
<span>Realizar Disparo</span>
</span>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment