LIL-691 Доработка реферального профиля

7 years ago · ca88f3b705
parent 6f926c83b4
commit ca88f3b705
12 changed files with 102 additions and 32 deletions
--- a/apps/user/templates/blocks/profile-menu.html
+++ b/apps/user/templates/blocks/profile-menu.html
@ -7,8 +7,6 @@
         href="{% url 'user-edit-notifications' %}">Уведомления</a>
      <a class="menu__link {% if active == 'payments' %}active{% endif %}"
         href="{% url 'user-edit-payments' %}">Платежи</a>
-      <!--<a class="menu__link {% if active == 'bonuses' %}active{% endif %}"-->
-         <!--href="{% url 'user-bonuses' %}">Бонусы</a>-->
    </div>
  </div>
 </div>
--- a/apps/user/templates/user/bonus-history.html
+++ b/apps/user/templates/user/bonus-history.html
@ -6,26 +6,32 @@
 {% include "../blocks/profile-menu.html" with active="bonuses" %}

 <div class="section section_gray" style="padding-bottom: 0;">
-  <div class="section__center center center_xs">
+  <div class="section__center center center_sm">
    <div class="title title_sm">Бонусы</div>
-    <div class="text">У вас {{ request.user.bonus|rupluralize:"бонус,бонуса,бонусов" }}</div>
+    <div class="bonuses">
+      <div class="bonuses__count">У вас <b>{{ request.user.bonus }}</b> Lil</div>
+      <div class="bonuses__course">
+        <img class="bonuses__lil-coin-img" src="{% static 'img/lilcoin.png' %}" />1 Lil = 1 Р
+      </div>
+    </div>
    <div>
-      Вы можете пригласить своих друзей в наш сервис, за это
-      {% if config.REFERRER_BONUS == config.REFERRAL_BONUS %}
-      вы и они получите по {{ config.REFERRER_BONUS }}%
-      {% else %}
-      вы получите {{ config.REFERRER_BONUS }}%, а они {{ config.REFERRAL_BONUS }}%
-      {% endif %}
-      от суммы их первой покупки на бонусный счет. Приглашайте друзей, накапливайте бонусные баллы, тратьте бонусы
-      на приобретения доступа к школе и курсам.
+      Приглашайте друзей в Lil School и получайте {{ config.REFERRER_BONUS }}%
+      от суммы их первой покупки. Накапливайте монеты и тратьте их на оплату школы и курсов.
      <br>
-      Просто отправьте им эту ссылку, по которой они смогут зарегистрироваться:
+      Просто отправьте эту ссылку, по которой ваши друзья могут присоединиться к нам:
    </div>
-    <div class="form__field field" style="margin-bottom: 0;">
-      <div class="field__wrap">
-        <input id="referrer-url" class="field__input" type="text" value="{{ referrer_url }}" readonly="readonly">
+  </div>
+</div>
+
+<div class="section section_gray">
+  <div class="section__center center center_xs">
+    <div class="form__field field" style="margin-bottom: 40px;">
+      <div class="referrer-url field__wrap">
+        <input id="referrer-url" class="referrer-url__input field__input" type="text" value="{{ referrer_url }}" readonly="readonly">
+        <button class="referrer-url__btn go__btn btn" data-clipboard-target="#referrer-url">Копировать ссылку</button>
      </div>
    </div>
+    {% include 'templates/blocks/share.html' with share_object_name="ссылкой" share_url=referrer_url %}
  </div>
 </div>

