App promotion overlay

by Hugo Carneiro

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<div class="promotion-app-wrapper hidden">
  <h3>Tell people about your app</h3>
  <div class="promotion-panel">
    <div class="promotion-panel-image">
      <img src="https://fliplet.com/wp-content/uploads/2021/05/promote-icon-publish.png">
    </div>
    <div class="promotion-panel-wrapper">
      <div class="promotion-section">
        <div class="promotion-section-description">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam condimentum convallis quam, quis pretium orci vulputate quis. Integer tristique ex quis tortor posuere imperdiet.</p>
        </div>
        <div class="button-wrapper">
          <div class="btn btn-default launching-template" data-context="launch">
            Promote app launch
          </div>
          <div class="btn btn-default updating-template" data-context="update">
            Announce an update
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- MODAL FOR TEMPLATES -->
<div class="modal fade" id="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="tabbed-content-holder">
          <!-- Nav tabs -->
          <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active">
              <a...

CSS

img {
  max-width: 100%;
  height: auto;
}

.update-app-wrapper,
.promotion-app-wrapper {
  margin-bottom: 0px;
}

.app-launch-holder h3 {
  margin-bottom: 32px;
}

.promotion-panel {
  padding-bottom: 50px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.promotion-panel .promotion-panel-image {
  width: 100px;
  min-width: 100px;
  height: 100px;
  margin-right: 20px;
  overflow-x: hidden;
  overflow-y: hidden;
  border-radius: 50%;
  border: 2px solid rgb(234, 233, 236);
}

.promotion-panel .promotion-panel-wrapper {
  flex: 1;
}

.promotion-panel .promotion-panel-wrapper .button-wrapper .btn+.btn {
  margin-left: 10px;
}

.promotion-section-description p {
  font-size: 1.15em;
  opacity: 0.5;
}

.promotion-section {
  margin-bottom: 30px;
}

.promotion-section:last-child {
  margin-bottom: 0px;
}

.promotion-section .button-wrapper {
  display: flex;
}

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

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

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

.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-header .close:hover {
  background-color: rgb(234, 233, 236);
  color: rgb(51, 51, 51);
}

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

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

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

.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 .nav-tabs>li {
 ...

JavaScript

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

// Variables
var currentOrganization = window.flOrganizations || [{
  name: 'My Organization',
  region: 'eu'
}];
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 API_URL = {
  eu: 'https://api.fliplet.com',
  us: 'https://us.api.fliplet.com',
  ca: 'https://ca.api.fliplet.com'
};
var selectedType;
var typeMapping = [{
    name: 'launch',
    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...