From b8357bfa10733cdaa6f6fe354038723e910eb40e Mon Sep 17 00:00:00 2001
From: Christophe Matthieu <chm@openerp.com>
Date: Tue, 16 Jul 2013 14:57:35 +0200
Subject: [PATCH] [IMP] website_sale: begin checkout view

bzr revid: chm@openerp.com-20130716125735-wy0hwogrf18ssfhb
---
 addons/website/views/views.xml                |   2 +-
 .../website_sale/static/src/css/ecommerce.css |  30 +--
 .../static/src/css/ecommerce.sass             |  26 ++-
 .../website_sale/static/src/xml/ecommerce.xml | 172 ++++++++++++++++--
 addons/website_sale/views/ecommerce.xml       |   3 +-
 5 files changed, 192 insertions(+), 41 deletions(-)

diff --git a/addons/website/views/views.xml b/addons/website/views/views.xml
index 4e8994cc888..fb0540b14dd 100644
--- a/addons/website/views/views.xml
+++ b/addons/website/views/views.xml
@@ -39,7 +39,7 @@
                             <script type="text/javascript" src="/website/static/src/js/website_bootstrap.js"></script>
                         </t>
                     </head>
-                    <body class="oe_website oe_styling_v8">
+                    <body class="oe_website">
                     
                         <header class="oe_website_header">
                             <div class="container">
diff --git a/addons/website_sale/static/src/css/ecommerce.css b/addons/website_sale/static/src/css/ecommerce.css
index fcdf0cb6d22..3cdd2e63d9e 100644
--- a/addons/website_sale/static/src/css/ecommerce.css
+++ b/addons/website_sale/static/src/css/ecommerce.css
@@ -2,17 +2,18 @@
   font-family: "Lato";
   font-size: 13px;
 }
