mitodl/bootcamp-ecommerce

MIT Bootcamp e-commerce

bootcamp-ecommerce's Issues

Set up Mailgun domain for bootcamps-ecommerce

set up DNS for bootcamp.odl.mit.edu

In order to avoid a conflict with the DNS for the existing site at bootcamp.mit.edu, we won't use a subdomain. Instead, we'll go with bootcamp.odl.mit.edu. This should be a simple setup in Route 53 and Heroku.

The payment UI should comply with the REST API

The UI shows the option to pay even if the backend returns "is_user_eligible_to_pay": false,

US7 As a financial admin, I want to have each payment link to the Bootcamp it belongs.

Similar to #9.

"bootcamp name" needs to be passed to CyberSource as a MerchantDefinedField.

Merchant Defined data is passed to Cybersource in ecommerce/api.py. Currently we pass data about the klass, but not the bootcamp.

        'merchant_defined_data1': 'klass',
        'merchant_defined_data2': '{}'.format(klass.title),
        'merchant_defined_data3': '{}'.format(klass_id),

(I'm not sure what value there is in passing the string 'klass' and the klass id.)

Production Ready

Off the top of my head this should include:

• choose URL and configure DNS
• Heroku and the build pipeline
• Cybersource credentials
• Setting up Sentry
• Mail monitoring

Apply payment page styles

Invision design: https://projects.invisionapp.com/share/SFBD1T7DW#/screens/229943665

The payment page styling should reflect the invision design above

user should be redirected from homepage to pay page if logged in

the home page has no important content for a logged in user

(I consulted @roberthouse54 for this)

UI skeleton

Add a skeleton UI to allow login and logout, and some non-functional payment UI

Fix UI and show a meaningful message to the user in case there are no classes to pay

right now we just do not show a payment box: we should probably say something like "you are not allowed to pay for anything at the moment".

We should also fix the UI:

Add payment history to payment page

Invision design: https://projects.invisionapp.com/share/SFBD1T7DW#/screens/229943705

The UI design calls for a payment history for each klass at the bottom of the /pay page

display a receipt message in the browser window after a successful CyberSource callback

part of #5 As a learner, I want to get a confirmation that the payment was received, after each of my payments.

Terms of Service

Since we're using edX for SSO, I think we need a simple TOS page.

I've drafted something based on the MicroMasters TOS: https://goo.gl/afL6sR

Fetch basic user information in a profile

Do something similar to micromasters and fetch the user name and last name during the login.

formatDollarAmount fails for ten cent values

formatDollarAmount(708.7) is rendered as $708.7 but should be $708.70

US5 As a learner, I want access to a statement of my payment status, so that I can get my visa or present to my company for reimbursement.

This is a browser view, suitable for printing. It should contain the following information:

• learner's full name
• learner's email
• name of bootcamp
• name of klasse (?)
• dates of klasse
• a list of each payment, with:
  • amount paid
  • date of payment
  • name of payer
• total paid
• total cost of bootcamp
• remaining balance

make the logo smaller in the receipt e-mail

Andrew from the Bootcamp team asked us to make the Bootcamp logo smaller on the receipt email sent from CyberSource. The logo text should be about the same size as the "Receipt" header in the e-mail.

He'd also like to see some more white space between the logo and the rest of the text. I think we can just add some padding when we reduce the log.

Logo for receipt e-mails

We should replace the Cybersource logo on the receipt emails that are sent to payers

US1: As a learner, I want to pay for my Bootcamp, the total amount or in a set of installments.

Installments (i.e. payment price) are recommendations only. We don't need to enforce them.

The Bootcamp team would like to set the size and number of installments per bootcamp, but to start with there will be 3 installments of $2000 each.

acceptance criteria

• ecommerce models
• payment view
• order fulfillment callback

add MITx Bootcamps logo and styling to Cybersource pages

(Similar to mitodl/micromasters#2156)

Cybersource supports a logo and a limited amount of styling for the checkout pages. It would make users more confident in the checkout process, and less likely to abandon their cart, if they saw MIT branding on these pages.

The logo is a 840x60 (or smaller) pixel image, in jpg or png format.

Here's a screenshot from the Cybersource business center where you can see the style settings that can be changed.

display modal when logging in to edX

Similar to MicroMasters -- https://invis.io/Y4BG0Y3KP#/205088104_Sign_Up_Login_Modal -- display a modal before transferring the user to edX for login.

Integrate Bootcamp admission API

Add Django admin for profile

Configure Cybersource in Production

We need to set up CyberSource similarly to the MicroMasters setup:

• change contact information? (currently set to Chi Chu)
• turn on payment tokenization
• Enable PayPal Express Checkout
• single page or multipage form? (bootcamp currently uses single page; MicroMasters uses multipage)
• Notifications: update merchant post URL
• Notifications: set merchant post email to odlcybersource account
• Notifications: Email Receipt to Customer
• Notifications: Sender's Email Address
• Notifications: Sender's Name
• #43 Notifications: add logo to receipt (bootcamp doesn't do this currently)
• Branding: set header
• Branding: set colors

Configure and deploy app on Heroku

Fix redirect URLs

It looks like CyberSource doesn't like the same URL being used for both the order receipt and cancellation pages. We should make some placeholder URLs which are different from each other (ie {base_url}/receipt/ and {base_url}/cancel/)

Blank page after payment on cybersource

After the payment on cybersource the user gets redirected to the main website https://bootcamp-ecommerce-ci.herokuapp.com/?status=receipt but the page is empty.

Tested only on CI environment so far

Reflect new payment/installment logic in UI

We've decided that the logic for payments and installments in bootcamp-ecommerce is as follows:

• A Klass should have one or more Installments
• The user will always see the total amount they've paid out of the total amount due, and will still be able to pay any amount towards the total at any time before the final Installment deadline
• The user will always see the date of the final deadline (i.e.: the last Installment deadline)
• If a user has not paid as much or more than the total amount up to and including the nearest future Installment amount, they will be shown a message that tells them how much they owe towards that amount, and that it is due by the Installment deadline date. EXAMPLE: A Klass has 4 Installments, $1000 each. 2 of those installments are in the past, the user has paid a total of $2500, and the next Installment has a deadline of May 30th. This message should indicate that the user needs to pay $500 by May 30th.
  • If a user has already paid more than the total amount required for the current Installment, this message will be hidden

We need to reflect this logic in the UI.

Apply login page styles

Invision design: https://projects.invisionapp.com/share/SFBD1T7DW#/screens/229716307

The login page should reflect the design above.

US10 As a bootcamp admin, I would like a view/report of payment status for all learners in a given bootcamp.

Add models for bootcamp and klasses

US2 As a learner, I want to get a confirmation that the payment was received, after each of my payments.

acceptance criteria

• confirm receipt is e-mailed

related issues

• #39 display a receipt message in the browser window after a successful callback, suitable for printing.

Apply common styles and create footer

Invision designs: https://projects.invisionapp.com/share/SFBD1T7DW#/screens/229716307

The design calls for some styles/elements that will be common for all pages in the bootcamp-ecommerce app.

Acceptance criteria:

1. Black background applied and page content centered with specific width
2. MIT Bootcamps logo placed in the top left of the page content block
3. Footer created & styled

Weird amount input width on Firefox

As far as I can tell this is happening only on Firefox

Google analytics

We need to add the relevant script tag for google analytics and whatever other analytics tools we use

for Prod, use UA-5145472-18
for CI and RC, use UA-5145472-19

Remove the text "/ Payment" from the logo

Another request from Andrew. He didn't like the addition of "/ Payment" to the logo.

He was amenable to making "Payment" a title elsewhere in the header, but he didn't like it as part of the logo.

US4 As a learner, I want to allow others (my family and friends) to pay for my fee or portion of it.

US3 As a learner, I want to know my payment status for my bootcamp, the amount paid / owed.

US8 As a financial admin, I want to prompt learners (by e-mail) to send the subsequent payments.

acceptance criteria

• Mailgun host set up
• e-mail templates
• integrate with per-bootcamp payment schedule

Basic cashing of the user bootcamp admissions

Very basic caching to be used for the User email reminders

Display klass payments based on API results

The bootcamp UI currently displays some hardcoded text for single klass that a user can pay for. We want to show the user the actual information from the API about the klasses they have paid for or can pay for.

Acceptance criteria:

• Payment page displays klass information based on API results
  • If user can pay for a single klass, show payment info/prompt for that klass (like this design)
  • If user can pay for a multiple klasses, show a dropdown with the options, and when one is selected, show payment info/prompt for that klass

This is the UI part of #6

US6 As a financial admin, I want to have each payment link to the learner.

The learners email needs to be passed to CyberSource as MerchantDefinedFields, since the payer email and payer name may not be the same.

Similar to #9.

Merchant Defined data is passed to Cybersource in ecommerce/api.py. Currently we pass data about the klass, but not the learner.

        'merchant_defined_data1': 'klass',
        'merchant_defined_data2': '{}'.format(klass.title),
        'merchant_defined_data3': '{}'.format(klass_id),

Support email is missing from 404 page

We need to send support_email as part of the context

login with edX.org credentials

As a user (learner or admin), I want to be able to log in to the site with my edX. org account credentials, same as MicroMasters.

Handle weird characters in email sent to bootcamp admission

emails like [email protected] are not encoded properly

US9 As a bootcamp admin, I would like to give discounts to specific learners.

Error pages

I think we just need a 404 and a 500 page. Maybe a 403.

It could be the same general idea as micromasters

Apply style to error pages

Write API specs for the bootcamp

We need the following API:

• given an user email, return the list of bootcamps where the user has been accepted.
  • REQUEST:
    • GET /<custom_base_url>/user/<user_email>
  • RESPONSE:
    • HTTP Headers : Content-Type: application/json
    • Status codes:
      • 200 OK
      • 400 - Bad Request: The given user email is not valid
      • 401 - Unauthorized: Requesting client is not authenticated
      • 403 - Forbidden: Requesting client is authenticated but there is no permission to query for progress for the given user email (not sure this is necessary).
      • 404 - Not Found: requested user email doesn't exist
    • Example response

      •  {
             "user": "[email protected]", 
             "bootcamps" :  [
                  {
                      "bootcamp_id" : 23,
                      "bootcamp_title": "The Awesome Bootcamp",
                      "klasses" :  [
                           {
                               "klasse_id": 12,
                               "klasse_name": "The Awesome Bootcamp Klasse of 2016",
                               "status": "admitted",
                               "is_user_eligible_to_pay": true
                           },
                           {
                               "klasse_id": 23,
                               "klasse_name": "The Awesome Bootcamp Klasse of 2016",
                               "status": "pending",
                               "is_user_eligible_to_pay": false
                           }
                       ]
                  }
                  {
                      "bootcamp_id" : 76,
                      "bootcamp_title": "The Outstanding Bootcamp",
                      "klasses" :  [
                           {
                               "klasse_id": 36,
                               "klasse_name": "The Outstanding Bootcamp Klasse of 2017",
                               "status": "admitted",
                               "is_user_eligible_to_pay": true
                           }
                       ]
                  }
              ]
         }
        

Show bootcamp title + klass title in the `/pay`

Right now we just show the klass title but looking at the real data, it does not make much sense.

The payment API should not allow payments if user is not allowed to pay

This should not be really necessary because the UI eventually will not show the form, but we should do it anyway.