Merge pull request #12644 from edx/tasawer/story/ecom-4559-update-receipt-page

Update Receipt page

lms/static/js/commerce/views/receipt_view.js

@@ -47,6 +47,8 @@ var edx = edx || {};
 
             this.renderCourseNamePlaceholder(this.courseKey);
 
+            this.renderUserFullNamePlaceholder(this.username);
+
             providerId = this.getCreditProviderId(data);
             if (providerId) {
                 this.getProviderData(providerId).then(this.renderProvider, this.renderError)
@@ -61,6 +63,18 @@ var edx = edx || {};
                 $courseNamePlaceholder.text(responseData.name);
             });
         },
+        renderUserFullNamePlaceholder: function (username) {
+            var userModel = Backbone.Model.extend({
+              urlRoot: '/api/user/v1/accounts/',
+                url: function() {
+                    return this.urlRoot + this.id;
+                }
+            });
+            this.user = new userModel({id:username});
+            this.user.fetch({success: function(userData) {
+                $(".full_name_placeholder").text(userData.get('name'));
+            }});
+        },
         renderProvider: function (context) {
             var templateHtml = $("#provider-tpl").html(),
                 providerDiv = this.$el.find("#receipt-provider");

lms/static/js/spec/commerce/receipt_view_spec.js

@@ -7,7 +7,8 @@ define([
     function ($, AjaxRetry, ReceiptView, AjaxHelpers){
         'use strict';
         describe('edx.commerce.ReceiptView', function() {
-            var data, courseResponseData, providerResponseData, mockRequests, mockRender, createReceiptView;
+            var data, courseResponseData, providerResponseData, mockRequests, mockRender, createReceiptView,
+                userResponseData;
 
             createReceiptView = function() {
                 return new ReceiptView({el: $('#receipt-container')});
@@ -39,6 +40,10 @@ define([
                     requests, 'GET', '/api/courses/v1/courses/course-v1:edx+dummy+2015_T3/', courseResponseData
                 );
 
+                mockRequests(
+                    requests, 'GET', '/api/user/v1/accounts/user-1', userResponseData
+                );
+
                 mockRequests(requests, 'GET', '/api/credit/v1/providers/edx/', providerResponseData);
                 return view;
             };
@@ -141,7 +146,10 @@ define([
                     "start": "2030-01-01T00:00:00Z",
                     "end": null
                 };
-
+                userResponseData = {
+                    "username": "user-1",
+                    "name": "full name"
+                };
             });
 
             it('sends analytic event when verified receipt is rendered', function() {

lms/templates/commerce/receipt.underscore

@@ -2,8 +2,9 @@
   <article class="content-main">
     <h3 class="title">
       <%= interpolate(
-            gettext( "Thank you! We have received your payment for %(course_name)s."),
-            { course_name: "<span class='course_name_placeholder'></span>" }, true
+            gettext( "Thank you %(full_name)s! We have received your payment for %(course_name)s."),
+            { course_name: "<span class='course_name_placeholder'></span>",
+              full_name: "<span class='full_name_placeholder'></span>"}, true
           ) %>
     </h3>