669 lines
25 KiB
JavaScript
669 lines
25 KiB
JavaScript
(function(context,$) {
|
|
|
|
"use strict";
|
|
context.JK = context.JK || {};
|
|
context.JK.OrderScreen = function(app) {
|
|
|
|
var EVENTS = context.JK.EVENTS;
|
|
var logger = context.JK.logger;
|
|
|
|
var $screen = null;
|
|
var $templateOrderContent = null;
|
|
var $templatePurchasedJamTrack = null;
|
|
var $navigation = null;
|
|
var $billingInfo = null;
|
|
var $shippingInfo = null;
|
|
var $paymentMethod = null;
|
|
var $shippingAddress = null;
|
|
var $shippingAsBilling = null;
|
|
var $paymentInfoPanel = null;
|
|
var $orderPanel = null;
|
|
var $thanksPanel = null;
|
|
var $jamTrackInBrowser = null;
|
|
var $purchasedJamTrack = null;
|
|
var $purchasedJamTrackHeader = null;
|
|
var $purchasedJamTracks = null;
|
|
var $orderContent = null;
|
|
var userDetail = null;
|
|
var step = null;
|
|
var billing_info = null;
|
|
var shipping_info = null;
|
|
var shipping_as_billing = null;
|
|
var downloadJamTracks = [];
|
|
var purchasedJamTracks = null;
|
|
var purchasedJamTrackIterator = 0;
|
|
|
|
function beforeShow() {
|
|
beforeShowPaymentInfo();
|
|
resetJamTrackDownloadInfo();
|
|
}
|
|
|
|
function beforeShowPaymentInfo() {
|
|
step = 2;
|
|
renderNavigation();
|
|
renderAccountInfo();
|
|
}
|
|
|
|
function resetJamTrackDownloadInfo() {
|
|
$purchasedJamTrack.addClass('hidden');
|
|
$purchasedJamTracks.children().remove()
|
|
$jamTrackInBrowser.hide('hidden');
|
|
}
|
|
|
|
function renderAccountInfo() {
|
|
rest.getUserDetail()
|
|
.done(populateAccountInfo)
|
|
.error(app.ajaxError);
|
|
}
|
|
|
|
function populateAccountInfo(user) {
|
|
userDetail = user;
|
|
|
|
if (userDetail.has_recurly_account) {
|
|
rest.getBillingInfo()
|
|
.done(function(response) {
|
|
$billingInfo.find("#billing-first-name").val(response.first_name);
|
|
$billingInfo.find("#billing-last-name").val(response.last_name);
|
|
$billingInfo.find("#billing-address1").val(response.address1);
|
|
$billingInfo.find("#billing-address2").val(response.address2);
|
|
$billingInfo.find("#billing-city").val(response.city);
|
|
$billingInfo.find("#billing-state").val(response.state);
|
|
$billingInfo.find("#billing-zip").val(response.zip);
|
|
$billingInfo.find("#billing-country").val(response.country);
|
|
|
|
$shippingAddress.find("#shipping-first-name").val(response.first_name);
|
|
$shippingAddress.find("#shipping-last-name").val(response.last_name);
|
|
$shippingAddress.find("#shipping-address1").val(response.address1);
|
|
$shippingAddress.find("#shipping-address2").val(response.address2);
|
|
$shippingAddress.find("#shipping-city").val(response.city);
|
|
$shippingAddress.find("#shipping-state").val(response.state);
|
|
$shippingAddress.find("#shipping-zip").val(response.zip);
|
|
$shippingAddress.find("#shipping-country").val(response.country);
|
|
})
|
|
.error(app.ajaxError);
|
|
}
|
|
else {
|
|
$billingInfo.find("#billing-first-name").val(userDetail.first_name);
|
|
$billingInfo.find("#billing-last-name").val(userDetail.last_name);
|
|
$billingInfo.find("#billing-city").val(userDetail.city);
|
|
$billingInfo.find("#billing-state").val(userDetail.state);
|
|
$billingInfo.find("#billing-country").val(userDetail.country);
|
|
|
|
$shippingAddress.find("#shipping-first-name").val(userDetail.first_name);
|
|
$shippingAddress.find("#shipping-last-name").val(userDetail.last_name);
|
|
$shippingAddress.find("#shipping-city").val(userDetail.city);
|
|
$shippingAddress.find("#shipping-state").val(userDetail.state);
|
|
$shippingAddress.find("#shipping-country").val(userDetail.country);
|
|
}
|
|
}
|
|
|
|
function afterShow(data) {
|
|
// XXX : style-test code
|
|
// moveToThanks({jam_tracks: [{id: 14, jam_track_right_id: 11, name: 'Back in Black'}, {id: 15, jam_track_right_id: 11, name: 'In Bloom'}, {id: 16, jam_track_right_id: 11, name: 'Love Bird Supreme'}]});
|
|
}
|
|
|
|
function beforeHide() {
|
|
if(downloadJamTracks) {
|
|
context._.each(downloadJamTracks, function(downloadJamTrack) {
|
|
downloadJamTrack.destroy();
|
|
downloadJamTrack.root.remove();
|
|
})
|
|
|
|
downloadJamTracks = [];
|
|
}
|
|
purchasedJamTracks = null;
|
|
purchasedJamTrackIterator = 0;
|
|
}
|
|
|
|
// TODO: Refactor: this function is long and fraught with many return points.
|
|
function next(e) {
|
|
e.preventDefault();
|
|
$("#order_error").addClass("hidden")
|
|
|
|
// validation
|
|
var billing_first_name = $billingInfo.find("#billing-first-name").val();
|
|
var billing_last_name = $billingInfo.find("#billing-last-name").val();
|
|
var billing_address1 = $billingInfo.find("#billing-address1").val();
|
|
var billing_address2 = $billingInfo.find("#billing-address2").val();
|
|
var billing_city = $billingInfo.find("#billing-city").val();
|
|
var billing_state = $billingInfo.find("#billing-state").val();
|
|
var billing_zip = $billingInfo.find("#billing-zip").val();
|
|
var billing_country = $billingInfo.find("#billing-country").val();
|
|
|
|
if (!billing_first_name) {
|
|
$billingInfo.find('#divBillingFirstName .error-text').remove();
|
|
$billingInfo.find('#divBillingFirstName').addClass("error");
|
|
$billingInfo.find('#billing-first-name').after("<ul class='error-text'><li>First Name is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$billingInfo.find('#divBillingFirstName').removeClass("error");
|
|
}
|
|
|
|
if (!billing_last_name) {
|
|
$billingInfo.find('#divBillingLastName .error-text').remove();
|
|
$billingInfo.find('#divBillingLastName').addClass("error");
|
|
$billingInfo.find('#billing-last-name').after("<ul class='error-text'><li>Last Name is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$billingInfo.find('#divBillingLastName').removeClass("error");
|
|
}
|
|
|
|
if (!billing_address1) {
|
|
$billingInfo.find('#divBillingAddress1 .error-text').remove();
|
|
$billingInfo.find('#divBillingAddress1').addClass("error");
|
|
$billingInfo.find('#billing-address1').after("<ul class='error-text'><li>Address is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$billingInfo.find('#divBillingAddress1').removeClass("error");
|
|
}
|
|
|
|
if (!billing_zip) {
|
|
$billingInfo.find('#divBillingZip .error-text').remove();
|
|
$billingInfo.find('#divBillingZip').addClass("error");
|
|
$billingInfo.find('#billing-zip').after("<ul class='error-text'><li>Zip code is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$billingInfo.find('#divBillingZip').removeClass("error");
|
|
}
|
|
|
|
if (!billing_state) {
|
|
$billingInfo.find('#divBillingState .error-text').remove();
|
|
$billingInfo.find('#divBillingState').addClass("error");
|
|
$billingInfo.find('#billing-zip').after("<ul class='error-text'><li>State is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$billingInfo.find('#divBillingState').removeClass("error");
|
|
}
|
|
|
|
if (!billing_city) {
|
|
$billingInfo.find('#divBillingCity .error-text').remove();
|
|
$billingInfo.find('#divBillingCity').addClass("error");
|
|
$billingInfo.find('#billing-city').after("<ul class='error-text'><li>City is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$billingInfo.find('#divBillingCity').removeClass("error");
|
|
}
|
|
|
|
if (!billing_country) {
|
|
$billingInfo.find('#divBillingCountry .error-text').remove();
|
|
$billingInfo.find('#divBillingCountry').addClass("error");
|
|
$billingInfo.find('#billing-country').after("<ul class='error-text'><li>Country is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$billingInfo.find('#divBillingCountry').removeClass("error");
|
|
}
|
|
|
|
shipping_as_billing = $shippingAsBilling.is(":checked");
|
|
var shipping_first_name, shipping_last_name, shipping_address1, shipping_address2;
|
|
var shipping_city, shipping_state, shipping_zip, shipping_country;
|
|
|
|
if (!shipping_as_billing) {
|
|
shipping_first_name = $shippingAddress.find("#shipping-first-name").val();
|
|
shipping_last_name = $shippingAddress.find("#shipping-last-name").val();
|
|
shipping_address1 = $shippingAddress.find("#shipping-address1").val();
|
|
shipping_address2 = $shippingAddress.find("#shipping-address2").val();
|
|
shipping_city = $shippingAddress.find("#shipping-city").val();
|
|
shipping_state = $shippingAddress.find("#shipping-state").val();
|
|
shipping_zip = $shippingAddress.find("#shipping-zip").val();
|
|
shipping_country = $shippingAddress.find("#shipping-country").val();
|
|
|
|
if (!shipping_first_name) {
|
|
$shippingAddress.find('#divShippingFirstName .error-text').remove();
|
|
$shippingAddress.find('#divShippingFirstName').addClass("error");
|
|
$shippingAddress.find('#shipping-first-name').after("<ul class='error-text'><li>First Name is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$shippingInfo.find('#divShippingFirstName').removeClass("error");
|
|
}
|
|
|
|
if (!shipping_last_name) {
|
|
$shippingAddress.find('#divShippingLastName .error-text').remove();
|
|
$shippingAddress.find('#divShippingLastName').addClass("error");
|
|
$shippingAddress.find('#shipping-last-name').after("<ul class='error-text'><li>Last Name is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$shippingInfo.find('#divShippingLastName').removeClass("error");
|
|
}
|
|
|
|
if (!shipping_address1) {
|
|
$shippingAddress.find('#divShippingAddress1 .error-text').remove();
|
|
$shippingAddress.find('#divShippingAddress1').addClass("error");
|
|
$shippingAddress.find('#shipping-address1').after("<ul class='error-text'><li>Address is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$shippingInfo.find('#divShippingAddress1').removeClass("error");
|
|
}
|
|
|
|
if (!shipping_zip) {
|
|
$shippingAddress.find('#divShippingZip .error-text').remove();
|
|
$shippingAddress.find('#divShippingZip').addClass("error");
|
|
$shippingAddress.find('#shipping-zip').after("<ul class='error-text'><li>Zip code is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$shippingInfo.find('#divShippingZip').removeClass("error");
|
|
}
|
|
|
|
if (!shipping_state) {
|
|
$shippingAddress.find('#divShippingState .error-text').remove();
|
|
$shippingAddress.find('#divShippingState').addClass("error");
|
|
$shippingAddress.find('#shipping-zip').after("<ul class='error-text'><li>State is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$shippingInfo.find('#divShippingState').removeClass("error");
|
|
}
|
|
|
|
if (!shipping_city) {
|
|
$shippingAddress.find('#divShippingCity .error-text').remove();
|
|
$shippingAddress.find('#divShippingCity').addClass("error");
|
|
$shippingAddress.find('#shipping-city').after("<ul class='error-text'><li>City is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$shippingInfo.find('#divShippingCity').removeClass("error");
|
|
}
|
|
|
|
if (!shipping_country) {
|
|
$shippingAddress.find('#divShippingCountry .error-text').remove();
|
|
$shippingAddress.find('#divShippingCountry').addClass("error");
|
|
$shippingAddress.find('#shipping-country').after("<ul class='error-text'><li>Country is required</li></ul>");
|
|
|
|
return false;
|
|
}
|
|
else {
|
|
$shippingAddress.find('#divShippingCountry').removeClass("error");
|
|
}
|
|
}
|
|
|
|
var card_name = $paymentMethod.find("#card-name").val();
|
|
var card_number = $paymentMethod.find("#card-number").val();
|
|
var card_year = $paymentMethod.find("#card_expire-date_1i").val();
|
|
var card_month = $paymentMethod.find("#card_expire-date_2i").val();
|
|
var card_verify = $paymentMethod.find("#card-verify").val();
|
|
|
|
if (!card_name) {
|
|
$paymentMethod.find('#divCardName .error-text').remove();
|
|
$paymentMethod.find('#divCardName').addClass("error");
|
|
$paymentMethod.find('#card-name').after("<ul class='error-text'><li>Card Name is required</li></ul>");
|
|
return false;
|
|
} else {
|
|
$paymentMethod.find('#divCardName').removeClass("error");
|
|
}
|
|
|
|
if (!card_number) {
|
|
$paymentMethod.find('#divCardNumber .error-text').remove();
|
|
$paymentMethod.find('#divCardNumber').addClass("error");
|
|
$paymentMethod.find('#card-number').after("<ul class='error-text'><li>Card Number is required</li></ul>");
|
|
return false;
|
|
} else if (!$.payment.validateCardNumber(card_number)) {
|
|
$paymentMethod.find('#divCardNumber .error-text').remove();
|
|
$paymentMethod.find('#divCardNumber').addClass("error");
|
|
$paymentMethod.find('#card-number').after("<ul class='error-text'><li>Card Number is not valid</li></ul>");
|
|
return false;
|
|
} else {
|
|
$paymentMethod.find('#divCardNumber').removeClass("error");
|
|
}
|
|
|
|
if (!$.payment.validateCardExpiry(card_month, card_year)) {
|
|
$paymentMethod.find('#divCardExpiry .error-text').remove();
|
|
$paymentMethod.find('#divCardExpiry').addClass("error");
|
|
$paymentMethod.find('#card-expiry').after("<ul class='error-text'><li>Card Number is not valid</li></ul>");
|
|
} else {
|
|
$paymentMethod.find('#divCardExpiry').removeClass("error");
|
|
}
|
|
|
|
if (!card_verify) {
|
|
$paymentMethod.find('#divCardVerify .error-text').remove();
|
|
$paymentMethod.find('#divCardVerify').addClass("error");
|
|
$paymentMethod.find('#card-verify').after("<ul class='error-text'><li>Card Verification Value is required</li></ul>");
|
|
|
|
return false;
|
|
} else if(!$.payment.validateCardCVC(card_verify)) {
|
|
$paymentMethod.find('#divCardVerify .error-text').remove();
|
|
$paymentMethod.find('#divCardVerify').addClass("error");
|
|
$paymentMethod.find('#card-verify').after("<ul class='error-text'><li>Card Verification Value is not valid.</li></ul>");
|
|
|
|
return false;
|
|
} else {
|
|
$paymentMethod.find('#divCardVerify').removeClass("error");
|
|
}
|
|
|
|
billing_info = {};
|
|
shipping_info = {};
|
|
billing_info.first_name = billing_first_name;
|
|
billing_info.last_name = billing_last_name;
|
|
billing_info.address1 = billing_address1;
|
|
billing_info.address2 = billing_address2;
|
|
billing_info.city = billing_city;
|
|
billing_info.state = billing_state;
|
|
billing_info.country = billing_country;
|
|
billing_info.zip = billing_zip;
|
|
billing_info.number = card_number;
|
|
billing_info.month = card_month;
|
|
billing_info.year = card_year;
|
|
billing_info.verification_value = card_verify;
|
|
|
|
if (shipping_as_billing) {
|
|
shipping_info = $.extend({},billing_info);
|
|
delete shipping_info.number;
|
|
delete shipping_info.month;
|
|
delete shipping_info.year;
|
|
delete shipping_info.verification_value;
|
|
} else {
|
|
shipping_info.first_name = shipping_first_name;
|
|
shipping_info.last_name = shipping_last_name;
|
|
shipping_info.address1 = shipping_address1;
|
|
shipping_info.address2 = shipping_address2;
|
|
shipping_info.city = shipping_city;
|
|
shipping_info.state = shipping_state;
|
|
shipping_info.country = shipping_country;
|
|
shipping_info.zip = shipping_zip;
|
|
}
|
|
|
|
$paymentInfoPanel.find("#payment-info-next").addClass("disabled");
|
|
$paymentInfoPanel.find("#payment-info-next").off("click");
|
|
|
|
rest.createRecurlyAccount({billing_info: billing_info})
|
|
.done(function() {
|
|
moveToOrder();
|
|
$paymentInfoPanel.find("#payment-info-next").removeClass("disabled");
|
|
$paymentInfoPanel.find("#payment-info-next").on("click", next);
|
|
})
|
|
.fail(errorHandling);
|
|
}
|
|
|
|
function errorHandling(xhr, ajaxOptions, thrownError) {
|
|
$.each(xhr.responseJSON.errors, function(key, error) {
|
|
if (key == 'number') {
|
|
$paymentMethod.find('#divCardNumber .error-text').remove();
|
|
$paymentMethod.find('#divCardNumber').addClass("error");
|
|
$paymentMethod.find('#card-number').after("<ul class='error-text'><li>" + error + "</li></ul>");
|
|
}
|
|
else if (key == 'verification_value') {
|
|
$paymentMethod.find('#divCardVerify .error-text').remove();
|
|
$paymentMethod.find('#divCardVerify').addClass("error");
|
|
$paymentMethod.find('#card-verify').after("<ul class='error-text'><li>" + error + "</li></ul>");
|
|
}
|
|
});
|
|
|
|
$paymentInfoPanel.find("#payment-info-next").addClass("disabled");
|
|
$paymentInfoPanel.find("#payment-info-next").on('click', next);
|
|
}
|
|
|
|
function orderErrorHandling(xhr, ajaxOptions, thrownError) {
|
|
var message = "Error submitting payment: "
|
|
$.each(xhr.responseJSON.errors, function(key, error) {
|
|
message += key + ": " + error
|
|
})
|
|
$("#order_error").text(message)
|
|
$("#order_error").removeClass("hidden")
|
|
$orderContent.find(".place-order").on('click', placeOrder)
|
|
}
|
|
|
|
function beforeShowOrder() {
|
|
step = 3;
|
|
renderNavigation();
|
|
populateOrderPage();
|
|
}
|
|
|
|
function clearOrderPage() {
|
|
$orderContent.empty();
|
|
}
|
|
|
|
function populateOrderPage() {
|
|
clearOrderPage();
|
|
|
|
rest.getShoppingCarts()
|
|
.done(renderOrderPage)
|
|
.fail(app.ajaxError);
|
|
}
|
|
|
|
function renderOrderPage(carts) {
|
|
var data = {}
|
|
|
|
var sub_total = 0.0
|
|
var taxes = 0.0
|
|
$.each(carts, function(index, cart) {
|
|
sub_total += parseFloat(cart.product_info.price) * parseFloat(cart.quantity)
|
|
});
|
|
data.grand_total = (sub_total + taxes).toFixed(2)
|
|
data.sub_total = sub_total.toFixed(2)
|
|
data.taxes = taxes.toFixed(2)
|
|
data.carts = carts
|
|
data.billing_info = billing_info
|
|
data.shipping_info = shipping_info
|
|
data.shipping_as_billing = shipping_as_billing
|
|
var orderContentHtml = $(
|
|
context._.template(
|
|
$templateOrderContent.html(),
|
|
data,
|
|
{variable: 'data'}
|
|
)
|
|
)
|
|
|
|
$orderContent.append(orderContentHtml)
|
|
|
|
$orderPanel.find(".change-payment-info").on('click', moveToPaymentInfo)
|
|
$orderContent.find(".place-order").on('click', placeOrder)
|
|
}
|
|
|
|
function moveToOrder() {
|
|
$paymentInfoPanel.addClass("hidden");
|
|
$orderPanel.removeClass("hidden");
|
|
beforeShowOrder();
|
|
}
|
|
|
|
function moveToThanks(purchaseResponse) {
|
|
$("#order_error").addClass("hidden")
|
|
$paymentInfoPanel.addClass("hidden")
|
|
$orderPanel.addClass("hidden")
|
|
$thanksPanel.removeClass("hidden")
|
|
rest.clearShoppingCart()
|
|
beforeShowOrder()
|
|
handleJamTracksPurchased(purchaseResponse.jam_tracks)
|
|
}
|
|
|
|
function handleJamTracksPurchased(jamTracks) {
|
|
// were any JamTracks purchased?
|
|
var jamTracksPurchased = jamTracks && jamTracks.length > 0;
|
|
if(jamTracksPurchased) {
|
|
if(gon.isNativeClient) {
|
|
startDownloadJamTracks(jamTracks)
|
|
}
|
|
else {
|
|
$jamTrackInBrowser.removeClass('hidden');
|
|
}
|
|
}
|
|
}
|
|
|
|
function startDownloadJamTracks(jamTracks) {
|
|
// there can be multiple purchased JamTracks, so we cycle through them
|
|
|
|
purchasedJamTracks = jamTracks;
|
|
|
|
// populate list of jamtracks purchased, that we will iterate through graphically
|
|
context._.each(jamTracks, function(jamTrack) {
|
|
var downloadJamTrack = new context.JK.DownloadJamTrack(app, jamTrack, 'small');
|
|
var $purchasedJamTrack = $(context._.template(
|
|
$templatePurchasedJamTrack.html(),
|
|
jamTrack,
|
|
{variable: 'data'}
|
|
));
|
|
|
|
$purchasedJamTracks.append($purchasedJamTrack)
|
|
|
|
// show it on the page
|
|
$purchasedJamTrack.append(downloadJamTrack.root)
|
|
|
|
downloadJamTracks.push(downloadJamTrack)
|
|
})
|
|
|
|
iteratePurchasedJamTracks();
|
|
}
|
|
|
|
function iteratePurchasedJamTracks() {
|
|
if(purchasedJamTrackIterator < purchasedJamTracks.length ) {
|
|
var downloadJamTrack = downloadJamTracks[purchasedJamTrackIterator++];
|
|
|
|
// make sure the 'purchasing JamTrack' section can be seen
|
|
$purchasedJamTrack.removeClass('hidden');
|
|
|
|
// the widget indicates when it gets to any transition; we can hide it once it reaches completion
|
|
$(downloadJamTrack).on(EVENTS.JAMTRACK_DOWNLOADER_STATE_CHANGED, function(e, data) {
|
|
|
|
if(data.state == downloadJamTrack.states.synchronized) {
|
|
logger.debug("jamtrack " + downloadJamTrack.jamTrack.name + " synchronized;")
|
|
//downloadJamTrack.root.remove();
|
|
downloadJamTrack.destroy();
|
|
|
|
// go to the next JamTrack
|
|
iteratePurchasedJamTracks()
|
|
}
|
|
})
|
|
|
|
logger.debug("jamtrack " + downloadJamTrack.jamTrack.name + " downloader initializing")
|
|
|
|
// kick off the download JamTrack process
|
|
downloadJamTrack.init()
|
|
|
|
// XXX style-test code
|
|
// downloadJamTrack.transitionError("package-error", "The server failed to create your package.")
|
|
|
|
}
|
|
else {
|
|
logger.debug("done iterating over purchased JamTracks")
|
|
$purchasedJamTrackHeader.text('All purchased JamTracks have been downloaded successfully! You can now play them in a session.')
|
|
}
|
|
}
|
|
|
|
function moveToPaymentInfo(e) {
|
|
e.preventDefault();
|
|
$paymentInfoPanel.removeClass("hidden");
|
|
$orderPanel.addClass("hidden");
|
|
beforeShowPaymentInfo();
|
|
}
|
|
|
|
function toggleShippingAsBilling(e) {
|
|
e.preventDefault();
|
|
|
|
var shipping_as_billing = $(e.target).is(':checked');
|
|
|
|
if (!shipping_as_billing) {
|
|
$shippingAddress.removeClass("hidden");
|
|
}
|
|
else {
|
|
$shippingAddress.addClass("hidden");
|
|
}
|
|
}
|
|
|
|
function placeOrder(e) {
|
|
e.preventDefault();
|
|
$orderContent.find(".place-order").off('click')
|
|
rest.getShoppingCarts()
|
|
.done(function(carts) {
|
|
var jam_track_ids = _.map(carts, function(cart){
|
|
return cart.product_info.product_id
|
|
})
|
|
rest.placeOrder({jam_tracks: jam_track_ids})
|
|
.done(moveToThanks)
|
|
.fail(orderErrorHandling);
|
|
}
|
|
).fail(app.ajaxError);
|
|
}
|
|
|
|
function events() {
|
|
$paymentInfoPanel.find("#payment-info-next").on('click', next);
|
|
$shippingAsBilling.on('ifChanged', toggleShippingAsBilling);
|
|
}
|
|
|
|
function reset() {
|
|
}
|
|
|
|
function renderNavigation() {
|
|
$navigation.html("");
|
|
var navigationHtml = $(
|
|
context._.template(
|
|
$('#template-checkout-navigation').html(),
|
|
{current: step},
|
|
{variable: 'data'}
|
|
)
|
|
);
|
|
|
|
$navigation.append(navigationHtml);
|
|
}
|
|
|
|
function initializeControls() {
|
|
$("form.payment-info").iCheck({
|
|
checkboxClass: 'icheckbox_minimal',
|
|
radioClass: 'iradio_minimal',
|
|
inheritClass: true
|
|
});
|
|
|
|
// Use jquery.payment to limit characters and length:
|
|
$paymentMethod.find("#card-number").payment('formatCardNumber');
|
|
$paymentMethod.find("#card-verify").payment('formatCardCVC');
|
|
}
|
|
|
|
function initialize() {
|
|
var screenBindings = {
|
|
'beforeShow': beforeShow,
|
|
'afterShow': afterShow,
|
|
'beforeHide' : beforeHide
|
|
};
|
|
app.bindScreen('order', screenBindings);
|
|
|
|
$screen = $("#orderScreen");
|
|
$templateOrderContent = $("#template-order-content");
|
|
$templatePurchasedJamTrack = $('#template-purchased-jam-track');
|
|
$paymentInfoPanel = $screen.find(".checkout-payment-info");
|
|
$orderPanel = $screen.find(".order-panel");
|
|
$thanksPanel = $screen.find(".thanks-panel");
|
|
$jamTrackInBrowser = $screen.find(".thanks-detail.jam-tracks-in-browser");
|
|
$purchasedJamTrack = $thanksPanel.find(".thanks-detail.purchased-jam-track");
|
|
$purchasedJamTrackHeader = $purchasedJamTrack.find(".purchased-jam-track-header");
|
|
$purchasedJamTracks = $purchasedJamTrack.find(".purchased-list")
|
|
$navigation = $screen.find(".checkout-navigation-bar");
|
|
$billingInfo = $paymentInfoPanel.find(".billing-address");
|
|
$shippingInfo = $paymentInfoPanel.find(".shipping-address");
|
|
$paymentMethod = $paymentInfoPanel.find(".payment-method");
|
|
$shippingAddress = $paymentInfoPanel.find(".shipping-address-detail");
|
|
$shippingAsBilling = $paymentInfoPanel.find("#shipping-as-billing");
|
|
$orderContent = $orderPanel.find(".order-content");
|
|
|
|
if($screen.length == 0) throw "$screen must be specified";
|
|
if($navigation.length == 0) throw "$navigation must be specified";
|
|
|
|
initializeControls();
|
|
|
|
events();
|
|
}
|
|
|
|
this.initialize = initialize;
|
|
|
|
return this;
|
|
}
|
|
})(window,jQuery); |