--- a/project/templates/blocks/lil_store_js.html
+++ b/project/templates/blocks/lil_store_js.html
@ -22,6 +22,7 @@
    urls: {
      courses: "{% url 'courses' %}",
      userProfileEdit: "{% url 'user-edit-profile' %}",
+      userBonuses: "{% url 'user-bonuses' %}",
    },
    flags: {
      referrer: '{{ referrer.id|default:'' }}',
--- a/project/templates/blocks/share.html
+++ b/project/templates/blocks/share.html
@ -3,7 +3,9 @@

 <div class="share">
  <div class="share__title">Поделиться {% if share_object_name %}{{ share_object_name }}{% else %}{% if livelesson or lesson %}уроком{% else %}курсом{% endif %}{% endif %}</div>
-  <div class="share__list likely likely-big" data-url="http://{{request.META.HTTP_HOST}}{{object.get_absolute_url}}">
+  <div class="share__list likely likely-big"
+       {% if share_title %}data-title="{{ share_title }}"{% endif %}
+       data-url="{% if share_url %}{{ share_url }}{% else %}http://{{request.META.HTTP_HOST}}{{object.get_absolute_url}}{% endif %}">
    <div class="twitter"></div>
    <div class="facebook"></div>
    <div class="gplus"></div>
--- a/project/templates/blocks/user_menu.html
+++ b/project/templates/blocks/user_menu.html
@ -1,6 +1,14 @@
 {% load static %} {% load thumbnail %}
 {% load rupluralize from plural %}
 {% if request.user.is_authenticated %}
+{% if request.user.bonus %}
+<div class="header__bonuses">
+  <a class="header__bonuses-link" href="{% url 'user-bonuses' %}">
+    <img class="header__lil-coin-img" src="{% static 'img/lilcoin.png' %}" />
+    {{ request.user.bonus }}
+  </a>
+</div>
+{% endif %}
 <div class="header__login">
  <a class="header__ava ava" href="{% if request.user_agent.is_touch_capable %}#{% else %}{% url 'user-profile' %}{% endif %}">
    {% thumbnail request.user.photo "48x48" crop="center" as im %}
@ -16,12 +24,6 @@
        {{ request.user.balance }} руб.
      </a>
    {% endif %}
-    {% comment %}
-      FIXME
-      <!--<a class="header__link header__link_border" href="{% url 'user-bonuses' %}">-->
-        <!--{{ request.user.bonus|rupluralize:"бонус,бонуса,бонусов" }}-->
-      <!--</a>-->
-    {% endcomment %}
    {% if request.user.auth_token %}
      {% if request.user.role >= request.user.AUTHOR_ROLE %}
      <a class="header__link header__link_green" href="{% url 'course_create' %}">
--- a/project/templates/lilcity/main.html
+++ b/project/templates/lilcity/main.html
@ -1,5 +1,13 @@
 {% extends "templates/lilcity/index.html" %} {% load static %}

+{% if is_referral_url and referrer %}
+{% block ogdescription %}
+{{ referrer.get_full_name }} приглашает вас и ваших детей в первую онлайн школу креативного мышления Lil School.
+Занимайтесь с ребёнком творчеством, не выходя из дома.
+Перейдите по ссылке и получите скидку {{ config.REFERRAL_BONUS }}% на первую покупку
+{% endblock %}
+{% endif %}
+
 {% block title %}School LIL.CITY{% endblock title %}
 {% block content %}
  {% include "templates/blocks/promo.html" %}
--- a/web/package.json
+++ b/web/package.json
@ -39,6 +39,7 @@
    "axios": "^0.17.1",
    "babel-polyfill": "^6.26.0",
    "baguettebox.js": "^1.10.0",
+    "clipboard": "^2.0.1",
    "downscale": "^1.0.4",
    "glob": "^7.1.2",
    "history": "^4.7.2",
--- a/web/src/img/lilcoin.png
+++ b/web/src/img/lilcoin.png
--- a/web/src/js/app.js
+++ b/web/src/js/app.js
@ -56,7 +56,7 @@ const app = new Vue({
    }
  },
  mounted(){
-    if(this.urlIs('userProfileEdit')){
+    if(this.urlIs('userProfileEdit') || this.urlIs('userBonuses')){
      profileMain(this);
    }
  },
--- a/web/src/js/modules/popup.js
+++ b/web/src/js/modules/popup.js
@ -1,7 +1,6 @@
 import $ from 'jquery';
 import moment from 'moment';
 import {api} from './api';
-import {rupluralize} from '../utils';

 moment.locale('ru');

@ -123,7 +122,7 @@ $(document).ready(function () {

            $bonuses.hide();
            if(bonuses){
-                $bonusesCount.text(rupluralize(bonusesCount, ['бонус', 'бонуса', 'бонусов']));
+                $bonusesCount.text(bonusesCount + ' Lil');
                $bonuses.show();
            }

@ -217,7 +216,7 @@ $(document).ready(function () {
                var text = '';
                var amount = +response.data.amount;
                if(bonuses){
-                    $bonusesCount.text(rupluralize(bonuses > amount ? amount : bonuses, ['бонус', 'бонуса', 'бонусов']));
+                    $bonusesCount.text(bonuses > amount ? amount : bonuses + ' Lil');
                    $bonuses.show();
                    if(useBonuses) {
                        amount = bonuses > amount ? 0 : amount - bonuses;
--- a/web/src/js/modules/profile.js
+++ b/web/src/js/modules/profile.js
@ -1,7 +1,15 @@
 import $ from 'jquery';
 import slugify from 'slugify';
+import ClipboardJS from 'clipboard';

-export const main = () => {
+export const main = (app) => {
+    if(app.urlIs('userBonuses')){
+        $('#referrer-url').select().click(function(){
+            $(this).select();
+        });
+        new ClipboardJS('.btn');
+        return;
+    }
    // Обработчик выбора пола
    let genderInput = $('#gender')

@ -41,8 +49,4 @@ export const main = () => {
        });
        changeSlug();
    }
-
-    $('#referrer-url').select().click(function(){
-        $(this).select();
-    });
 }
--- a/web/src/sass/_common.sass
+++ b/web/src/sass/_common.sass
@ -615,6 +615,19 @@ a.btn
    height: 40px
  &_bg &__container
    border-color: transparent
+  &__bonuses
+    padding: 5px 15px
+    border: 1px solid rgba(25, 25, 25, 0.1)
+    position: relative
+    margin-left: 20px
+    border-radius: 20px
+    height: 40px
+    font-size: 18px
+    text-align: center
+  &__bonuses-link
+    color: #ccc
+  &__lil-coin-img
+    margin-bottom: -5px

 .main
  display: flex
@ -2246,6 +2259,13 @@ a.grey-link
        border: none
        background: none
        margin-top: 11px
+  &__stroke
+    background-image: linear-gradient(-225deg, #D1FF7F 0%, #56FFFD 100%)
+    padding: 1px
+    display: inline-block
+    & .field__input
+      background: white
+      padding: 5px

 .field__wrap
  &--title
@ -4327,3 +4347,32 @@ a
 .modal-video-close-btn
  +m
    right: 0
+
+.referrer-url
+  display: flex
+  &__input
+    width: auto
+    height: 40px
+    border: 1px solid #D1FF7F
+    padding: 8px
+    border-radius: 3px 0 0 3px
+    border-right: none
+
+    &:focus
+      border: 1px solid #D1FF7F
+  &__btn
+    border-radius: 0 3px 3px 0
+
+
+.bonuses
+  display: flex
+  font-size: 20px
+  margin-bottom: 20px
+  &__count
+    flex: 1
+  &__course
+    font-family: 'ProximaNova-Bold', serif
+    color: $cl
+  &__lil-coin-img
+    margin-bottom: -5px
+    margin-right: 4px