Promote Overlay

by Hugo Carneiro

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- MODAL FOR TEMPLATES -->
<div class="modal fade" id="promotion-template-modal" tabindex="-1">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <i class="fa fa-times-thin fa-2x"></i>
        </button>
        <h3 class="modal-title" id="myModalLabel">Email template</h3>
      </div>
      <div class="modal-body">
        <div class="alert alert-warning" role="alert">
          <p class="alert-heading">The heading goes here</p>
          <ol class="alert-list"></ol>
        </div>
        <div class="tabbed-content-holder">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
              <a href="#twitter" role="tab" data-toggle="tab">Twitter / WhatsApp</a>
            </li>
            <li role="presentation">
              <a href="#facebook" role="tab" data-toggle="tab">Facebook / LinkedIn</a>
            </li>
            <li role="presentation">
              <a href="#slack" role="tab" data-toggle="tab">Slack / Teams</a>
            </li>
            <li role="presentation">
              <a href="#email" role="tab" data-toggle="tab">Email</a>
            </li>
          </ul>

          <!-- Tab panes -->
          <div class="tab-content">
            <div role="tabpanel" class="tab-pane" id="email">
              <div class="column-wrapper">
                <div class="column-row row-form">
                  <form...

CSS

.modal#promotion-template-modal .modal-dialog {
  margin: calc(5.2rem + 20px) 20px 20px;
  transform: translate(0px, 0px);
}

.modal#promotion-template-modal .modal-content {
  box-shadow: none;
  border: none;
  border-radius: 0px;
}

.modal#promotion-template-modal .modal-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 65px;
  line-height: 65px;
  border-color: rgb(227, 233, 235);
}

.modal#promotion-template-modal .modal-header h3 {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 700;
  line-height: 1.1;
  color: #474974;
  font-size: 24px;
}

.modal#promotion-template-modal .modal-header .close {
  margin-top: 0px;
  position: absolute;
  top: 0px;
  right: 0px;
  left: auto;
  width: 65px;
  height: 65px;
  border-radius: 0px;
  text-align: center;
  line-height: 1.714;
  font-size: 1.4rem;
  z-index: 1;
  pointer-events: all;
  color: rgb(153, 153, 153);
  opacity: 1;
}

.modal#promotion-template-modal .modal-header .close:hover {
  background-color: rgb(234, 233, 236);
  color: rgb(51, 51, 51);
}

.modal#promotion-template-modal .modal-body {
  padding: 30px 60px 60px 60px;
}

.modal#promotion-template-modal.in {
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-backdrop.in {
  opacity: 0;
}

.modal#promotion-template-modal .alert .alert-heading {
  margin-bottom: 15px;
}

.modal#promotion-template-modal .alert .alert-list {
  padding-left: 20px;
  margin-bottom: 0;
}

.modal#promotion-template-modal .nav-tabs {
  margin-left: -2rem;
  margin-right: -2rem;
  margin-bottom: 30px;
  padding: 0 2rem;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
  font-size: 16px;
}

.modal#promotion-template-modal .nav-tabs > li {
  margin-right: 2px;
  cursor: pointer;
}

.modal#promotion-template-modal .nav-tabs > li > a {
  color: rgba(51, 51, 51, 0.7);
  background: none;
  padding: 0 1em;
  line-height: 2.5;
  border: none;
  border-bottom: 4px solid transparent;
  border-radius: 0;
 ...

JavaScript

window.dataLayer = window.dataLayer || [];

var currentApp = (window.flUser && window.flUser.currentApp) || {
  id: 20666,
  name: 'Report 2021',
  slug: 'fliplet-my-new-app',
  productionAppId: 20667
};
var currentUser = (window.flUser && window.flUser.data) || {
  firstName: 'Hugo',
  lastName: 'Carneiro',
  fullName: 'Hugo Carneiro'
};
var selectedType = '';
var selectedChannels = [];
var typeMapping = [{
    name: 'launching',
    template: {
      heading: 'Promote app launch',
      subject: 'Launched my new app, ' + currentApp.name + '!',
      contentEmail: '<p>Hi</p><p>I would like to invite you to use our new app, ' + currentApp.name + '! <span class="description"></span></p><p>This app offers the following key features:</p><ul class="features"></ul><div class="store-links-holder hidden"><p>To install the app, download it directly from:</p><ul><li class="ios-link">Apple iOS devices: <span></span></li><li class="android-link">Android devices: <span></span></li></ul></div><div class="web-link-holder hidden"><p>To access the app on web:</p><ul><li class="web-link">Open <span></span></li></ul></div><p class="login-instructions-holder hidden">To login you must: <span class="login-instructions"></span></p><p>If you have any feedback please reply to this email.</p><p>Kind Regards,<br>' + (currentUser.fullName || (currentUser.firstName + ' ' + currentUser.lastName)) + '</p>',
      contentSocial: '<p>I just launched a new app called ' + currentApp.name + '. <span class="description"></span></p><p>It is packed with exciting features, including:</p><ul class="features"></ul><div class="store-links-holder hidden"><p>To install the app, download it directly from:</p><ul><li class="ios-link hidden">Apple iOS devices: <span></span></li><li class="android-link hidden">Android devices: <span></span></li></ul></div><div class="web-link-holder hidden"><p>To access the app on web:</p><ul><li class="web-link">Open <span></span></li></ul></div><p...