add msg bonus

src/customer/context_processors.py

@@ -1,5 +1,8 @@
 # -*- coding: utf-8 -*-
 import logging
+
+from pytils import numeral
+
 from datetime import datetime, timedelta
 from django.core.cache import cache
 from customer.models import License
@@ -86,4 +89,6 @@ def confirm_user_bonus(request):
                 message = get_display_message_for_bonus(confirm_bonus_days)
 
     context['message_bonus'] = message
+    context['message_days'] = f'{confirm_bonus_days} ' \
+                              f'{numeral.choose_plural(confirm_bonus_days, "день, дня, дней")}'
     return context

src/customer/utils.py

@@ -152,11 +152,11 @@ def get_display_message_for_bonus(day_count):
         return message
 
     if day_count == 0:
-        message = f'Сегодня последний день что бы получить <a href="#">бонус</a>'
+        message = f'Сегодня последний день что бы получить <a href="#containerBonusMsg">бонус</a>'
     if day_count > 0:
         message = f'У вас есть ещё <b>{day_count} ' \
                   f'{numeral.choose_plural(day_count, "день, дня, дней")}</b>, ' \
-                  f'чтобы получить <a href="#">бонус</a>'
+                  f'чтобы получить <a id="showBonusLink" href="#containerBonusMsg">бонус</a>'
 
     return message
 

static/css/style.css

@@ -1188,3 +1188,72 @@ input[type=number] {
 #doc_reason_date {
 	margin-left: -96px;
 }
+
+/* modal dialog bonus */
+#containerBonusMsg {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	visibility:hidden;
+	display:none;
+	background-color: rgba(22,22,22,0.5);
+	z-index: 100;
+}
+
+#containerBonusMsg:target {
+	visibility: visible;
+	display: block;
+}
+
+.modal-bonus {
+	position: relative;
+	background: #fff;
+	top: 50%;
+	left: 50%;
+	width: 800px;
+	height: 320px;
+	-ms-transform: translate(-50%,-50%);
+	-moz-transform:translate(-50%,-50%);
+	-webkit-transform: translate(-50%,-50%);
+	transform: translate(-50%,-50%);
+}
+
+.modal-bonus__wrapper {
+	padding: 5px;
+}
+
+.modal-bonus__header {
+	padding: .4em 1em;
+}
+
+.modal-bonus__title {
+	vertical-align: middle;
+	text-transform: uppercase;
+	color: #646669;
+	font-size: 18px;
+	font-weight: normal;
+	font-stretch: ultra-condensed;
+	font-family: "Arial Narrow", Arial, sans-serif;
+	display: inline-block;
+	width: 735px;
+}
+
+.modal-bonus__close-button {
+	vertical-align: middle;
+	display: inline-block;
+	background: url(../img/close.png) no-repeat top;
+	opacity: 0.5;
+	width: 22px;
+	height: 22px;
+	cursor: pointer;
+}
+
+.modal-bonus__close-button:hover {
+	opacity: 1;
+}
+
+.modal-bonus__body {
+	padding: .5em 1em;
+}

static/js/commons.js

@@ -157,3 +157,17 @@ function getUrlVars() {
     return vars;
 }
 
+(function($) {
+    $.fn.invisible = function() {
+        return this.each(function() {
+            $(this).css("visibility", "hidden");
+            $(this).hide();
+        });
+    };
+    $.fn.visible = function() {
+        return this.each(function() {
+            $(this).css("visibility", "visible");
+            $(this).show();
+        });
+    };
+}(jQuery));

static/js/profile/asset.js

@@ -1,19 +1,3 @@
-(function($) {
-    $.fn.invisible = function() {
-        return this.each(function() {
-            $(this).css("visibility", "hidden");
-            $(this).hide();
-        });
-    };
-    $.fn.visible = function() {
-        return this.each(function() {
-            $(this).css("visibility", "visible");
-            $(this).show();
-        });
-    };
-}(jQuery));
-
-
 $(document).ready(function () {
 
   var $uploadCrop,

templates/base.html

@@ -78,6 +78,33 @@
         {% endblock %}
 
         {% block content %}{% endblock %}
+
+    {% if message_bonus %}
+         <div id="containerBonusMsg">
+          <div class="modal-bonus" id="modalBonusMsg">
+            <div class="modal-bonus__wrapper">
+              <div class="modal-bonus__header">
+                <div class="modal-bonus__title">Получите бонус!</div>
+                <div class="modal-bonus__close-button modal-bonus__cleaner-btn"></div>
+              </div>
+              <div class="modal-bonus__body">
+                <p>Если Вам нравится Документор, то для Вас есть специальное предложение: бонус - ещё 2 или 3 бесплатных месяца за доверие и сотрудничество.</p>
+                <p>Сейчас у Вас осталось {{ message_days }} тестового периода. И это время в любом случае будет бесплатным.
+                  Но, если Вы приобретёте лицензию на 1 или 2 года в течение следующих {{ message_days }}, то мы подарим Вам ещё 2 или 3 месяца бесплатного времени.</p>
+                <ul>
+                 <li>Лицензия на 1 год стоит 1800 рублей, подарок к ней - ещё 2 месяца</li>
+                 <li>Лицензия на 2 года стоит 3000 рублей, подарок к ней - ещё 3 месяца</li>
+                </ul>
+                <p>Ваш тестовый период не уменьшится в любом случае. Срок новой лицензии начнётся только после того, как закончится бесплатное время.
+                Так мы сможем быстрее развивать Документор и внедрять в него новые возможности, которые будут делать Вашу работу ещё удобнее. А Вы сможете пользоваться
+                  Документором без повышения цен в течение всего оплаченного и подаренного времени.Если Вы согласны, купите лицензию <a href="{% url 'customer_order_license' %}">здесь</a></p>
+                <p>Если нет - ничего страшного ;)</p>
+              </div>
+            </div>
+          </div>
+         </div>
+    {% endif %}
+
     </div>
     {% block bottom_wide %}{% endblock %}
     {% block footer %}
@@ -128,7 +155,7 @@
         </ul>
     </div>
     {% endif %}
-</div>
+
 
 {% block common_js %}
     <script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
@@ -151,6 +178,34 @@
          window.daDataExternalApiKey = "{{ dadata_api_key }}";
      });
     </script>
+    <script>
+     $(document).ready(function() {
+         var showBonusLink = document.getElementById('showBonusLink');
+
+         showBonusLink.addEventListener('click',function (e) {
+             e.preventDefault();
+
+             $('#containerBonusMsg').visible();
+         });
+
+         $('#containerBonusMsg').on("CloseModal", function( ) {
+           $('#containerBonusMsg').invisible();
+         });
+
+      var closeButtons=document.getElementsByClassName("modal-bonus__cleaner-btn");
+
+      for (var i = 0; i < closeButtons.length; i++) {
+
+        var closeBtn = closeButtons[i];
+        closeBtn.addEventListener('click',function () {
+          $('#containerBonusMsg').trigger("CloseModal");
+        })
+
+      }
+
+     });
+    </script>
+
 {% endblock %}
 
 {% block js %}{% endblock %}