check flag for transaction payment

app/assets/javascripts/custom.js

@@ -101,6 +101,16 @@ $(document).ready(function() {
     railBorderRadius: '0',
     touchScrollStep : 50
   });
+
+  $('#make-reservation-slimscroll').slimScroll({
+    height: height-$('#make-reservation-slimscroll').attr('data-height'),
+    size: '5px',
+    color: 'rgba(0,0,0,0.5)',
+    alwaysVisible: false,
+    borderRadius: '0',
+    railBorderRadius: '0',
+    touchScrollStep : 50
+  });
   // $('.delete').click(function(){
   //   var method    = $(this).attr('data-method');
   //   var url       = $(this).attr('data-ref');

app/assets/javascripts/reservation.js

@@ -1,3 +1,31 @@
+//= require custom.js
+
 $(function(){
+  /*new customer UI func:*/
+  //Initialize tooltips
+  $('.nav-tabs > li a[title]').tooltip();
   
+  //Wizard
+  $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
+
+      var $target = $(e.target);
+  
+      if ($target.parent().hasClass('disabled')) {
+          return false;
+      }
+  });
+
+  $(".next-step").click(function (e) {
+      var $active = $('.wizard .nav-tabs li a.active');
+      $active.parent().next().removeClass('disabled');
+      nextTab($active);
+      $('.wizard .nav-tabs li.active .connecting-line').css({"border-bottom-left-radius": 0, "border-top-left-radius": 0});
+  });
+  $(".prev-step").click(function (e) {
+
+      var $active = $('.wizard .nav-tabs li a.active');
+      prevTab($active);
+
+  });
+  /*new customer UI func:*/
 });

app/assets/stylesheets/reservation.scss

@@ -0,0 +1,110 @@
+/*customer modal UI */
+  .wizard {
+      background: #f1f1f1;
+      padding: 10px;
+  }
+  .wizard .nav-tabs {
+      position: relative;
+      border: 0px;
+  }
+  .wizard > div.wizard-inner {
+      position: relative;
+      margin: 0 0 0 80px !important;
+  }
+  .connecting-line{
+      height:12px;
+      background: #e0e0e0;
+      position: absolute;
+      width: 115%;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      top:38%;
+      z-index: 1;
+      border-radius: 15px;
+  }
+  .active-line{
+      height:12px;
+      background: #e0e0e0;
+      position: absolute;
+      width: 5%;
+      margin: 0 auto;
+      left: 0;
+      right: 0;
+      top:61%;
+      z-index: 1;
+      border-radius: 15px !important;
+  }
+  .connecting-line a.active{
+      background-color: #2ED4E0;
+  }
+  .border-right{
+      border-radius: 15px 0 0 15px;
+  }
+  .border-left{
+      border-radius: 0;
+  }
+  .wizard .nav-tabs > li {
+    margin-bottom: -20px;
+  }
+  .wizard .nav-tabs > li > a.active > a, .wizard .nav-tabs > li > a.active > a:hover, .wizard .nav-tabs > li > a.active > a:focus {
+      cursor: default;
+      border: 0;
+      color:#2ED4E0;
+      border-bottom-color: transparent;
+  }
+  .nav-tabs li p{
+      padding-top:40px;
+      font-size: 14px;
+      text-align: center;
+  }
+  .list-inline{
+      text-align: center;
+  }
+  span.round-tab {
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+      display: inline-block;
+      border-radius: 100px;
+      background:#DFE3E4;
+      border: 2px solid #fff;
+      z-index:1;
+      position:absolute;
+      text-align: center;
+      font-size: 16px;
+  }
+  .wizard li > a.active span.round-tab{
+      background:#2196F3;
+      color:white;
+      border: 1px solid #fff;
+  }
+  span.round-tab:hover{
+      color: white;
+      border: 1px solid #fff;
+      background-color:#2196F3; 
+  }
+  .wizard .nav-tabs > li {
+      width: 25%;
+  }
+  .wizard .nav-tabs > li a{
+      width: 28px;
+      height: 28px;
+      margin: 18px auto;
+      border-radius: 100%;
+      padding: 0;
+      color: #777;
+  }
+  .wizard .tab-pane {
+      position: relative;
+      padding-top: 5px;
+      border-top: 1px solid #fff;
+      margin-top: 20px;
+  }
+  .next-step:hover, .next-step, .prev-step:hover, .prev-step{
+      position: relative;
+      background-color: #2196F3;
+      font-size: 14px;
+      color: #FFFFFF;
+  }
+/*customer modal UI */

app/assets/stylesheets/reset.css

@@ -286,13 +286,13 @@ section.content {
 
 /* shop name margin */
 .shop-name-margin {
-  margin-left : 15%;
+  margin-left : 10%;
 }
 /* shop name margin */
 
 /* online order margin */
 .online-order-margin {
-  margin-left : 13%;
+  margin-left : 10%;
   margin-bottom : 9.9999px;
 }
 /* online order margin */