Оплата бонусами

apps/payment/templates/payment/pay.html

@@ -1,10 +1,29 @@
-{% extends "templates/lilcity/index.html" %} {% load static %} {% block content %}
-{% if school and request.user.bonus %}
+{% extends "templates/lilcity/index.html" %}
+{% load static %}
+{% load rupluralize from plural %}
 
-{% endif %}
+{% block content %}
 <div class="section">
   <div class="section__center center">
-    {% include "./paymentwall_widget.html" %}
+    {% if school and request.user.bonus and not payment.bonus %}
+      {% if request.user.bonus >= payment.amount %}
+      <a class="btn" href="{{ request.get_full_path }}&use_bonuses=1"  style="margin-bottom: 20px">Оплатить бонусами</a>
+      <div class="text2"><p>или купить онлайн</p></div>
+      {% else %}
+      <div class="text2"><p>Для оплаты части стоимости вы можете использовать бонусы</p></div>
+      <label id="use-bonuses-checkbox" class="switch" style="margin-bottom: 20px">
+        <input class="switch__input" data-url="{{ request.get_full_path }}" value="true" type="checkbox">
+        <span class="switch__content">Использовать {{ request.user.bonus|rupluralize:'бонус,бонуса,бонусов' }}</span>
+      </label>
+      {% endif %}
+    {% endif %}
+    <div id="pw-widget" class="pw-widget">
+      {% include "./paymentwall_widget.html" %}
+    </div>
   </div>
 </div>
 {% endblock content %}
+
+{% block foot %}
+<script type="text/javascript" src="{% static 'pay.js' %}"></script>
+{% endblock foot %}

apps/payment/views.py

@@ -14,7 +14,7 @@ from django.http import HttpResponse, Http404
 from django.shortcuts import redirect, get_object_or_404
 from django.views.generic import View, TemplateView
 from django.views.decorators.csrf import csrf_exempt
-from django.urls import reverse_lazy
+from django.urls import reverse
 from django.utils.decorators import method_decorator
 from django.utils.timezone import now
 
@@ -156,7 +156,7 @@ class SchoolBuyView(TemplateView):
             school_payment.bonus = bonus
             school_payment.save()
             if school_payment.is_paid():
-                return redirect(reverse_lazy('payment-success'))
+                return redirect('%s?duration=%s' % (reverse('payment-success'), duration))
         if payment_id and school_payment.bonus and not use_bonuses:
             bonus = school_payment.bonus
             school_payment.amount += school_payment.bonus
@@ -178,11 +178,17 @@ class SchoolBuyView(TemplateView):
                 'evaluation': 1,
                 'demo': 1,
                 'test_mode': 1,
-                'success_url': host + str(reverse_lazy('payment-success')) + '?duration=%s' % duration,
-                'failure_url': host + str(reverse_lazy('payment-error')),
+                'success_url': host + reverse('payment-success') + '?duration=%s' % duration,
+                'failure_url': host + reverse('payment-error'),
             }
         )
-        return self.render_to_response(context={'widget': widget.get_html_code()})
+        if self.request.is_ajax():
+            self.template_name = 'payment/paymentwall_widget.html'
+        return self.render_to_response(context={
+            'widget': widget.get_html_code({'height': '400'}),
+            'school': True,
+            'payment': school_payment,
+        })
 
 
 @method_decorator(login_required, name='dispatch')

web/src/js/pages/pay.js

@@ -0,0 +1,11 @@
+import $ from 'jquery';
+
+$(document).ready(function () {
+    const $useBonuses = $('#use-bonuses-checkbox input');
+    const $widget = $('#pw-widget');
+    $useBonuses.change(e => {
+        $.get($useBonuses.data('url') + '&use_bonuses=' + ($useBonuses.prop('checked') ? 1 : '')).then(response => {
+            $widget.html(response);
+        });
+    });
+});

web/src/sass/_common.sass

@@ -5238,6 +5238,27 @@ a
     width: 24px
     margin-bottom: -6px
 
+
+.pw-widget
+  display: inline-block
+  position: relative
+
+  &:before
+    content: ' '
+    position: absolute
+    top: 30%
+    left: 50%
+    width: 50px
+    height: 50px
+    border-left: 3px solid transparent
+    border: 3px solid #B5B5B5
+    border-right: none
+    border-top: none
+    border-bottom: none
+    z-index: -1
+    border-radius: 50%
+    animation: loading .6s infinite linear
+
 .mobile-hide
   +m
     display: none

web/webpack.config.js

@@ -17,6 +17,7 @@ module.exports = {
     liveLesson: "./src/js/pages/live-lesson.js",
     freeLessons: "./src/js/pages/free-lessons.js",
     userGalleryEdit: "./src/js/pages/user-gallery-edit.js",
+    pay: "./src/js/pages/pay.js",
     mixpanel: "./src/js/third_party/mixpanel-2-latest.js",
     sprite: glob('./src/icons/*.svg'),
     images: glob('./src/img/*.*'),