Skip to content

E
ecommerce
Commit 659e6f54 by Vedran Karacic Committed by Vedran Karačić
Options

Add dropdowns for US and CA states.

parent a80c4051
Showing with 130 additions and 2 deletions
ecommerce/extensions/payment/forms.py
......@@ -61,12 +61,12 @@ class PaymentForm(forms.Form):
css_class='form-item col-md-6'
),
Div(
Div('state'),
Div('country'),
HTML('<p class="help-block"></p>'),
css_class='form-item col-md-6'
),
Div(
Div('country'),
Div('state'),
HTML('<p class="help-block"></p>'),
css_class='form-item col-md-6'
),
......@@ -93,6 +93,8 @@ class PaymentForm(forms.Form):
address_line1 = forms.CharField(max_length=60, label=_('Address'))
address_line2 = forms.CharField(max_length=29, required=False, label=_('Suite/Apartment Number'))
city = forms.CharField(max_length=32, label=_('City'))
# max_length for state field is set to default 60, if it needs to be changed,
# the equivalent (maxlength) attribute in the basket page JS code needs to be changed too.
state = forms.CharField(max_length=60, required=False, label=_('State/Province'))
postal_code = forms.CharField(max_length=10, required=False, label=_('Zip/Postal Code'))
country = forms.ChoiceField(choices=country_choices, label=_('Country'))
......
ecommerce/static/js/pages/basket_page.js
......@@ -168,6 +168,107 @@ define([
hideVoucherForm();
});
$('select[name=country]').on('change', function() {
var country = $('select[name=country]').val(),
inputDiv = $('#div_id_state .controls'),
states = {
'US': {
'Alabama': 'AL',
'Alaska': 'AK',
'American': 'AS',
'Arizona': 'AZ',
'Arkansas': 'AR',
'California': 'CA',
'Colorado': 'CO',
'Connecticut': 'CT',
'Delaware': 'DE',
'Dist. of Columbia': 'DC',
'Florida': 'FL',
'Georgia': 'GA',
'Guam': 'GU',
'Hawaii': 'HI',
'Idaho': 'ID',
'Illinois': 'IL',
'Indiana': 'IN',
'Iowa': 'IA',
'Kansas': 'KS',
'Kentucky': 'KY',
'Louisiana': 'LA',
'Maine': 'ME',
'Maryland': 'MD',
'Marshall Islands': 'MH',
'Massachusetts': 'MA',
'Michigan': 'MI',
'Micronesia': 'FM',
'Minnesota': 'MN',
'Mississippi': 'MS',
'Missouri': 'MO',
'Montana': 'MT',
'Nebraska': 'NE',
'Nevada': 'NV',
'New Hampshire': 'NH',
'New Jersey': 'NJ',
'New Mexico': 'NM',
'New York': 'NY',
'North Carolina': 'NC',
'North Dakota': 'ND',
'Northern Marianas': 'MP',
'Ohio': 'OH',
'Oklahoma': 'OK',
'Oregon': 'OR',
'Palau': 'PW',
'Pennsylvania': 'PA',
'Puerto Rico': 'PR',
'Rhode Island': 'RI',
'South Carolina': 'SC',
'South Dakota': 'SD',
'Tennessee': 'TN',
'Texas': 'TX',
'Utah': 'UT',
'Vermont': 'VT',
'Virginia': 'VA',
'Virgin Islands': 'VI',
'Washington': 'WA',
'West Virginia': 'WV',
'Wisconsin': 'WI',
'Wyoming': 'WY'
},
'CA': {
'Alberta': 'AB',
'British Columbia': 'BC',
'Manitoba': 'MB',
'New Brunswick': 'NB',
'Newfoundland and Labrador': 'NL',
'Northwest Territories': 'NT',
'Nova Scotia': 'NS',
'Nunavut': 'NU',
'Ontario': 'ON',
'Prince Edward Island': 'PE',
'Quebec': 'QC',
'Saskatchewan': 'SK',
'Yukon': 'YT'
}
};
if (country === 'US' || country === 'CA') {
$(inputDiv).empty();
$(inputDiv).append(
'<select name="state" class="select form-control" id="id_state"' +
'aria-required="true" required></select>'
);
_.each(states[country], function(value, key) {
$('#id_state').append($('<option>', {value: value, text: key}));
});
} else {
$(inputDiv).empty();
// In order to change the maxlength attribute, the same needs to be changed in the Django form.
$(inputDiv).append(
'<input class="textinput textInput form-control" id="id_state"' +
'maxlength="60" name="state" type="text">'
);
}
});
$('#card-number-input').on('input', function() {
detectCreditCard();
});
......
ecommerce/static/js/test/specs/pages/basket_page_spec.js
......@@ -110,6 +110,31 @@ define([
expect($('#voucher_form_link').is(':visible')).toBeTruthy();
});
it('should make the states input field dropdown for US and CA', function() {
$(
'<fieldset>' +
'<div class="form-item"><div><select name="country">' +
'<option value=""><Choose country></option>' +
'<option value="US">United States</option>' +
'<option value="CA">Canada</option>' +
'<option value="HR">Croatia</option>' +
'</select></div><p class="help-block"></p></div>' +
'<div class="form-item"><div id="div_id_state"><div class="controls">' +
'<input name="state"></div></div>' +
'</fieldset>'
).appendTo('body');
BasketPage.onReady();
$('select[name=country]').val('US').trigger('change');
expect($('#id_state').prop('tagName')).toEqual('SELECT');
$('select[name=country]').val('HR').trigger('change');
expect($('#id_state').prop('tagName')).toEqual('INPUT');
$('select[name=country]').val('CA').trigger('change');
expect($('#id_state').prop('tagName')).toEqual('SELECT');
});
it('should disable payment button before making ajax call', function () {
spyOn(Utils, 'disableElementWhileRunning').and.callThrough();
BasketPage.onReady();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment