[IMP] website_payment: form for credit card, using jquery.payment in the module JS file + udpated CSS / SASS

bzr revid: tde@openerp.com-20131112132133-f9nqb7jgy1ovmc5b

4 files changed, 145 insertions, 53 deletions

diff --git a/addons/website_payment/static/src/css/website_payment.css b/addons/website_payment/static/src/css/website_payment.css
index e61696fcd30..196d6cf8956 100644
--- a/addons/website_payment/static/src/css/website_payment.css
+++ b/addons/website_payment/static/src/css/website_payment.css
@@ -1,24 +1,53 @@
-@charset "UTF-8";
-
+@charset "utf-8";
 input#cc_number {
-    background-image: url('/website_payment/static/src/img/grey-dots.png');
-    background-repeat: no-repeat;
-    background-position: 14px 14px;
+  background-image: url("/website_payment/static/src/img/grey-dots.png");
+  background-repeat: no-repeat;
+  background-position: 14px 14px;
 }
 
 div.card_placeholder {
-    background-image: url('/website_payment/static/src/img/placeholder.png');
-    background-repeat: no-repeat;
-    width: 32px;
-    height: 20px;
+  background-image: url("/website_payment/static/src/img/placeholder.png");
+  background-repeat: no-repeat;
+  width: 32px;
+  height: 20px;
+  position: absolute;
+  top: 34px;
+  right: 20px;
+  -webkit-transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  transition: 0.4s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  pointer-events: none;
+}
+
+div.amex {
+  background-image: url("/website_payment/static/src/img/amex.png");
+  background-repeat: no-repeat;
+}
+
+div.diners {
+  background-image: url("/website_payment/static/src/img/diners.png");
+  background-repeat: no-repeat;
+}
+
+div.discover {
+  background-image: url("/website_payment/static/src/img/discover.png");
+  background-repeat: no-repeat;
+}
+
+div.jcb {
+  background-image: url("/website_payment/static/src/img/jcb.png");
+  background-repeat: no-repeat;
 }
 
-/*div.visa {
-    background-image: url('/website_payment/static/src/img/placeholder.png');
-    background-repeat: no-repeat;
-    background-position: 14px 14px;
-}*/
+div.mastercard {
+  background-image: url("/website_payment/static/src/img/mastercard.png");
+  background-repeat: no-repeat;
+}
+
+div.visa {
+  background-image: url("/website_payment/static/src/img/visa.png");
+  background-repeat: no-repeat;
+}
 
 input#cc_number:active, input#cc_number:focus {
-    background-image: none;
+  background-image: none;
 }
diff --git a/addons/website_payment/static/src/css/website_payment.sass b/addons/website_payment/static/src/css/website_payment.sass
index d467df2de47..b5d4d03a9bd 100644
--- a/addons/website_payment/static/src/css/website_payment.sass
+++ b/addons/website_payment/static/src/css/website_payment.sass
@@ -1,29 +1,45 @@
 @charset "utf-8"
 
