* wip
This commit is contained in:
parent
1cd8288cc3
commit
23488f8f7f
|
|
@ -0,0 +1,499 @@
|
|||
(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 $orderPanel = null;
|
||||
var $orderContent = 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");
|
||||
|
||||
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 beforeShowOrder() {
|
||||
step = 3;
|
||||
renderNavigation();
|
||||
populateOrderPage();
|
||||
}
|
||||
|
||||
function clearOrderPage() {
|
||||
$orderContent.empty();
|
||||
}
|
||||
|
||||
function populateOrderPage() {
|
||||
clearOrderPage();
|
||||
|
||||
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() {
|
||||
$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('checkout_payment', screenBindings);
|
||||
|
||||
$screen = $("#checkoutPaymentScreen");
|
||||
$paymentInfoPanel = $screen.find(".checkout-payment-info");
|
||||
$orderPanel = $screen.find(".order-panel");
|
||||
$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);
|
||||
|
|
@ -8,7 +8,7 @@
|
|||
}
|
||||
|
||||
.nav-signin {
|
||||
margin-left: 5%;
|
||||
margin-left: 30px;
|
||||
}
|
||||
|
||||
.nav-text {
|
||||
|
|
@ -27,105 +27,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.checkout-payment-info, .checkout-place-order {
|
||||
|
||||
form.payment-info {
|
||||
width: 100%;
|
||||
|
||||
input[type="text"] {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.billing-address {
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
h2.billing-caption {
|
||||
margin: 20px 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.billing-label {
|
||||
padding-top: 8px;
|
||||
width: 30%;
|
||||
float: left;
|
||||
text-align: right;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.billing-value {
|
||||
width: 65%;
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-method {
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
h2.payment-method-caption {
|
||||
margin: 20px 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
padding-top: 8px;
|
||||
width: 35%;
|
||||
float: left;
|
||||
text-align: right;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
width: 60%;
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.save-card-checkbox {
|
||||
float:left;
|
||||
display:block;
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-address {
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
h2.shipping-address-label {
|
||||
margin: 20px 5px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.shipping-as-billing {
|
||||
float:left;
|
||||
display:block;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.divBillingHelper {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.shipping-label {
|
||||
padding-top: 8px;
|
||||
width: 30%;
|
||||
float: left;
|
||||
text-align: right;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.shipping-value {
|
||||
width: 65%;
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.thanks-panel {
|
||||
padding: 30px;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,156 @@
|
|||
@import "client/common.css.scss";
|
||||
#checkoutPaymentScreen {
|
||||
|
||||
.payment-wrapper {
|
||||
padding:10px 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size:12px;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.payment-prompt {
|
||||
color:white;
|
||||
line-height:125%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
color:white;
|
||||
background-color:#4d4d4d;
|
||||
font-weight:normal;
|
||||
margin: 0 0 30px 0;
|
||||
font-size:14px;
|
||||
padding-left:10px;
|
||||
|
||||
&.shipping-address-label {
|
||||
//margin-top:10px;
|
||||
}
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom:5px;
|
||||
}
|
||||
|
||||
form.payment-info {
|
||||
width: 100%;
|
||||
display:block;
|
||||
background-color:#262626;
|
||||
|
||||
input[type="text"] {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.row {
|
||||
|
||||
margin-top:20px;
|
||||
width:100%;
|
||||
clear:both;
|
||||
}
|
||||
.left-side, .right-side {
|
||||
float: left;
|
||||
width: 50%;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
|
||||
.left-side {
|
||||
border-width:0 1px 0 0;
|
||||
border-style:solid;
|
||||
border-color:#333;
|
||||
}
|
||||
|
||||
.jamkazam-account-signup {
|
||||
.account-label {
|
||||
padding-top: 4px;
|
||||
width: 30%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
|
||||
.account-value {
|
||||
width: 70%;
|
||||
text-align: left;
|
||||
float: left;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-size:12px;
|
||||
}
|
||||
.billing-address {
|
||||
|
||||
.billing-label {
|
||||
padding-top: 4px;
|
||||
width: 35%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
|
||||
.billing-value {
|
||||
width: 65%;
|
||||
text-align: left;
|
||||
float: left;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
}
|
||||
|
||||
.payment-method {
|
||||
|
||||
|
||||
.card-label {
|
||||
padding-top: 4px;
|
||||
width: 35%;
|
||||
float: left;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
@include border_box_sizing;
|
||||
position:relative;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
width: 65%;
|
||||
text-align: left;
|
||||
float: left;
|
||||
@include border_box_sizing;
|
||||
}
|
||||
|
||||
.save-card-checkbox {
|
||||
float:left;
|
||||
display:block;
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
.shipping-address {
|
||||
|
||||
.shipping-as-billing {
|
||||
float:left;
|
||||
display:block;
|
||||
margin-right:5px;
|
||||
}
|
||||
|
||||
.divBillingHelper {
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.shipping-label {
|
||||
padding-top: 8px;
|
||||
width: 30%;
|
||||
float: left;
|
||||
text-align: right;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.shipping-value {
|
||||
width: 65%;
|
||||
text-align: left;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -54,6 +54,7 @@
|
|||
*= require ./shoppingCart
|
||||
*= require ./checkout
|
||||
*= require ./checkout_signin
|
||||
*= require ./checkout_payment
|
||||
*= require ./genreSelector
|
||||
*= require ./sessionList
|
||||
*= require ./searchResults
|
||||
|
|
|
|||
|
|
@ -5,88 +5,185 @@ div layout="screen" layout-id="checkout_payment" id="checkoutPaymentScreen" clas
|
|||
h1 check out
|
||||
= render "screen_navigation"
|
||||
.content-body
|
||||
#order_error.error.hidden
|
||||
.content-body-scroller
|
||||
.checkout-signin
|
||||
.content-wrapper
|
||||
.checkout-navigation-bar
|
||||
.payment-wrapper
|
||||
p.payment-prompt
|
||||
| Please enter you billing address and payment information below. You will not be billed for your first JamTrack, which is 100% free.
|
||||
| But we need this data to prevent fraud/abuse of those who would create multiple accounts to collect multiple free JamTracks.
|
||||
| You will not be billed for any charges of any kind without your explicit authorization.
|
||||
| There are no "hidden" charges or fees, thank you!
|
||||
|
||||
.content-holder
|
||||
.already-signed-in
|
||||
h3 YOU ARE ALREADY LOGGED IN
|
||||
p.carry-on-prompt
|
||||
| You can move on to the next step of checkout.
|
||||
.actions
|
||||
a.btnNext.button-orange NEXT
|
||||
|
||||
.left-side
|
||||
h3 ALREADY A MEMBER OF THE JAMKAZAM COMMUNITY?
|
||||
.left-side-content
|
||||
.signin-form
|
||||
.signin-prompt Sign in using your email address:
|
||||
.clearall
|
||||
form.signin-form
|
||||
.input-elements
|
||||
.out
|
||||
label.inline Email:
|
||||
.email.field
|
||||
input name='email' autofocus="true" type="text"
|
||||
.out
|
||||
label.inline Password:
|
||||
.password.field
|
||||
input name='password' autofocus="true" type="password"
|
||||
.login-error-msg Invalid login
|
||||
form class="payment-info" id="checkout-payment-info"
|
||||
.row
|
||||
.left-side
|
||||
.billing-address
|
||||
h2.billing-caption BILLING ADDRESS
|
||||
#divBillingFirstName.field
|
||||
.billing-label
|
||||
label for="billing-first-name" First Name:
|
||||
.billing-value
|
||||
input type="text" id="billing-first-name"
|
||||
.clearall
|
||||
#divBillingLastName.field
|
||||
.billing-label
|
||||
label for="billing-last-name" Last Name:
|
||||
.billing-value
|
||||
input type="text" id="billing-last-name"
|
||||
.clearall
|
||||
#divBillingAddress1.field
|
||||
.billing-label
|
||||
label for="billing-address1" Address 1:
|
||||
.billing-value
|
||||
input type="text" id="billing-address1"
|
||||
.clearall
|
||||
#divBillingAddress2.field
|
||||
.billing-label
|
||||
label for="billing-address2" Address 2:
|
||||
.billing-value
|
||||
input type="text" id="billing-address2"
|
||||
.clearall
|
||||
#divBillingCity.field
|
||||
.billing-label
|
||||
label for="billing-city" City:
|
||||
.billing-value
|
||||
input type="text" id="billing-city"
|
||||
.clearall
|
||||
#divBillingState.field
|
||||
.billing-label
|
||||
label for="billing-state" State/Region:
|
||||
.billing-value
|
||||
input type="text" id="billing-state"
|
||||
.clearall
|
||||
#divBillingZip.field
|
||||
.billing-label
|
||||
label for="billing-zip" Zip:
|
||||
.billing-value
|
||||
input type="text" id="billing-zip"
|
||||
.clearall
|
||||
#divBillingCountry.field
|
||||
.billing-label
|
||||
label for="billing-country" Country:
|
||||
.billing-value
|
||||
input type="text" id="billing-country"
|
||||
.clearall
|
||||
.right-side
|
||||
.payment-method
|
||||
h2.payment-method-caption PAYMENT METHOD
|
||||
#divCardName.field
|
||||
.card-label
|
||||
label for="card-name" Name of Card:
|
||||
.card-value
|
||||
input type="text" id="card-name"
|
||||
.clearall
|
||||
#divCardNumber.field
|
||||
.card-label
|
||||
label for="card-number" Card Number:
|
||||
.card-value
|
||||
input type="text" id="card-number"
|
||||
.clearall
|
||||
#divCardExpiry.field
|
||||
.card-label Expiration Date:
|
||||
.card-value
|
||||
=date_select("card", "expire-date", use_two_digit_numbers: true, discard_day: true, :start_year => Time.now.year, :end_year => Time.now.year + 18, :order => [:month, :day, :year], :default => -25.years.from_now, :html => {:class => "account-profile-birthdate", :id => "card-expiry"})
|
||||
.clearall
|
||||
#divCardVerify.field
|
||||
.card-label
|
||||
label for="card-verify"
|
||||
| CVV Code:
|
||||
.hint.cvv
|
||||
| (back-of-card)
|
||||
.card-value
|
||||
input type="text" id="card-verify"
|
||||
.clearall
|
||||
.card-label
|
||||
.card-value
|
||||
.save-card-checkbox.ichecbuttons
|
||||
input type="checkbox" id="save-card" name="save-card" checked="checked"
|
||||
.divSaveCardHelper
|
||||
label for="save-card" Save card for future use
|
||||
.clearall
|
||||
.clearall
|
||||
.clearall
|
||||
.row
|
||||
.left-side
|
||||
.shipping-address
|
||||
h2.shipping-address-label SHIPPING ADDRESS
|
||||
.shipping-as-billing.ichecbuttons
|
||||
input type="checkbox" id="shipping-as-billing" name="shipping-as-billing" checked="checked"
|
||||
.divBillingHelper
|
||||
label for="shipping-as-billing" Same as billing address
|
||||
.clearall
|
||||
.shipping-address-detail.hidden
|
||||
#divShippingFirstName
|
||||
.shipping-label
|
||||
label for="shipping-first-name" First Name:
|
||||
.shipping-value
|
||||
input type="text" id="shipping-first-name"
|
||||
.clearall
|
||||
#divShippingLastName
|
||||
.shipping-label
|
||||
label for="shipping-last-name" Last Name:
|
||||
.shipping-value
|
||||
input type="text" id="shipping-last-name"
|
||||
.clearall
|
||||
#divShippingAddress1
|
||||
.shipping-label
|
||||
label for="shipping-address1" Address 1:
|
||||
.shipping-value
|
||||
input type="text" id="shipping-address1"
|
||||
.clearall
|
||||
.shipping-label
|
||||
label for="shipping-address2" Address 2:
|
||||
.shipping-value
|
||||
input type="text" id="shipping-address2"
|
||||
.clearall
|
||||
#divShippingCity
|
||||
.shipping-label
|
||||
label for="shipping-city" City:
|
||||
.shipping-value
|
||||
input type="text" id="shipping-city"
|
||||
.clearall
|
||||
#divShippingState
|
||||
.shipping-label
|
||||
label for="shipping-state" State/Region:
|
||||
.shipping-value
|
||||
input type="text" id="shipping-state"
|
||||
.clearall
|
||||
#divShippingZip
|
||||
.shipping-label
|
||||
label for="shipping-zip" Zip:
|
||||
.shipping-value
|
||||
input type="text" id="shipping-zip"
|
||||
.clearall
|
||||
#divShippingCountry
|
||||
.shipping-label
|
||||
label for="shipping-country" Country:
|
||||
.shipping-value
|
||||
input type="text" id="shipping-country"
|
||||
.clearall
|
||||
.right-side
|
||||
.jamkazam-account-signup
|
||||
h2.jamkazam-account-caption JAMKAZAM ACCOUNT
|
||||
#divJamKazamEmail.field
|
||||
.account-label
|
||||
label.account-label for="email" Email:
|
||||
.account-value
|
||||
input name="email" type="text"
|
||||
#divJamKazamPassword.field
|
||||
.account-label
|
||||
label for="email" Password:
|
||||
.account-value
|
||||
input name="password" type="password"
|
||||
.clearall
|
||||
|
||||
|
||||
br clear='all'
|
||||
.clearall
|
||||
.action-bar
|
||||
|
||||
.actions
|
||||
small
|
||||
a.forgot-password href='/request_reset_password' Forgot Password?
|
||||
= link_to "SIGN IN", '#', class: 'button-orange signin-submit'
|
||||
|
||||
|
||||
p.facebook-prompt Or sign in using Facebook:
|
||||
= link_to image_tag("content/button_facebook_signin.png", {:width => 249, :height => 46}), '/auth/facebook', class: "signin-facebook"
|
||||
.right-side
|
||||
h3 NOT A MEMBER YET?
|
||||
|
||||
p.signup-later-prompt
|
||||
| Thousands of musicians are now registered members of JamKazam. Click the NEXT button below to join us, and welcome!
|
||||
|
||||
.actions
|
||||
a.btnNext.button-orange NEXT
|
||||
|
||||
script type='text/template' id='template-checkout-navigation'
|
||||
.checkout-navigation
|
||||
.nav-signin
|
||||
= "{% if (data.current == 1) { %}"
|
||||
.nav-text.selected
|
||||
.badge-number 1
|
||||
| Sign In
|
||||
= "{% } else { %}"
|
||||
.nav-text
|
||||
.badge-number.disabled 1
|
||||
| Sign In
|
||||
= "{% } %}"
|
||||
.clearall
|
||||
.nav-payment-info
|
||||
= "{% if (data.current == 2) { %}"
|
||||
.nav-text.selected
|
||||
.badge-number 2
|
||||
| Address & Payment
|
||||
= "{% } else { %}"
|
||||
.nav-text
|
||||
.badge-number.disabled 2
|
||||
| Address & Payment
|
||||
= "{% } %}"
|
||||
.clearall
|
||||
.nav-place-order
|
||||
= "{% if (data.current == 3) { %}"
|
||||
.nav-text.selected
|
||||
.badge-number 3
|
||||
| Place Order
|
||||
= "{% } else { %}"
|
||||
.nav-text
|
||||
.badge-number.disabled 3
|
||||
| Place Order
|
||||
= "{% } %}"
|
||||
.clearall
|
||||
.right
|
||||
a href="#" id="payment-info-help" class="button-grey" HELP
|
||||
a href="#" id="payment-info-next" class="button-orange" NEXT
|
||||
.clearall
|
||||
|
|
|
|||
|
|
@ -40,6 +40,7 @@
|
|||
<%= render "jamtrack" %>
|
||||
<%= render "shopping_cart" %>
|
||||
<%= render "checkout_signin" %>
|
||||
<%= render "checkout_payment" %>
|
||||
<%= render "order" %>
|
||||
<%= render "feed" %>
|
||||
<%= render "bands" %>
|
||||
|
|
@ -239,8 +240,11 @@
|
|||
var checkoutSignInScreen = new JK.CheckoutSignInScreen(JK.app);
|
||||
checkoutSignInScreen.initialize();
|
||||
|
||||
var OrderScreen = new JK.OrderScreen(JK.app);
|
||||
OrderScreen.initialize();
|
||||
var checkoutPaymentScreen = new JK.CheckoutPaymentScreen(JK.app);
|
||||
checkoutPaymentScreen.initialize();
|
||||
|
||||
// var OrderScreen = new JK.OrderScreen(JK.app);
|
||||
// OrderScreen.initialize();
|
||||
|
||||
var findMusicianScreen = new JK.FindMusicianScreen(JK.app);
|
||||
findMusicianScreen.initialize(JK.TextMessageDialogInstance);
|
||||
|
|
|
|||
Loading…
Reference in New Issue