Redesign of the payment page

app/views/header.blade.php

@@ -46,30 +46,9 @@
 
 </style>
 
-<script type="text/javascript">
+@include('script')
 
-  var currencies = {{ Currency::remember(120)->get(); }};
-  var currencyMap = {};
-  for (var i=0; i<currencies.length; i++) {
-    var currency = currencies[i];
-    currencyMap[currency.id] = currency;
-  }				
-  var NINJA = NINJA || {};
-  @if (Auth::check())
-    NINJA.primaryColor = "{{ Auth::user()->account->primary_color }}";
-    NINJA.secondaryColor = "{{ Auth::user()->account->secondary_color }}";
-  @endif
-  NINJA.parseFloat = function(str) {
-    if (!str) return '';
-    str = (str+'').replace(/[^0-9\.\-]/g, '');
-    return window.parseFloat(str);
-  }
-  function formatMoney(value, currency_id, hide_symbol) {
-    value = NINJA.parseFloat(value);
-    if (!currency_id) currency_id = {{ Session::get(SESSION_CURRENCY, DEFAULT_CURRENCY); }};
-    var currency = currencyMap[currency_id];
-    return accounting.formatMoney(value, hide_symbol ? '' : currency.symbol, currency.precision, currency.thousand_separator, currency.decimal_separator);
-  }
+<script type="text/javascript">
 
   /* Set the defaults for DataTables initialisation */
   $.extend( true, $.fn.dataTable.defaults, {

app/views/invoices/view.blade.php

@@ -1,18 +1,32 @@
-@extends('header')
+@extends('public.header')
 
 @section('head')
 	@parent
 
+		@include('script')		
+		
+		<link href="{{ asset('vendor/bootstrap/dist/css/bootstrap.min.css') }}" rel="stylesheet" type="text/css"/> 
+
 		<script src="{{ asset('js/pdf_viewer.js') }}" type="text/javascript"></script>
 		<script src="{{ asset('js/compatibility.js') }}" type="text/javascript"></script>
+
+		<style type="text/css">
+			body {
+				background-color: #f8f8f8;		
+			}
+		</style>
 @stop
 
 @section('content')
 
+	<div class="container">
+
+		<p>&nbsp;</p>
+
 		@if ($invoice->client->account->isGatewayConfigured() && !$invoice->isPaid())
 			<div class="pull-right" style="width:270px">			
 				{{ Button::normal(trans('texts.download_pdf'), array('onclick' => 'onDownloadClick()', 'class' => 'btn-lg')) }}
-			{{ Button::primary_link(URL::to('payment/' . $invitation->invitation_key), trans('texts.pay_now'), array('class' => 'btn-lg pull-right')) }}
+				{{ Button::success_link(URL::to('payment/' . $invitation->invitation_key), trans('texts.pay_now'), array('class' => 'btn-lg pull-right')) }}
 			</div>		
 		@else 
 			<div class="pull-right">
@@ -25,6 +39,11 @@
 		<iframe id="theFrame" frameborder="1" width="100%" height="1180" style="display:none;margin: 0 auto"></iframe>
 		<canvas id="theCanvas" style="display:none;width:100%;border:solid 1px #CCCCCC;"></canvas>
 
+		<p>&nbsp;</p>
+		<p>&nbsp;</p>
+
+	</div>
+
 	<script type="text/javascript">
 
 		$(function() {

app/views/payments/payment.blade.php

@@ -1,4 +1,4 @@
-@extends('header')
+@extends('public.header')
 
 @section('content')
 
@@ -30,70 +30,83 @@
 {{ Former::populateField('first_name', $contact->first_name) }}
 {{ Former::populateField('last_name', $contact->last_name) }}
 
-  <p>&nbsp;<p/>
-  <p>&nbsp;<p/>
 
+<section class="hero background hero-secure center" data-speed="2" data-type="background">
+  <div class="container">
     <div class="row">
-    <div class="col-md-6" style="padding-top:16px">
+      <h1>Secure Payment</h1>
+      <p class="thin"><img src="{{ asset('images/icon-secure-pay.png') }}">256-BiT Encryption</p>
+      <!-- <img src="{{ asset('images/providers.png') }}"> -->
+    </div>
+  </div>
+</section>
 
+<section class="secure">
+  <div class="container">
+    <div id="secure-form" class="row">          
+      <div class="col-md-7 info">
+        <form>
           <div class="row">
-        <div class="col-md-6">
+            <div class="form-group col-md-6">
               {{ Former::text('first_name') }}
             </div>
-        <div class="col-md-6">
+            <div class="form-group col-md-6">
               {{ Former::text('last_name') }}
             </div>
           </div>
 
           <div class="row">
-        <div class="col-md-12">
+            <div class="form-group col-md-12">
               {{ Former::text('address1')->label('Street') }}
             </div>
           </div>
 
           <div class="row">
-        <div class="col-md-3">
+            <div class="form-group col-md-3">
               {{ Former::text('address2')->label('Apt/Suite') }}      
             </div>
-        <div class="col-md-3">
+
+            <div class="form-group col-md-3">
               {{ Former::text('city') }}          
             </div>
-        <div class="col-md-3">
+
+            <div class="form-group col-md-3">
               {{ Former::text('state')->label('State/Province') }}          
             </div>
-        <div class="col-md-3">
+
+            <div class="form-group col-md-3">
               {{ Former::text('postal_code') }}                      
             </div>
           </div>
+        </div>
+
 
         @if(strtolower($gateway->name) == 'beanstream')
           <div class="row">
-          <div class="col-md-4">
+            <div class="form-group col-md-4">
               {{ Former::text('phone') }}
             </div>
-          <div class="col-md-4">
+            <div class="form-group col-md-4">
               {{ Former::text('email') }}
             </div>
-          <div class="col-md-4">
+            <div class="form-group col-md-4">
               {{ Former::select('country')->addOption('','')->label('Country')
                    ->fromQuery($countries, 'name', 'iso_3166_2') }}        
             </div>
           </div>                
         @endif
 
-    </div>
-
-    <div class="col-md-5 col-md-offset-1" style="background-color:#DDD;padding-top:16px">
 
+        <div class="col-md-5">
+          <div class="card">
             <div class="row">
-        <div class="col-md-12">
+              <div class="form-group col-md-12">
                 {{ Former::text('card_number') }}  
+                <!-- <span class="glyphicon glyphicon-lock"></span> -->
               </div>
             </div>
-      
-
             <div class="row">
-        <div class="col-md-6">
+              <div class="form-group col-md-6">
                 {{ Former::select('expiration_month')->addOption('','')
                       ->addOption('01 - January', '1')
                       ->addOption('02 - February', '2')
@@ -108,8 +121,9 @@
                       ->addOption('11 - November', '11')
                       ->addOption('12 - December', '12')
                 }}
+
               </div>
-        <div class="col-md-6">
+              <div class="form-group col-md-6">
                 {{ Former::select('expiration_year')->addOption('','')
                       ->addOption('2014', '2014')
                       ->addOption('2015', '2015')
@@ -119,6 +133,56 @@
                       ->addOption('2019', '2019')
                       ->addOption('2020', '2020')
                 }}          
+
+              </div>
+            </div>
+
+
+            <div class="row">
+              <div class="form-group col-md-6">
+                {{ Former::text('cvv') }}                        
+              </div>
+
+              <div class="col-md-6">
+                <!-- <p><span class="glyphicon glyphicon-credit-card" style="margin-right: 10px;"></span><a href="#">Where Do I find CVV?</a></p> -->
+              </div>
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          {{ Button::block_primary_submit_lg(strtoupper(trans('texts.pay_now')) . ' - ' . Utils::formatMoney($invoice->amount, $client->currency_id) ) }}
+        </div>
+      </form>
+    </div>
+  </div>
+</div>
+
+
+</section>
+
+
+
+
+  <!--
+    </div>
+
+    <div class="col-md-5 col-md-offset-1" style="background-color:#DDD;padding-top:16px">
+
+      <div class="row">
+        <div class="col-md-12">
+          {{ Former::text('card_number') }}  
+        </div>
+      </div>
+      
+
+      <div class="row">
+        <div class="col-md-6">
+        </div>
+        <div class="col-md-6">
         </div>
       </div>
 
@@ -143,7 +207,7 @@
     </div>    
 
   </div>
-
+-->
 
 
 

app/views/public/header.blade.php

@@ -93,8 +93,7 @@
 <div class="navbar" style="margin-bottom:0px">
   <div class="container">
     <div class="navbar-inner">
-      <a class="brand" href="{{ URL::to('/') }}"><img src=
-        "images/invoiceninja-logo.png"></a>
+      <a class="brand" href="{{ URL::to('/') }}"><img src="{{ asset('images/invoiceninja-logo.png') }}"></a>
         <ul class="navbar-list">
           <!-- <li>{{ link_to('features', 'Features' ) }}</li> -->
           <!-- <li>{{ link_to('faq', 'FAQ' ) }}</li> -->
@@ -112,7 +111,6 @@
   @yield('content')   
 
 
-
   <footer class="footer">
       <div class="container">
         <div class="row">
@@ -213,9 +211,11 @@
 </footer>
 
 <script type="text/javascript">
+
 jQuery(document).ready(function($) {   
 	$('.valign').vAlign();  
 });
+
 </script>
 
 <!--

app/views/script.blade.php

@@ -0,0 +1,26 @@
+<script type="text/javascript">
+
+  var currencies = {{ Currency::remember(120)->get(); }};
+  var currencyMap = {};
+  for (var i=0; i<currencies.length; i++) {
+    var currency = currencies[i];
+    currencyMap[currency.id] = currency;
+  }       
+  var NINJA = NINJA || {};
+  @if (Auth::check())
+    NINJA.primaryColor = "{{ Auth::user()->account->primary_color }}";
+    NINJA.secondaryColor = "{{ Auth::user()->account->secondary_color }}";
+  @endif
+  NINJA.parseFloat = function(str) {
+    if (!str) return '';
+    str = (str+'').replace(/[^0-9\.\-]/g, '');
+    return window.parseFloat(str);
+  }
+  function formatMoney(value, currency_id, hide_symbol) {
+    value = NINJA.parseFloat(value);
+    if (!currency_id) currency_id = {{ Session::get(SESSION_CURRENCY, DEFAULT_CURRENCY); }};
+    var currency = currencyMap[currency_id];
+    return accounting.formatMoney(value, hide_symbol ? '' : currency.symbol, currency.precision, currency.thousand_separator, currency.decimal_separator);
+  }
+
+</script>