-@import "compass/css3"
-
-.css_website_mail
-    .has-error
-        border-color: red
-    .css_nav_month
-        display: none
-        &:first-of-type
-            display: block
-
-.blog_content
-    a.oe_mail_expand:after
-        content: " →"
-    a.oe_mail_expand
-        font-weight: bold
-
-p.post-meta
-    position: relative
-    top: -5px
-
-.js_website_blog
-    div#right_column
-        section
-            +opacity(0.6)
-        section:hover
-            +opacity(1)
-            @include transition(all 0.2s ease-out)
+input#cc_number
+    background-image: url('/website_payment/static/src/img/grey-dots.png')
+    background-repeat: no-repeat
+    background-position: 14px 14px
+
+div.card_placeholder
+    background-image: url('/website_payment/static/src/img/placeholder.png')
+    background-repeat: no-repeat
+    width: 32px
+    height: 20px
+    position: absolute
+    top: 34px
+    right: 20px
+    -webkit-transition: .4s cubic-bezier(0.455,0.03,0.515,0.955)
+    transition: .4s cubic-bezier(0.455,0.03,0.515,0.955)
+    pointer-events: none
+
+div.amex
+    background-image: url('/website_payment/static/src/img/amex.png')
+    background-repeat: no-repeat
+
+div.diners
+    background-image: url('/website_payment/static/src/img/diners.png')
+    background-repeat: no-repeat
+
+div.discover
+    background-image: url('/website_payment/static/src/img/discover.png')
+    background-repeat: no-repeat
+
+div.jcb
+    background-image: url('/website_payment/static/src/img/jcb.png')
+    background-repeat: no-repeat
+
+div.mastercard
+    background-image: url('/website_payment/static/src/img/mastercard.png')
+    background-repeat: no-repeat
+
+div.visa
+    background-image: url('/website_payment/static/src/img/visa.png')
+    background-repeat: no-repeat
+
+input#cc_number:active, input#cc_number:focus
+    background-image: none
diff --git a/addons/website_payment/static/src/js/payment_acquirer.js b/addons/website_payment/static/src/js/payment_acquirer.js
index 0b0a2369c4e..c0678ba3651 100644
--- a/addons/website_payment/static/src/js/payment_acquirer.js
+++ b/addons/website_payment/static/src/js/payment_acquirer.js
@@ -2,11 +2,56 @@ $(document).ready(function () {
 
     $('input#cc_number').payment('formatCardNumber');
     $('input#cc_cvc').payment('formatCardCVC');
-    $('input#cc_expiry_mm').payment('restrictNumeric');
-    $('input#cc_expiry_yy').payment('restrictNumeric');
+    $('input#cc_expiry').payment('formatCardExpiry')
 
     $('input#cc_number').on('focusout', function (e) {
         var valid_value = $.payment.validateCardNumber(this.value);
-        console.log('check: ', valid_value);
+        var card_type = $.payment.cardType(this.value);
+        console.log('Validating card', this.value, 'is a', card_type, 'and valid:', valid_value);
+        if (card_type) {
+            $(this).parent('.form-group').children('.card_placeholder').removeClass().addClass('card_placeholder ' + card_type);
+        }
+        else {
+            $(this).parent('.form-group').children('.card_placeholder').removeClass().addClass('card_placeholder');   
+        }
+        if (valid_value) {
+            $(this).parent('.form-group').addClass('has-success');
+            $(this).parent('.form-group').removeClass('has-error');
+        }
+        else {
+            $(this).parent('.form-group').addClass('has-error');
+            $(this).parent('.form-group').removeClass('has-success');
+        }
+    });
+
+    $('input#cc_cvc').on('focusout', function (e) {
+        var cc_nbr = $(this).parents('.oe_cc').find('#cc_number').val();
+        var card_type = $.payment.cardType(cc_nbr);
+        var valid_value = $.payment.validateCardCVC(this.value, card_type);
+        console.log('Validating CVC', this.value, 'for card', cc_nbr, 'of type', card_type, 'and is valid:', valid_value);
+        if (valid_value) {
+            $(this).parent('.form-group').addClass('has-success');
+            $(this).parent('.form-group').removeClass('has-error');
+        }
+        else {
+            $(this).parent('.form-group').addClass('has-error');
+            $(this).parent('.form-group').removeClass('has-success');
+        }
+    });
+
+    $('input#cc_expiry').on('focusout', function (e) {
+        var expiry_value = $.payment.cardExpiryVal(this.value);
+        var month = expiry_value.month || '';
+        var year = expiry_value.year || '';
+        var valid_value = $.payment.validateCardExpiry(month, year);
+        console.log('Validating expiry', this.value, 'month', month, 'year', year, 'and is valid:', valid_value);
+        if (valid_value) {
+            $(this).parent('.form-group').addClass('has-success');
+            $(this).parent('.form-group').removeClass('has-error');
+        }
+        else {
+            $(this).parent('.form-group').addClass('has-error');
+            $(this).parent('.form-group').removeClass('has-success');
+        }
     });
 });
diff --git a/addons/website_payment/views/website_payment_templates.xml b/addons/website_payment/views/website_payment_templates.xml
index 3201283dd5e..75b0b9336d2 100644
--- a/addons/website_payment/views/website_payment_templates.xml
+++ b/addons/website_payment/views/website_payment_templates.xml
@@ -38,23 +38,25 @@
                     <div class="container mt16 js_website_blog">
                         <div class="row">
                             <h3>Paypal payment: server 2 server</h3>
-                            <form class="form-horizontal col-sm-4" role="form">
+                            <form class="form-horizontal col-sm-4 oe_cc" role="form">
                                 <div class="form-group col-sm-8">
-                                    <label for="cc_number">Card number</label>
+                                    <label class="control-label" for="cc_number">Card number</label>
                                     <input type="tel" id="cc_number" class="form-control"/>
-                                    <div class="pull-right card_placeholder"></div>
+                                    <div class="card_placeholder"></div>
+                                    <div class="visa"></div>
                                 </div>
                                 <div class="form-group col-sm-4">
-                                    <label for="cc_cvc">Card code</label>
+                                    <label class="control-label" for="cc_cvc">Card code</label>
                                     <input type="text" id="cc_cvc" class="form-control" maxlength="4" palceholder="CVC"/>
                                 </div>
                                 <div class="form-group col-sm-7">
-                                    <label for="cc_holder_name">Holder Name</label>
+                                    <label class="control-label" for="cc_holder_name">Holder Name</label>
                                     <input type="text" id="cc_hoder_name" class="form-control"/>
                                 </div>
                                 <div class="form-group col-sm-5">
-                                    <label for="cc_expires_mm">Expires</label>
-                                    <select id="cc_expires_mm" class="form-control col-sm-2" maxlength="2">
+                                    <label class="control-label" for="cc_expires_mm">Expires</label>
+                                    <input type="text" id="cc_expiry" class="form-control" maxlength="7" placeholder="MM / YY"/>
+                                    <!-- <select id="cc_expires_mm" class="form-control col-sm-2" maxlength="2">
                                         <option>MM</option>
                                         <option>01</option>
                                         <option>02</option>
@@ -66,7 +68,7 @@
                                         <option>14</option>
                                         <option>15</option>
                                         <option>16</option>
-                                    </select>
+                                    </select> -->
                                 </div>
 
                             </form>