-.oe_ecommerce input {
-  border: 1px solid #dddddd;
-  font-size: 13px;
-  -webkit-border-radius: 3px;
-  -moz-border-radius: 3px;
-  -ms-border-radius: 3px;
-  -o-border-radius: 3px;
-  border-radius: 3px;
-  padding: 5px;
-  padding-left: 7px;
-  margin-bottom: 10px;
+.oe_ecommerce input:not([type="radio"]):not([type="checkbox"]) {
+  height: 30px;
+}
+.oe_ecommerce label > input:not([type="radio"]):not([type="checkbox"]), .oe_ecommerce label > div {
+  display: block;
+  margin-top: 3px;
+}
+.oe_ecommerce label select {
+  margin-top: 3px;
+}
+.oe_ecommerce label > div > input {
+  margin-bottom: 0;
 }
 .oe_ecommerce .oe_total {
   margin-top: 10px;
@@ -162,3 +163,10 @@
   max-width: 64px;
   max-height: 64px;
 }
+.oe_ecommerce .oe_checkout .accordion-inner {
+  padding: 9px;
+}
+.oe_ecommerce .oe_checkout .accordion-inner h4 {
+  border-bottom: 1px solid #dddddd;
+  margin-right: 30px;
+}
diff --git a/addons/website_sale/static/src/css/ecommerce.sass b/addons/website_sale/static/src/css/ecommerce.sass
index fc1ca3b5722..1bcf6e12d1b 100644
--- a/addons/website_sale/static/src/css/ecommerce.sass
+++ b/addons/website_sale/static/src/css/ecommerce.sass
@@ -1,13 +1,17 @@
 @import "compass/css3"
 
+
 .oe_ecommerce
-  input
-    border: 1px solid #ddd
-    font-size: 13px
-    +border-radius(3px)
-    padding: 5px
-    padding-left: 7px
-    margin-bottom: 10px
+  input:not([type="radio"]):not([type="checkbox"])
+    height: 30px
+  label
+    > input:not([type="radio"]):not([type="checkbox"]), > div
+      display: block
+      margin-top: 3px
+    select
+      margin-top: 3px
+    > div > input
+      margin-bottom: 0
   .oe_total
     margin-top: 10px
     td
@@ -116,4 +120,10 @@
       margin: 0 3px
     img
       max-width: 64px
-      max-height: 64px
\ No newline at end of file
+      max-height: 64px
+  .oe_checkout
+    .accordion-inner
+      padding: 9px
+      h4
+        border-bottom: 1px solid #ddd
+        margin-right: 30px
diff --git a/addons/website_sale/static/src/xml/ecommerce.xml b/addons/website_sale/static/src/xml/ecommerce.xml
index 5241733b1d2..b4f47fef26f 100644
--- a/addons/website_sale/static/src/xml/ecommerce.xml
+++ b/addons/website_sale/static/src/xml/ecommerce.xml
@@ -2,28 +2,162 @@
 <templates id="template" xml:space="preserve">
 
 <t t-name="Website.sale.Checkout">
-    <div class="accordion" id="accordion2">
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
-            Collapsible Group Item #1
-          </a>
-        </div>
-        <div id="collapseOne" class="accordion-body collapse in">
-          <div class="accordion-inner">
-            Anim pariatur cliche...
+    <div class="oe_checkout">
+      <div class="accordion" id="accordion_checkout">
+        <div class="accordion-group">
+          <div class="accordion-heading">
+            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_method">Checkout Method</a>
+          </div>
+          <div id="accordion_checkout_method" class="accordion-body collapse in">
+            <div class="accordion-inner">
+              <div class="span4">
+                <h4>Checkout as a Guest or Register</h4>
+                <p>Register with us for future convenience:</p>
+                <div>
+                  <label class="radio">Checkout as Guest<input type="radio" checked="checked" name="register_mode" value="guest"/></label>
+                  <label class="radio">Register<input type="radio" name="register_mode" value="register"/></label>
+                </div>
+                <h5>Register and save time!</h5>
+                <p>Register with us for future convenience:</p>
+                <ul class="ul">
+                  <li>Fast and easy check out</li>
+                  <li>Easy access to your order history and status</li>
+                </ul>
+                <button type="button" class="btn" data-toggle="collapse" data-target="#accordion_checkout_billing" data-parent="#accordion_checkout">Continue</button>
+              </div>
+              <div class="span4">
+                <h4>Login</h4>
+                <h5>Already registered?</h5>
+                <p>Please log in below:</p>
+                <input type="text" name="email" placeholder="Email address"/>
+                <input type="password" name="password" placeholder="Password"/>
+                <div><a href="#">Forgot your password?</a></div>
+                <button type="submit" class="btn" data-toggle="collapse" data-target="#accordion_checkout_billing" data-parent="#accordion_checkout">Login</button>
+              </div>
+            </div>
           </div>
         </div>
-      </div>
-      <div class="accordion-group">
-        <div class="accordion-heading">
-          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
-            Collapsible Group Item #2
-          </a>
+        <div class="accordion-group">
+          <div class="accordion-heading">
+            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_billing">Billing Information</a>
+          </div>
+          <div id="accordion_checkout_billing" class="accordion-body collapse">
+            <div class="accordion-inner">
+              <label class="span8">Name and firstname<input class="span7" type="text" name="name" placeholder="Name and firstname"/></label>
+              <label class="span4">Telephone<input type="text" name="tel" placeholder="Telephone"/></label>
+              <label class="span4">Fax<input type="text" name="fax" placeholder="Fax"/></label>
+              <label class="span4">Company<input type="text" name="company" placeholder="Company"/></label>
+              <label class="span4">Email address<input type="email" name="email" placeholder="Email address"/></label>
+              <label class="span8">Street<input class="span7" type="text" name="street" placeholder="Street address"/></label>
+              <label class="span4">City<input type="text" name="city" placeholder="City"/></label>
+              <label class="span4">State/Province<input type="text" name="state" placeholder="State/Province"/></label>
+              <label class="span4">Zip/Postal Code<input type="text" name="zip" placeholder="Zip/Postal Code"/></label>
+              <label class="span4">Country<input type="text" name="state" placeholder="Country"/></label>
+              <div>
+                <label class="radio">Ship to this address<input type="radio" name="shipping_method" checked="checked" value="same"/></label>
+                <label class="radio">Ship to different address<input type="radio" name="shipping_method" value="different"/></label>
+              </div>
+              <div class="span8">
+                <button type="submit" class="btn" data-toggle="collapse" data-target="#accordion_checkout_shipping" data-parent="#accordion_checkout">Continue</button>
+              </div>
+            </div>
+          </div>
         </div>
-        <div id="collapseTwo" class="accordion-body collapse">
-          <div class="accordion-inner">
-            Anim pariatur cliche...
+        <div class="accordion-group">
+          <div class="accordion-heading">
+            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_shipping">Shipping Information</a>
+          </div>
+          <div id="accordion_checkout_shipping" class="accordion-body collapse">
+            <div class="accordion-inner">
+              <label class="span8">Name and firstname<input class="span7" type="text" name="name" placeholder="Name and firstname"/></label>
+              <label class="span4">Telephone<input type="text" name="tel" placeholder="Telephone"/></label>
+              <label class="span4">Fax<input type="text" name="fax" placeholder="Fax"/></label>
+              <label class="span4">Company<input type="text" name="company" placeholder="Company"/></label>
+              <label class="span8">Street<input class="span7" type="text" name="street" placeholder="Street address"/></label>
+              <label class="span4">City<input type="text" name="city" placeholder="City"/></label>
+              <label class="span4">State/Province<input type="text" name="state" placeholder="State/Province"/></label>
+              <label class="span4">Zip/Postal Code<input type="text" name="zip" placeholder="Zip/Postal Code"/></label>
+              <label class="span4">Country<input type="text" name="state" placeholder="Country"/></label>
+              <div class="span8">
+                <button type="submit" class="btn" data-toggle="collapse" data-target="#accordion_checkout_payment" data-parent="#accordion_checkout">Continue</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="accordion-group">
+          <div class="accordion-heading">
+            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_payment">Payment Information</a>
+          </div>
+          <div id="accordion_checkout_payment" class="accordion-body collapse">
+            <div class="accordion-inner">
+              <div>
+                <label class="radio">Check / Money order<input type="radio" name="payment_method" checked="checked" value="check"/></label>
+                <label class="radio">Credit Card (saved)<input type="radio" name="payment_method" value="card"/></label>
+              </div>
+              <div>
+                <label class="span4">Name on Card<input type="text" name="name" placeholder="Name on Card"/></label>
+                <label class="span4">Credit Card Type
+                  <select name="type">
+                    <option value="">--Please Select--</option>
+                    <option value="AE">American Express</option>
+                    <option value="VI">Visa</option>
+                    <option value="MC">MasterCard</option>
+                    <option value="DI">Discover</option>
+                  </select>
+                </label>
+                <label class="span4">Credit Card Number<input type="text" name="number" placeholder="Credit Card Number"/></label>
+                <label class="span4">Expiration Date
+                  <div>
+                    <select class="span2" name="expiration_month">
+                      <option value="" selected="selected">Month</option>
+                      <option value="1">01 - January</option>
+                      <option value="2">02 - February</option>
+                      <option value="3">03 - March</option>
+                      <option value="4">04 - April</option>
+                      <option value="5">05 - May</option>
+                      <option value="6">06 - June</option>
+                      <option value="7">07 - July</option>
+                      <option value="8">08 - August</option>
+                      <option value="9">09 - September</option>
+                      <option value="10">10 - October</option>
+                      <option value="11">11 - November</option>
+                      <option value="12">12 - December</option>
+                    </select>
+                    <select class="span1" name="expiration_year">
+                      <option value="" selected="selected">Year</option>
+                      <option value="2013">2013</option>
+                      <option value="2014">2014</option>
+                      <option value="2015">2015</option>
+                      <option value="2016">2016</option>
+                      <option value="2017">2017</option>
+                      <option value="2018">2018</option>
+                      <option value="2019">2019</option>
+                      <option value="2020">2020</option>
+                      <option value="2021">2021</option>
+                      <option value="2022">2022</option>
+                      <option value="2023">2023</option>
+                    </select>
+                  </div>
+                </label>
+                <label class="span4">Card Verification Number<input type="text" name="verification" placeholder="Card Verification Number"/></label>
+              </div>
+              <div class="span8">
+                <button type="submit" class="btn" data-toggle="collapse" data-target="#accordion_checkout_review" data-parent="#accordion_checkout">Continue</button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="accordion-group">
+          <div class="accordion-heading">
+            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion_checkout" href="#accordion_checkout_review">Order Review</a>
+          </div>
+          <div id="accordion_checkout_review" class="accordion-body collapse">
+            <div class="accordion-inner">
+              Anim pariatur cliche...
+              <div class="span8">
+                <button type="submit" class="btn">Confirm your order</button>
+              </div>
+            </div>
           </div>
         </div>
       </div>
diff --git a/addons/website_sale/views/ecommerce.xml b/addons/website_sale/views/ecommerce.xml
index cd1705be3be..a6e200087b8 100644
--- a/addons/website_sale/views/ecommerce.xml
+++ b/addons/website_sale/views/ecommerce.xml
@@ -208,6 +208,7 @@
                 <t t-call="website_sale.page">
                     <t t-set="title">Your informations</t>
                     <t t-set="shop_content">
+                        <div class="oe_placeholder_checkout">-</div>
                         <form action="/shop/customer" class="oe_signin" method="post" t-if="not partner">
                             <h5>Please Sign in or enter your informations</h5>
                             <input name="login" type="text" placeholder="Login..."/><br/>
@@ -233,8 +234,6 @@
                             </address>
                             <button type="submit" class="btn btn-success">Next stage</button><t t-if="not partner"> or <button type="reset" class="btn btn-primary oe_toggleform">Sign in</button></t>
                         </form>
-                        <t t-call="website_sale.total"/>
-                        <div class="oe_placeholder_checkout">-</div>
                     </t>
                 </t>
             </field>