Redesign of the payment page

2024-11-10 05:02:36 +01:00 · 2014-05-13 17:05:26 +03:00 · 2014-05-13 17:05:26 +03:00 · 7d6587a5ff
commit 7d6587a5ff
parent 683dacdc37
3 changed files with 149 additions and 66 deletions
--- a/app/views/master.blade.php
+++ b/app/views/master.blade.php
@ -51,24 +51,45 @@

  <body>

-    <script>
-    @if (isset($_ENV['ANALYTICS_KEY']) && $_ENV['ANALYTICS_KEY'])  
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+    @if (isset($_ENV['TAG_MANAGER_KEY']) && $_ENV['TAG_MANAGER_KEY'])  
+      <!-- Google Tag Manager -->
+      <noscript><iframe src="//www.googletagmanager.com/ns.html?id={{ $_ENV['TAG_MANAGER_KEY'] }}"
+      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+      <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+      new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+      j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+      '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+      })(window,document,'script','dataLayer','{{ $_ENV['TAG_MANAGER_KEY'] }}');</script>      
+      <!-- End Google Tag Manager -->

-      ga('create', '{{ $_ENV['ANALYTICS_KEY'] }}');
-      ga('send', 'pageview');
-
-      function trackUrl(url) {
-        url = '/track' + url.replace('http:/', '');
-        ga('send', 'pageview', url);  
-      }
+      <script>
+        function trackUrl(url) {
+          url = '/track' + url.replace('http:/', '');
+          dataLayer.push({'event':url, 'eventLabel':this.src});
+        }
+      </script>
+    @elseif (isset($_ENV['ANALYTICS_KEY']) && $_ENV['ANALYTICS_KEY'])  
+      <script>
+        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+        
+        ga('create', '{{ $_ENV['ANALYTICS_KEY'] }}');        
+        ga('send', 'pageview');
+        
+        function trackUrl(url) {
+          url = '/track' + url.replace('http:/', '');
+          ga('send', 'pageview', url);  
+          //ga('send', 'event', 'photo', 'hover', this.src);
+        }
+      </script>
    @else
-      function trackUrl(url) {}
+      <script>
+        function trackUrl(url) {}
+      </script>
    @endif
-    </script>
+

    @yield('body')

--- a/app/views/payments/payment.blade.php
+++ b/app/views/payments/payment.blade.php
@ -5,11 +5,11 @@
  <style type="text/css">
  div > label.control-label
  {
-    font-weight: normal !important;    
-  }d
+    font-weight: bold !important;    
+  }
  </style>

