Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Javascript part of a challenge for Shopify's summer developer intern position</title>
  <!-- https://redd.it/48u6mq -->
</head>
<body>
​
​
​
</body>
</html>
 
var receiptModule = (function module_iife(){
  'use strict';
  var publicAPI = {};
​
​
  /**
   * Output receipt for an order. Modifies DOM!
   * Will output to `#receipt` element if one found,
   * otherwise will append `<div>` to the end of `<body>`.
   *
   * @param {Object} order - Object with information about the order.
   */
  function printToDom(order) {
    var receiptHTML = orderToHtml(order);
​
    var outputElement =
        document.getElementById('receipt') ||
        document.body.appendChild(document.createElement('div'));
​
    outputElement.innerHTML = receiptHTML;
  }
  publicAPI.printToDom = printToDom;
​
​
  /**
   * Converts order object to HTML string.
   *
   * @param {Object} order - Object with information about the order.
   * @return {string} html - HTML string with relevant order information.
   */
  function orderToHtml(order) {
    var html = '<h1>Order receipt details</h1>';
    html += '<p>Your order for ' + order.products.name + ' has been received</p>';
​
    html += '<p>Payment info: ';
    switch (order.payment_type) {
      case 'creditcard':
        html += order.payment.card_type + ' ' + order.payment.card_number;
        html += ' was charged $' + order.amount_in_dollars;
        break;
      case 'paypal':
        html += order.payment.paypal_info;
        html += ' was charged $' + order.amount_in_dollars;
        break;
      case 'manual':
        html += order.payment.manual_payment_info;
        html += ' was charged $' + order.amount_in_dollars;
        break;
      case 'free':
        html += 'This order was free!';
        break;
      default:
        html += order.payment.default_payment_info;
        html += ' was charged $' + order.amount_in_dollars;
        break;
    }
    html += '</p>';
​
    return html;
  }
  // For testing purposes only, should be removed
  // when using this module in production environment
  publicAPI.__testonly__ = {};
  publicAPI.__testonly__.orderToHtml = orderToHtml;
​
​
  return publicAPI;
}());
​
​
// To preserve initial API, i.e. ability to do `receipt(order)`:
window.receipt = receiptModule.printToDom;
​
​
​
​
​
​
​
(function tests(module){
  var orderToHtml = module.__testonly__.orderToHtml;
​
​
  var ccOrder = {
    'payment_type': 'creditcard',
    'payment': {
      'card_type': 'VISA',
      'card_number': 'xxxx xxxx xxxx xxxx'
    },
    'amount_in_dollars': '99.99',
    'products': {
      'name': 'ACME Util'
    }
  };
  var ccOrderHtml = '<h1>Order receipt details</h1><p>Your order for ACME Util has been received</p><p>Payment info: VISA xxxx xxxx xxxx xxxx was charged $99.99</p>';
  assert(
    orderToHtml(ccOrder) === ccOrderHtml,
    'CC order -> HTML assertion failed'
  );
​
​
  var paypalOrder = {
    'payment_type': 'paypal',
    'payment': {
      'paypal_info': 'Paypal account',
    },
    'amount_in_dollars': '99.99',
    'products': {
      'name': 'ACME Util'
    }
  };
  var paypalOrderHtml = '<h1>Order receipt details</h1><p>Your order for ACME Util has been received</p><p>Payment info: Paypal account was charged $99.99</p>';
  assert(
    orderToHtml(paypalOrder) === paypalOrderHtml,
    'Paypal order -> HTML assertion failed'
  );
​
​
  var manualOrder = {
    'payment_type': 'manual',
    'payment': {
      'manual_payment_info': 'Manual account',
    },
    'amount_in_dollars': '99.99',
    'products': {
      'name': 'ACME Util'
    }
  };
  var manualOrderHtml = '<h1>Order receipt details</h1><p>Your order for ACME Util has been received</p><p>Payment info: Manual account was charged $99.99</p>';
  assert(
    orderToHtml(manualOrder) === manualOrderHtml,
    'Manual order -> HTML assertion failed'
  );
​
​
  var freeOrder = {
    'payment_type': 'free',
    'products': {
      'name': 'ACME Util'
    }
  };
  var freeOrderHtml = '<h1>Order receipt details</h1><p>Your order for ACME Util has been received</p><p>Payment info: This order was free!</p>';
  assert(
    orderToHtml(freeOrder) === freeOrderHtml,
    'Free order -> HTML assertion failed'
  );
​
​
  var defaultOrder = {
    'payment': {
      'default_payment_info': 'Default account',
    },
    'amount_in_dollars': '99.99',
    'products': {
      'name': 'ACME Util'
    }
  };
  var defaultOrderHtml = '<h1>Order receipt details</h1><p>Your order for ACME Util has been received</p><p>Payment info: Default account was charged $99.99</p>';
  assert(
    orderToHtml(defaultOrder) === defaultOrderHtml,
    'Free order -> HTML assertion failed'
  );
​
​
  // Manual test (uncomment to run)
  //module.printToDom(ccOrder);
​
​
  // If no errors were thrown till this point...
  console.log('[Receipt] All tests passed.');
​
  function assert(condition, message) {
    if (!condition) { throw message || "Assertion failed"; }
  }
}(receiptModule));
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
cust0dianpro
0viewers