523 lines
20 KiB
JavaScript
523 lines
20 KiB
JavaScript
(function(context,$) {
|
|
|
|
"use strict";
|
|
context.JK = context.JK || {};
|
|
context.JK.CheckoutPaymentScreen = function(app) {
|
|
|
|
var EVENTS = context.JK.EVENTS;
|
|
var logger = context.JK.logger;
|
|
|
|
var $screen = null;
|
|
var $navigation = null;
|
|
var $billingInfo = null;
|
|
var $shippingInfo = null;
|
|
var $paymentMethod = null;
|
|
var $shippingAddress = null;
|
|
var $shippingAsBilling = null;
|
|
var $paymentInfoPanel = null;
|
|
var $accountSignup = null;
|
|
var userDetail = null;
|
|
var step = null;
|
|
var billing_info = null;
|
|
var shipping_info = null;
|
|
var shipping_as_billing = null;
|
|
|
|
function beforeShow() {
|
|
beforeShowPaymentInfo();
|
|
}
|
|
|
|
function beforeShowPaymentInfo() {
|
|
step = 2;
|
|
renderNavigation();
|
|
renderAccountInfo();
|
|
}
|
|
|
|
|
|
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() {
|
|
|
|
}
|
|
|
|
function beforeHide() {
|
|
|
|
}
|
|
|
|
// 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");
|
|
|
|
var reuse_card = $paymentMethod.find('#save-card').is(':checked');
|
|
|
|
|
|
var email = null;
|
|
var password = null;
|
|
var isLoggedIn = context.JK.currentUserId;
|
|
if(!isLoggedIn) {
|
|
email = $accountSignup.find('input[name="email"]').val()
|
|
password = $accountSignup.find('input[name="password"]').val()
|
|
}
|
|
|
|
rest.createRecurlyAccount({billing_info: billing_info, terms_of_service: true, email: email, password: password, reuse_card: reuse_card})
|
|
.done(function() {
|
|
$paymentInfoPanel.find("#payment-info-next").removeClass("disabled");
|
|
$paymentInfoPanel.find("#payment-info-next").on("click", next);
|
|
|
|
if(isLoggedIn) {
|
|
context.location = '/client#checkout_order'
|
|
}
|
|
else {
|
|
// this means the account was created; we need to reload the page for this to take effect
|
|
context.location = '/client#checkout_order'
|
|
context.location.reload()
|
|
}
|
|
})
|
|
.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>");
|
|
}
|
|
else if(key == 'email') {
|
|
var $email = $accountSignup.find('input[name="email"]')
|
|
var $field = $email.closest('.field')
|
|
$field.find('.error-text').remove()
|
|
$field.addClass("error");
|
|
$field.append("<ul class='error-text'><li>" + error + "</li></ul>");
|
|
}
|
|
else if(key == 'password') {
|
|
var $email = $accountSignup.find('input[name="password"]')
|
|
var $field = $email.closest('.field')
|
|
$field.find('.error-text').remove()
|
|
$field.addClass("error");
|
|
$field.append("<ul class='error-text'><li>" + error + "</li></ul>");
|
|
}
|
|
});
|
|
|
|
$paymentInfoPanel.find("#payment-info-next").addClass("disabled");
|
|
$paymentInfoPanel.find("#payment-info-next").on('click', next);
|
|
}
|
|
|
|
function beforeShowOrder() {
|
|
step = 3;
|
|
renderNavigation();
|
|
populateOrderPage();
|
|
}
|
|
|
|
|
|
function populateOrderPage() {
|
|
|
|
rest.getShoppingCarts()
|
|
.done(renderOrderPage)
|
|
.fail(app.ajaxError);
|
|
}
|
|
|
|
function moveToOrder() {
|
|
window.location = '/client#/checkout_order';
|
|
}
|
|
|
|
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 events() {
|
|
$screen.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").addClass(context.JK.currentUserId ? 'signed-in' : 'not-signed-in').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('checkout_payment', screenBindings);
|
|
|
|
$screen = $("#checkoutPaymentScreen");
|
|
$paymentInfoPanel = $screen.find("#checkout-payment-info");
|
|
$navigation = $screen.find(".checkout-navigation-bar");
|
|
$billingInfo = $paymentInfoPanel.find(".billing-address");
|
|
$shippingInfo = $paymentInfoPanel.find(".shipping-address");
|
|
$paymentMethod = $paymentInfoPanel.find(".payment-method");
|
|
$accountSignup = $paymentInfoPanel.find('.jamkazam-account-signup')
|
|
$shippingAddress = $paymentInfoPanel.find(".shipping-address-detail");
|
|
$shippingAsBilling = $paymentInfoPanel.find("#shipping-as-billing");
|
|
|
|
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); |