-  {{ Former::open('payment/' . $invitationKey)->rules(array(
+  {{ Former::vertical_open('payment/' . $invitationKey)->rules(array(
      'first_name' => 'required',
      'last_name' => 'required',   
      'card_number' => 'required',
@ -24,66 +24,127 @@
      'phone' => 'required',
      'email' => 'required'   
  )) }}
+
  {{ Former::populate($client) }}
  {{ Former::populateField('first_name', $contact->first_name) }}
  {{ Former::populateField('last_name', $contact->last_name) }}
  
+  <p>&nbsp;<p/>
+  <p>&nbsp;<p/>

  <div class="row">
-    <div class="col-md-6 col-md-offset-2">
+    <div class="col-md-6" style="padding-top:16px">

-      {{ Former::legend('secure_payment') }}
-      {{ Former::text('first_name') }}
-      {{ Former::text('last_name') }}
+      <div class="row">
+        <div class="col-md-6">
+          {{ Former::text('first_name') }}
+        </div>
+        <div class="col-md-6">
+          {{ Former::text('last_name') }}
+        </div>
+      </div>

-      <p>&nbsp;<p/>
-      
-      {{ Former::text('card_number') }}
-      {{ Former::select('expiration_month')->addOption('','')
-            ->addOption('01 - January', '1')
-            ->addOption('02 - February', '2')
-            ->addOption('03 - March', '3')
-            ->addOption('04 - April', '4')
-            ->addOption('05 - May', '5')
-            ->addOption('06 - June', '6')
-            ->addOption('07 - July', '7')
-            ->addOption('08 - August', '8')
-            ->addOption('09 - September', '9')
-            ->addOption('10 - October', '10')
-            ->addOption('11 - November', '11')
-            ->addOption('12 - December', '12')
-      }}
-      {{ Former::select('expiration_year')->addOption('','')
-            ->addOption('2014', '2014')
-            ->addOption('2015', '2015')
-            ->addOption('2016', '2016')
-            ->addOption('2017', '2017')
-            ->addOption('2018', '2018')
-            ->addOption('2019', '2019')
-            ->addOption('2020', '2020')
-      }}
+      <div class="row">
+        <div class="col-md-12">
+          {{ Former::text('address1')->label('Street') }}
+        </div>
+      </div>

-      {{ Former::text('cvv') }}
+      <div class="row">
+        <div class="col-md-3">
+          {{ Former::text('address2')->label('Apt/Suite') }}      
+        </div>
+        <div class="col-md-3">
+          {{ Former::text('city') }}          
+        </div>
+        <div class="col-md-3">
+          {{ Former::text('state')->label('State/Province') }}          
+        </div>
+        <div class="col-md-3">
+          {{ Former::text('postal_code') }}          
+        </div>
+      </div>

-      <p>&nbsp;<p/>
-
-      {{ Former::text('address1')->label('Street') }}
-      {{ Former::text('address2')->label('Apt/Suite') }}
-      {{ Former::text('city') }}
-      {{ Former::text('state')->label('State/Province') }}
-      {{ Former::text('postal_code') }}
-      
      @if(strtolower($gateway->name) == 'beanstream')
-		    {{ Former::select('country')->addOption('','')->label('Country')
-			       ->fromQuery($countries, 'name', 'iso_3166_2') }}
-	  	  {{ Former::text('phone') }}
-	  	  {{ Former::text('email') }}
-	    @endif
-	  	  
-      {{ Former::actions( Button::primary_submit_lg(trans('texts.pay_now') . ' - ' . Utils::formatMoney($invoice->amount, $client->currency_id) )) }}
+        <div class="row">
+          <div class="col-md-4">
+            {{ Former::text('phone') }}
+          </div>
+          <div class="col-md-4">
+            {{ Former::text('email') }}
+          </div>
+          <div class="col-md-4">
+            {{ Former::select('country')->addOption('','')->label('Country')
+                 ->fromQuery($countries, 'name', 'iso_3166_2') }}        
+          </div>
+        </div>                
+      @endif

    </div>
-  </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">
+          {{ Former::select('expiration_month')->addOption('','')
+                ->addOption('01 - January', '1')
+                ->addOption('02 - February', '2')
+                ->addOption('03 - March', '3')
+                ->addOption('04 - April', '4')
+                ->addOption('05 - May', '5')
+                ->addOption('06 - June', '6')
+                ->addOption('07 - July', '7')
+                ->addOption('08 - August', '8')
+                ->addOption('09 - September', '9')
+                ->addOption('10 - October', '10')
+                ->addOption('11 - November', '11')
+                ->addOption('12 - December', '12')
+          }}
+        </div>
+        <div class="col-md-6">
+          {{ Former::select('expiration_year')->addOption('','')
+                ->addOption('2014', '2014')
+                ->addOption('2015', '2015')
+                ->addOption('2016', '2016')
+                ->addOption('2017', '2017')
+                ->addOption('2018', '2018')
+                ->addOption('2019', '2019')
+                ->addOption('2020', '2020')
+          }}          
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col-md-6">
+          {{ Former::text('cvv') }}        
+        </div>
+      </div>
+
+    </div>
+
+    <p>&nbsp;<p/>
+    <p>&nbsp;<p/>
+
+
+    <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>
+    </div>    
+
+  </div>
+
+
+      


  {{ Former::close() }}
--- a/app/views/public/about_us.blade.php
+++ b/app/views/public/about_us.blade.php
@ -15,7 +15,8 @@
    <div class="row">
      <div class="col-md-8 col-md-offset-2">
        <h2>What is Invoice Ninja?</h2>
-        <p>Invoice Ninja is a free, open-source solution for invoicing and billing 
+        <p>Invoice Ninja is a free, <a href="https://github.com/hillelcoren/invoice-ninja" 
+        target="_blank">open-source</a> solution for invoicing and billing 
        customers. With Invoice Ninja, you can easily build and send beautiful invoices 
        from any device that has access to the web. Your clients can print your invoices, 
        download them as pdf files, and even pay you online from within the system. </p>