начислять лилики с анимацией и попапом

apps/payment/migrations/0033_userbonus_notified_at.py

@@ -0,0 +1,18 @@
+# Generated by Django 2.0.7 on 2019-03-27 20:54
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payment', '0032_auto_20190207_1233'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='userbonus',
+            name='notified_at',
+            field=models.DateTimeField(blank=True, null=True),
+        ),
+    ]

apps/payment/migrations/0034_auto_20190327_2055.py

@@ -0,0 +1,22 @@
+# Generated by Django 2.0.7 on 2019-03-27 20:55
+
+from django.utils import timezone
+from django.db import migrations
+
+
+def fill_bonuses_notified_at(apps, schema_editor):
+    UserBonus = apps.get_model('payment', 'UserBonus')
+    for ub in UserBonus.objects.filter(notified_at__isnull=True):
+        ub.notified_at = timezone.now()
+        ub.save()
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('payment', '0033_userbonus_notified_at'),
+    ]
+
+    operations = [
+        migrations.RunPython(fill_bonuses_notified_at),
+    ]

apps/payment/models.py

@@ -306,6 +306,7 @@ class UserBonus(models.Model):
     created_at = models.DateTimeField(auto_now_add=True)
     is_service = models.BooleanField(default=False)
     action_name = models.CharField(max_length=10, blank=True, default='')
+    notified_at = models.DateTimeField(blank=True, null=True)
 
     class Meta:
         ordering = ('created_at',)

apps/user/models.py

@@ -138,6 +138,14 @@ class User(AbstractUser):
             Q(payment__isnull=False, payment__status__in=Payment.PW_PAID_STATUSES) | Q(is_service=True),
         ).aggregate(models.Sum('amount')).get('amount__sum') or 0)
 
+    @property
+    def has_new_bonuses(self):
+        from apps.payment.models import Payment
+        last_bonus = self.bonuses.filter(
+            Q(payment__isnull=False, payment__status__in=Payment.PW_PAID_STATUSES) | Q(is_service=True),
+        ).order_by('-created_at').first()
+        return bool(last_bonus) and not last_bonus.notified_at
+
 
 @receiver(post_save, sender=User)
 def create_auth_token(sender, instance=None, created=False, **kwargs):

apps/user/templates/user/bonus-history.html

@@ -3,7 +3,6 @@
 {% load rupluralize from plural %}
 
 {% block content %}
-
 <div class="section section_gray" style="padding-bottom: 0;">
   <div class="section__center center center_sm">
     <div class="bonuses">
@@ -12,24 +11,72 @@
         <img class="bonuses__lil-coin-img" src="{% static 'img/lilcoin.png' %}" />1 LIL = 1 ₽
       </div>
     </div>
-    <div>
+    <div class="referrer-url">
-      Приглашайте друзей в Lil School и получайте {{ config.REFERRER_BONUS }}%
+      <div class="referrer-url__text-column">
-      от суммы их первой покупки. Накапливайте монеты и тратьте их на оплату школы и курсов.
+        <div class="referrer-url__title">Приглашайте друзей в Lil School</div>
-      <br>
+        <div class="referrer-url__text">
-      Просто отправьте эту ссылку, по которой ваши друзья могут присоединиться к нам:
+          Получайте {{ config.REFERRER_BONUS }}% от суммы их первой покупки.
+          <br>
+          Просто отправьте эту ссылку, по которой ваши друзья могут присоединиться к нам:
+        </div>
+      </div>
+      <div class="referrer-url__url-column">
+        <input id="referrer-url" class="referrer-url__input field__input" type="text" value="{{ referrer_url }}" readonly="readonly">
+        <button id="copy-referrer-url-btn" class="referrer-url__btn go__btn btn" data-clipboard-target="#referrer-url">Копировать ссылку</button>
+      </div>
     </div>
   </div>
 </div>
 
 <div class="section section_gray">
-  <div class="section__center center center_xs">
+  <div class="section__center center center_sm">
-    <div class="form__field field" style="margin-bottom: 40px;">
+    <div class="title" style="margin-bottom: 7px;">Как еще заработать лилики?</div>
-      <div class="referrer-url field__wrap">
+    <div>
-        <input id="referrer-url" class="referrer-url__input field__input" type="text" value="{{ referrer_url }}" readonly="readonly">
+      Накапливайте монеты и тратьте их на оплату школы и курсов. Около трети наших учеников обучаются за счет лиликов.
-        <button id="copy-referrer-url-btn" class="referrer-url__btn go__btn btn" data-clipboard-target="#referrer-url">Копировать ссылку</button>
+    </div>
+
+    <div class="bonuses-table">
+      <div class="bonuses-table__row">
+        <div>1</div>
+        <div>
+          <div class="bonuses-table__title">Заполнить профиль</div>
+          Заполните свой профиль, включая номер телефона.
+        </div>
+        <div>+50 LIL</div>
+        <div><a class="btn btn_stroke" href="{% url 'user-profile' %}">ЗАПОЛНИТЬ</a></div>
+        <div></div>
+      </div>
+      <div class="bonuses-table__row">
+        <div>2</div>
+        <div class="bonuses-table__title">
+          <div>Оплата второго месяца или курса</div>
+          Получайте бонусы при оплате последующий месяцев обучения или курсов. Чем большевы с нами, чем больше Лиликов вы получаете.
+        </div>
+        <div>+100 LIL</div>
+        <div><a class="btn btn_stroke" href="{% url 'user-profile' %}">ВЫБРАТЬ КУРС</a></div>
+        <div><img src="{% static 'img/done.png' %}" /></div>
+      </div>
+      <div class="bonuses-table__row">
+        <div>3</div>
+        <div class="bonuses-table__title">
+          <div>Видео-отзыв о Lil School</div>
+          Выкладывайте свои видео-обзоры и видео-отзывы в Инстаграм с тегом @Lil.School #LilSchool и высылаете отчет на почту school@lil.city
+        </div>
+        <div>+100 LIL</div>
+        <div><a class="btn btn_stroke" href="{% url 'user-profile' %}">ПОСМОТРЕТЬ ПРИМЕР</a></div>
+        <div></div>
+      </div>
+      <div class="bonuses-table__row">
+        <div>4</div>
+        <div>
+          <div class="bonuses-table__title">На День Рождения!</div>
+          Мы любим наших учеников, поэтому дарим лилики на день рождения.
+        </div>
+        <div>+200 LIL</div>
+        <div><a class="btn btn_stroke" href="{% url 'user-profile' %}">ЗАПОЛНИТЬ КАРТОЧКУ РЕБЕНКА</a></div>
+        <div></div>
       </div>
     </div>
