Skip to content

E
ecommerce
Commit 9983b3a7 by Tasawer
Options

backbone view added for showing provider details on checkout page. 

ECOM-1881
parent 96e2f77d
Showing with 211 additions and 56 deletions
ecommerce/credit/views.py
......@@ -37,14 +37,21 @@ class Checkout(TemplateView):
else:
processors_dict[processor] = 'Checkout with {}'.format(processor)
credit_seats = [
seat for seat in course.seat_products if seat.attr.certificate_type == self.CREDIT_MODE
]
provider_ids = None
if credit_seats:
provider_ids = ",".join([seat.attr.credit_provider for seat in credit_seats if seat.attr.credit_provider])
context.update({
'request': self.request,
'user': self.request.user,
'course': course,
'payment_processors': processors_dict,
'credit_seats': [
seat for seat in course.seat_products if seat.attr.certificate_type == self.CREDIT_MODE
],
'credit_seats': credit_seats,
'lms_url_root': settings.LMS_URL_ROOT,
'providers_ids': provider_ids,
'analytics_data': json.dumps({
'course': {
'courseId': course.id
......
ecommerce/static/js/pages/credit_checkout.js
......@@ -7,12 +7,17 @@ require([
'js/views/clickable-view',
'js/views/analytics_view',
'js/views/payment_button_view',
'js/utils/utils'
'js/utils/utils',
'js/views/provider_view'
],
function( $,Backbone, UserModel, TrackingModel, CourseModel, ClickableView, AnalyticsView, PaymentButtonView, Utils ) {
function( $,Backbone, UserModel, TrackingModel, CourseModel, ClickableView, AnalyticsView, PaymentButtonView, Utils, ProviderView ) {
new PaymentButtonView({
el: $( '#payment-buttons')
el: $( '#payment-buttons' )
});
new ProviderView({
el: $( '.provider-details' )
});
var courseModel = new CourseModel(),
......
ecommerce/static/js/views/provider_view.js 0 → 100644
define([
'jquery',
'underscore',
'backbone'
],
function( $, _, Backbone ) {
return Backbone.View.extend({
initialize: function() {
this.template = _.template($('#provider-details-tpl').text());
this.getProviders();
this.checkEligibility();
},
getProviders: function () {
var providersIds = this.$el[0].dataset.providersIds;
var url = lmsRootUrl + '/api/credit/v1/providers/?provider_id=' + providersIds;
var self = this;
$.ajax({
url: url,
method: 'GET',
success: function(response) {
if (response.length) {
var html = self.template(response[0]); //currently we are assuming only one provider
self.$el.html(html);
self.toggleProviderContent(true);
} else {
self.toggleProviderContent(false);
}
},
error: function() {
self.toggleProviderContent(false);
}
})
},
checkEligibility: function () {
var $courseDetails = $("#course-name");
var username = $courseDetails.data("username");
var courseKey = $courseDetails.data("course_key");
var url = lmsRootUrl + '/api/credit/v1/eligibility/?username=' + username + '&course_key=' + courseKey;
var self = this;
$.ajax({
url: url,
method: 'GET',
success: function(response) {
if (response.length) {
var deadline = new Date(response[0]["deadline"]);
var formattedDate = deadline.getMonth() + "/" + deadline.getDay() + "/" + deadline.getFullYear();
$(".eligibility-details").find(".deadline-date").text(formattedDate);
self.toggleProviderContent(true);
} else {
self.toggleProviderContent(false);
}
},
error: function() {
self.toggleProviderContent(false);
}
})
},
toggleProviderContent: function( isEnabled ) {
// On request failure hide provider panel and show error message.
$( '.provider-panel' ).toggleClass('hide', !isEnabled);
$( '.error-message').toggleClass('hide', isEnabled );
}
});
});
ecommerce/static/sass/views/_credit.scss
......@@ -7,11 +7,15 @@
// ====================
.credit-checkout {
color: gray;
padding-bottom: 30px;
.header-title {
padding-left: 20px;
}
.title {
color: $text-color;
margin: 0;
margin-bottom: 20px;
span.course-title {
color: $brand-primary;
......@@ -20,19 +24,26 @@
.course-details .course-image,
.provider-details .provider-image {
max-width: 100%;
width: 200px;
}
.course-details,
.provider-details {
border-bottom: 1px solid palette(grayscale, light);
margin-bottom: 20px;
padding: 20px 0;
}
.provider-details {
.eligibility-details{
margin-top: 10px;
.show-instructions {
padding-left: initial;
}
}
.eligibility-details {
border-bottom: 1px solid $gray-light;
margin-bottom: 20px;
.date {
margin-bottom: 20px;
}
}
......@@ -48,6 +59,22 @@
width: 100%;
}
}
.course-details {
.row {
overflow: hidden;
.advantages {
background-color: white;
padding: 10px 15px;
margin-bottom: -1000px;
padding-bottom: 1000px;
}
}
}
div.advantages p {
color: $gray;
}
}
/* Small devices (tablets, 768px and up) */
......
ecommerce/templates/edx/credit/checkout.html
......@@ -6,62 +6,100 @@
{% block content %}
<div class="container credit-checkout">
<div class="row center-block course-details">
<div class="col-sm-3 hidden-xs">
<img class="course-image" alt="{{ course.name }}" src="{{ course.thumbnail_url }}">
</div>
<div class="col-sm-9">
<h3 class="title">
<div class="course-details well">
<div class="row center-block ">
<h4 class="header-title title">
{% blocktrans count hours=credit_seats.0.attr.credit_hours %}
You are purchasing 1 credit hour for:
{% plural %}
You are purchasing {{ hours }} credit hours for:
{% endblocktrans %}
<span class="course-title text-nowrap">{{ course.name }}</span>
</h3>
Congratulations, you are eligible to purchase credit from {{ credit_seats.0.attr.credit_provider }} by Feb 05, 2013.
<span id="course-name" data-course_key="{{ course }}" data-username="{{ request.user }}"
class="course-title text-nowrap">{{ course.name }}</span>
</h4>
<div class="col-sm-4">
<div class="advantages">
<strong>{% trans "You deserved it." %}</strong>
<p>
{% trans "The hard work is over; you passed the course. Now get the credit you deserve to start or complete a degree." %}
</p>
</div>
</div>
<div class="col-sm-4">
<div class="advantages">
<strong>{% trans "It's affordable." %}</strong>
<p>
{% trans "The credit offered on edX is generally lower than for-credit courses on campus." %}
</p>
</div>
</div>
<div class="col-sm-4">
<div class="advantages">
<strong>{% trans "It opens doors." %}</strong>
<p>
{% trans "It is estimated that most job openings by 2018 will require a college degree. Start your path to success." %}
</p>
</div>
</div>
</div>
</div>
<div class="row center-block provider-details">
<div class="col-sm-3 hidden-xs">
<img alt="{{ credit_seats.0.attr.credit_provider }}" class="provider-image" src="http://img2.findthebest.com/sites/default/files/10/media/images/Arizona_State_University_at_the_West_Campus_226828.jpg">
<div class="provider-container">
<div class="alert alert-danger error-message hide" role="alert">
{% trans "Something went wrong! Please try again later." %}
</div>
<div class="col-sm-9">
<h3 class="title">{{ credit_seats.0.attr.credit_provider }}</h3>
A new model for the American Research University, creating an institution that is committed to
excellence, access and impact.
<div class="row eligibility-details">
<div class="col-sm-6 pull-left">Eligible until Feb 05, 2013</div>
<div class="col-sm-6 text-right price">Price: ${{ credit_seats.0.stockrecords.first.price_excl_tax }}</div>
<div class="provider-panel hide">
<div data-providers-ids="{{ providers_ids }}" class="row center-block provider-details">
{# data will be loaded with underscore template #}
</div>
</div>
</div>
<div class="row center-block text-right total-price">
<div class="col-sm-12">Total: ${{ credit_seats.0.stockrecords.first.price_excl_tax }}</div>
</div>
<div id="payment-buttons" class="row center-block checkout-controls">
{% for processor_name, button_text in payment_processors.items %}
<div class="col-xs-6 ">
<button data-track-type="click"
data-track-event="edx.bi.ecommerce.credit.payment_selected"
data-track-category="{{ processor_name }}"
data-processor-name="{{ processor_name }}"
data-sku="{{ credit_seats.0.stockrecords.first.partner_sku }}"
data-course-id="{{ course.id }}"
class="btn btn-primary payment-button"
>
{{ button_text }}
</button>
<div class="row center-block eligibility-details">
<div class="col-sm-3"></div>
<div class="col-sm-9 date">
{# date will be added with ajax call #}
{% blocktrans with date='<span class="deadline-date"></span>' %}
Credit eligibility expires on {{ date }}
{% endblocktrans %}
<span class="price pull-right">
{% trans "Price" %}: ${{ credit_seats.0.stockrecords.first.price_excl_tax }}
</span>
</div>
</div>
<div class="row center-block text-right total-price">
<div class="col-sm-12">{% trans "Total:" %} ${{ credit_seats.0.stockrecords.first.price_excl_tax }}</div>
</div>
<div id="payment-buttons" class="row center-block checkout-controls">
{% for processor_name, button_text in payment_processors.items %}
<div class="col-xs-6 ">
<button data-track-type="click"
data-track-event="edx.bi.ecommerce.credit.payment_selected"
data-track-category="{{ processor_name }}"
data-processor-name="{{ processor_name }}"
data-sku="{{ credit_seats.0.stockrecords.first.partner_sku }}"
data-course-id="{{ course.id }}"
class="btn btn-primary payment-button"
>
{{ button_text }}
</button>
</div>
{% endfor %}
</div>
</div>
{% endfor %}
</div>
</div>
<form id="payment-processor-form">
</form>
<script type="text/template" id="provider-details-tpl">
{% include "edx/credit/provider-details.underscore" %}
</script>
<script>
var lmsRootUrl = "{{ lms_url_root }}";
</script>
{% if analytics_data %}
<script type="text/javascript">
var initModelData = {{ analytics_data|safe }};
......@@ -70,8 +108,6 @@
{% endblock content %}
{% compress js %}
{% block javascript %}
<script src="{% static 'js/pages/credit_checkout.js' %}"></script>
{% endblock %}
{% endcompress %}
{% block javascript %}
<script src="{% static 'js/pages/credit_checkout.js' %}"></script>
{% endblock %}
ecommerce/templates/edx/credit/provider-details.underscore 0 → 100644
<div class="col-sm-3 hidden-xs">
<img alt="<%- display_name %>" class="provider-image" src="">
</div>
<div class="col-sm-9">
<h3 class="title"><%- display_name %></h3>
<p><%- gettext( description ) %></p>
<button class="btn btn-link show-instructions" data-toggle="collapse" data-target="#fulfillment-instructions"><%= gettext( "How does it works?" ) %></button>
<div class="collapse" id="fulfillment-instructions">
<h4 class="text-uppercase"><%= gettext('how credit works with ') %><%- display_name %> </h4>
<%= fulfillment_instructions %>
</div>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment