kilbot · smil2k · Dec 22, 2017
diff --git a/assets/js/src/apps/pos/cart/route.js b/assets/js/src/apps/pos/cart/route.js
@@ -126,6 +126,7 @@ var CartRoute = Route.extend({
     var view = new Buttons({
       buttons: [
         {action: 'void',      className: 'btn-danger pull-left'},
+        {action: 'billing',   className: 'btn-primary'},
         {action: 'fee',       className: 'btn-primary'},
         {action: 'shipping',  className: 'btn-primary'},
         //{action: 'discount',  className: 'btn-primary'},
@@ -163,7 +164,23 @@ var CartRoute = Route.extend({
           method_id   : _.first(method_ids) || ''
         });
       },
-      'action:checkout': function(){
+      'action:billing': function () {
+        if (!this.order.cart.findWhere({type: 'billing'})) {
+          this.order.cart.addToCart({
+            type: 'billing',
+            method_title: polyglot.t('titles.billing')
+          });
+        }
+      },
+      'action:checkout': function () {
+        var billing = this.order.cart.findWhere({type: 'billing'});
+        if (!billing.attributes['$valid']) {
+          Radio.trigger('global', 'error', {
+            status: polyglot.t('titles.billing_error'),
+            message: polyglot.t('messages.billing_mandatory')
+          });
+          return;
+        }
         this.navigate('checkout/' + this.order.id, { trigger: true });
       }
     });
@@ -193,4 +210,4 @@ var CartRoute = Route.extend({
 });
 
 module.exports = CartRoute;
-App.prototype.set('POSApp.Cart.Route', CartRoute);
+App.prototype.set('POSApp.Cart.Route', CartRoute);
diff --git a/assets/js/src/apps/pos/cart/views/line/layout.js b/assets/js/src/apps/pos/cart/views/line/layout.js
@@ -51,6 +51,10 @@ module.exports = LayoutView.extend({
     this.listenTo( view, 'drawer:close', this.closeDrawer );
     this.listenTo( view, 'drawer:toggle', this.toggleDrawer );
 
+    if(this.model.attributes.type === 'billing') {
+      this.openDrawer();
+    }
+
     this.getRegion('item').show(view);
   },
 
@@ -90,4 +94,4 @@ module.exports = LayoutView.extend({
 
   }
 
-});
+});
diff --git a/assets/js/src/apps/pos/cart/views/line/views/drawer.js b/assets/js/src/apps/pos/cart/views/line/views/drawer.js
@@ -31,7 +31,9 @@ module.exports = FormView.extend({
     'click @ui.addMeta'     : 'addMetaFields',
     'click @ui.removeMeta'  : 'removeMetaFields',
     'blur @ui.metaLabel'    : 'updateMeta',
-    'blur @ui.metaValue'    : 'updateMeta'
+    'blur @ui.metaValue'    : 'updateMeta',
+    'blur input[id^=billing_]' : 'saveBilling',
+    'blur select[id^=billing_]': 'saveBilling'
   },
 
   modelEvents: {
@@ -78,6 +80,14 @@ module.exports = FormView.extend({
   },
 
   onShow: function() {
+    var el = $(this.$el);
+
+    for (var key in this.model.attributes) {
+      if (key.indexOf('billing_') !== -1) {
+        el.find('#' + key).val(this.model.attributes[key]);
+      }
+    }
+
     this.$el.hide().slideDown(250);
   },
 
@@ -93,6 +103,32 @@ module.exports = FormView.extend({
     }
   },
 
+  saveBilling: function (e) {
+    if (e.target.name.indexOf('billing_') !== -1) {
+      this.model.save(e.target.name, e.target.value);
+      this.calculateMandatory();
+    }
+  },
+
+  calculateMandatory: function () {
+    var el = $(this.$el).find("input[id^=billing_]");
+    var valid = true;
+    for ( var i = 0 ; i < el.length ; i++ ) {
+      var e=el.get(i);
+
+      if ( $(e).hasClass('required') && e.value==='') {
+        valid = false;
+        break;
+      }
+      // Check email address (which might not be mandatory)
+      if (e.validity.valid === false) {
+        valid = false;
+        break;
+      }
+    }
+    this.model.save("$valid", valid);
+  },
+
   updateMeta: function(e) {
     var el        = $(e.target),
         name      = el.attr('name').split('.'),
@@ -157,4 +193,4 @@ module.exports = FormView.extend({
     row.remove();
   }
 
-});
+});
diff --git a/assets/js/src/apps/pos/cart/views/line/views/item.js b/assets/js/src/apps/pos/cart/views/line/views/item.js
@@ -21,7 +21,7 @@ module.exports = FormView.extend({
   templateHelpers: function(){
     var type = this.model.get('type');
     return {
-      product: (type !== 'shipping' && type !== 'fee')
+      product: (type !== 'billing' && type !== 'shipping' && type !== 'fee')
     };
   },
 
@@ -122,4 +122,4 @@ module.exports = FormView.extend({
     this.ui.title.find('strong').focus();
   }
 
-});
+});
diff --git a/assets/js/src/apps/pos/checkout/route.js b/assets/js/src/apps/pos/checkout/route.js
@@ -88,6 +88,23 @@ var CheckoutRoute = Route.extend({
       },
       'action:process-payment': function(btn){
         btn.trigger('state', 'loading');
+
+        var billing = this.order.cart.findWhere({ type: 'billing'});
+        if ( billing ) {
+            for ( var key in billing.attributes) {
+              if (key.indexOf('billing_') !== -1 &&
+                billing.attributes[key] !== '') {
+                if (!this.order.attributes.billing) {
+                  this.order.attributes.billing={};
+                }
+
+                this.order.attributes.billing[key.substring(8)]=
+                  billing.attributes[key];
+              }
+            }
+        }
+
+
         this.order.process()
           .always(function(){
             btn.trigger('state', 'reset');
@@ -101,4 +118,4 @@ var CheckoutRoute = Route.extend({
 });
 
 module.exports = CheckoutRoute;
-App.prototype.set('POSApp.Checkout.Route', CheckoutRoute);
+App.prototype.set('POSApp.Checkout.Route', CheckoutRoute);
diff --git a/assets/js/src/entities/orders/model.js b/assets/js/src/entities/orders/model.js
@@ -249,10 +249,13 @@ var Model = DualModel.extend({
 
     this.cart.each(function(model){
       var type = model.get('type');
-      if(type !== 'shipping' && type !== 'fee'){
-        type = 'product';
+
+      if ( type !== 'billing') {
+        if(type !== 'shipping' && type !== 'fee'){
+          type = 'product';
+        }
+        obj[type].push( model.toJSON() );
       }
-      obj[type].push( model.toJSON() );
     });
 
     // set
@@ -277,4 +280,4 @@ var Model = DualModel.extend({
 });
 
 module.exports = Model;
-App.prototype.set('Entities.Order.Model', Model);
+App.prototype.set('Entities.Order.Model', Model);
diff --git a/includes/class-wc-pos-i18n.php b/includes/class-wc-pos-i18n.php
@@ -323,6 +323,11 @@ static public function payload() {
         'customers'     => __( 'Customers', 'woocommerce' ),
         /* translators: woocommerce */
         'fee'           => __( 'Fee', 'woocommerce' ),
+        /* translators: woocommerce */
+        'billing'           => __( 'Change Billing Address', 'woocommerce' ),
+        /* translators: woocommerce */
+        'billing_error'           => __( 'Error with billing address', 'woocommerce' ),
+        /* translators: woocommerce */
         'hotkeys'       => _x( 'HotKeys', 'keyboard shortcuts', 'woocommerce-pos' ),
         /* translators: woocommerce */
         'order'         => __( 'Order', 'woocommerce' ),
@@ -358,6 +363,8 @@ static public function payload() {
         /* translators: woocommerce */
         'fee'             => __( 'Fee', 'woocommerce' ),
         /* translators: woocommerce */
+        'billing'             => __( 'Address', 'woocommerce' ),
+        /* translators: woocommerce */
         'new-order'       => __( 'New Order', 'woocommerce' ),
         /* translators: woocommerce */
         'note'            => __( 'Note', 'woocommerce' ),
@@ -387,6 +394,8 @@ static public function payload() {
         /* translators: woocommerce */
         'error'       => __( 'Sorry, there has been an error.', 'woocommerce' ),
         /* translators: woocommerce */
+        'billing_mandatory'       => __( 'Not all mandatory fields are filled.', 'woocommerce' ),
+        /* translators: woocommerce */
         'loading'     => __( 'Loading ...' ),
         /* translators: woocommerce */
         'success'     => __( 'Your changes have been saved.', 'woocommerce' ),
@@ -407,4 +416,4 @@ static public function payload() {
 
   }
 
-}
+}
diff --git a/includes/views/pos/cart/tmpl-item-drawer.php b/includes/views/pos/cart/tmpl-item-drawer.php
@@ -1,3 +1,50 @@
+{{#is type 'billing'}}
+    <?php
+            $checkout = WC_Checkout::instance();
+			$fields = $checkout->get_checkout_fields( 'billing' );
+			$f = 0;
+			foreach ( $fields as $key => $field ) {
+
+				$field['input_class']=['form-control'];
+				if (($f % 3) == 0 ) {
+                    ?>
+                    <div class="list-row">
+                    <?php
+				}
+
+				$val = null;
+
+                $label = $field['label'];
+                $field['label']='';
+
+
+                if ( $field['required'] ) {
+                    $val = $checkout->get_value( $key );
+                    array_push($field['input_class'], "required");
+                    $label = $label . "&nbsp;*";
+                    $field['custom_attributes']['required']='true';
+                }
+
+                echo "<div>" . $label . "</div>";
+				woocommerce_form_field( $key, $field, $val);
+
+				if (($f % 3) == 2 ) {
+                    ?>
+                    </div>
+                    <?php
+				}
+				$f++;
+			}
+
+			if ((($f-1) % 3) != 2 ) {
+                    ?>
+                    </div>
+                    <?php
+			}
+
+		?>
+{{/is}}
+{{#compare type '!==' 'billing'}}
 {{#if product_id}}
 <div class="list-row">
   <div><?php /* translators: woocommerce */ _e( 'Regular price', 'woocommerce' ); ?>:</div>
@@ -45,4 +92,5 @@
     </a>
   </div>
 </div>
-{{/if}}
+{{/if}}
+{{/compare}}
diff --git a/includes/views/pos/cart/tmpl-item.php b/includes/views/pos/cart/tmpl-item.php
@@ -5,7 +5,9 @@
   <dl class="meta"></dl>
   <a data-action="more" href="#" class="btn btn-default btn-circle-sm"><i class="icon-angle-down"></i></a>
 </div>
+{{#compare type '!==' 'billing'}}
 <div class="price"><input type="text" name="item_price" data-label="<?php /* translators: woocommerce */ _e( 'Price', 'woocommerce' ); ?>" data-numpad="discount" data-original="regular_price" data-percentage="off" class="form-control autogrow"></div>
+{{/compare}}
 {{else}}
 <div class="qty"></div>
 <div class="title">
@@ -16,11 +18,13 @@
   {{/if}}
   <a data-action="more" href="#" class="btn btn-default btn-circle-sm"><i class="icon-angle-down"></i></a>
 </div>
+{{#compare type '!==' 'billing'}}
 <div class="price"><input type="text" name="item_price" data-label="<?php /* translators: woocommerce */ _e( 'Price', 'woocommerce' ); ?>" data-numpad="amount" class="form-control autogrow"></div>
+{{/compare}}
 {{/if}}
 <div class="total"></div>
 <div class="action">
   <a data-action="remove" href="#">
     <i class="icon-times-circle"></i>
   </a>
-</div>
+</div>