-    {% include 'templates/blocks/share.html' with share_object_name="ссылкой" share_url=referrer_url share_tw_title=share_text share_tg_text=share_text %}
   </div>
 </div>
 

project/templates/blocks/lil_store_js.html

@@ -17,6 +17,8 @@
       id: '{{ request.user.id|default:'' }}',
       role: +'{{ request.user.role }}',
       photo: '{% if request.user.photo %}{{ request.user.photo.url }}{% else %}{% static 'img/user_default.jpg' %}{% endif %}',
+      hasNewBonuses: '{{ request.user.has_new_bonuses|yesno:"true,false" }}',
+      bonus: +'{{ request.user.bonus }}',
     },
     components: {},
     urls: {

project/templates/blocks/popup_bonuses_came.html

@@ -0,0 +1,18 @@
+<div class="popup bonuses-came js-popup-bonuses-came">
+    <div class="popup__wrap popup__wrap_md js-popup-wrap">
+        <button class="popup__close js-popup-close">
+            <svg class="icon icon-close">
+                <use xlink:href={% static "img/sprite.svg" %}#icon-close></use>
+            </svg>
+        </button>
+        <div class="popup__body bonuses-came__body">
+          <img src="{% static 'img/lilcoin48x54.png' %}" style="width: 60px;" />
+          <div class="bonuses-came__title">Вам начислено</div>
+          <div class="bonuses-came__bonuses">300</div>
+          <div>лиликов</div>
+          <div class="bonuses-came__text">Приглашайте друзей в Lil School и получайте 30% от суммы их первой покупки.
+            Накапливайте монеты и тратьте их на оплату школы и курсов.</div>
+          <a href="#" class="bonuses-came__link">Узнать больше про Лилики</a>
+        </div>
+    </div>
+</div>

project/templates/lilcity/index.html

@@ -48,6 +48,7 @@
       {% include "templates/blocks/popup_course_lock.html" %}
       {% include "templates/blocks/popup_subscribe.html" %}
       {% include "templates/blocks/popup_capture_email.html" %}
+      {% include "templates/blocks/popup_bonuses_came.html" %}
     </div>
     {% include 'templates/blocks/lil_store_js.html' %}
     {% block pre_app_js %}{% endblock pre_app_js %}

web/src/js/modules/popup.js

@@ -303,6 +303,11 @@ $(document).ready(function () {
         showPopup();
     }
 
+    if(window.LIL_STORE.user.id && window.LIL_STORE.user.hasNewBonuses){
+        popup = $('.js-popup-bonuses-came');
+        showPopup();
+    }
+
     function showPopup(){
         if(! popup && popupName){
             popup = $(popupName);

web/src/sass/_common.sass

@@ -4457,18 +4457,35 @@ a
 
 .referrer-url
   display: flex
+
+  +m
+    flex-direction: column
+
+  &__text-column
+    flex: 50%
+    padding-right: 16%
+    padding-top: 8px
+
+    +m
+      padding-right: 0
+
+  &__title
+    font-size: 20px
+    margin-bottom: 5px
+
+  &__url-column
+    display: flex
+    flex-direction: column
+    flex: 30%
+    align-items: center
+
   &__input
-    width: auto
     height: 40px
-    border: 1px solid #D1FF7F
+    width: 100%
-    padding: 8px
+    margin-bottom: 5px
-    border-radius: 3px 0 0 3px
-    border-right: none
 
-    &:focus
-      border: 1px solid #D1FF7F
   &__btn
-    border-radius: 0 3px 3px 0
+    width: 100%
 
 
 .bonuses
@@ -4557,3 +4574,60 @@ a
     margin-top: -20px
     color: #333333
     font-size: 12px
+
+
+.bonuses-table
+  margin-left: -110px
+  margin-top: 50px
+
+  &__row
+    display: flex
+    width: 100%
+    margin-bottom: 20px
+
+    & > div
+      font-size: 14px
+
+    & > div:nth-child(1)
+      flex: 115px
+      font-size: 40px
+      margin-top: -7px
+      text-align: center
+    & > div:nth-child(2)
+      flex: 320px
+    & > div:nth-child(3)
+      flex: 165px
+      font-size: 20px
+      font-weight: bold
+      text-align: center
+    & > div:nth-child(4)
+      flex: 220px
+
+      & .btn
+        width: 100%
+
+    & > div:nth-child(5)
+      flex: 40px
+      text-align: center
+
+  &__title
+    margin-bottom: 5px
+    font-size: 20px
+
+
+.bonuses-came
+  &__body
+    padding: 30px 30px 50px
+    text-align: center
+
+  &__title
+    margin-bottom: 5px
+    margin-top: 5px
+    font-size: 25px
+
+  &__bonuses
+    font-size: 50px
+    margin-bottom: -8px
+
+  &__text
+    margin: 40px 0