Merge pull request #6919 from andrewpbrett/authorize-payment-links

Show authorization links in separate table

app/assets/stylesheets/darkswarm/account.scss

@@ -99,7 +99,6 @@
   .transaction-group {}
 
   table {
-    width: 100%;
     border-radius: $radius-medium $radius-medium 0 0;
 
     tr:nth-of-type(even) {
@@ -143,3 +142,29 @@
     width: 10%;
   }
 }
+
+table {
+  &.full {
+    width: 100%;
+  }
+
+  &.top-rounded {
+    border-radius: $radius-medium $radius-medium 0 0;
+  }
+}
+
+// Note this relies on the <th> using `.show-for-large-up` as well.
+.requiring-authorization tr {
+  position: relative;
+
+  th:last-child {
+    position: absolute;
+    // The following calculation is the equivalent of:
+    //
+    // $table-cell-padding + 2 * browser's default border-spacing + 2 * table border
+    //
+    // Unfortunately we can't use Scss's interpolation
+    // https://sass-lang.com/documentation/interpolation. We're using a too old version perhaps?
+    right: calc(12px + 2*2px + 2*1px);
+  }
+}

app/assets/stylesheets/darkswarm/tables.scss

@@ -1,9 +1,11 @@
+$table-cell-padding: 12px;
+
 table {
   thead tr, tbody tr {
     th, td {
       box-sizing: border-box;
-      padding-left: 12px;
-      padding-right: 12px;
+      padding-left: $table-cell-padding;
+      padding-right: $table-cell-padding;
       overflow: hidden;
     }
   }

app/assets/stylesheets/darkswarm/ui.scss

@@ -61,6 +61,13 @@
   @include border-radius(0.5em);
 
   outline: none;
+
+  &.x-small {
+    padding: 0.5rem 0.75rem;
+    font-size: $text-xs;
+    font-weight: 600;
+    margin: 0;
+  }
 }
 
 .button.primary, button.primary {

app/controllers/spree/users_controller.rb

@@ -13,6 +13,7 @@ module Spree
     before_action :enable_embedded_shopfront
 
     def show
+      @payments_requiring_action = PaymentsRequiringAction.new(spree_current_user).query
       @orders = orders_collection
 
       customers = spree_current_user.customers

app/models/spree/payment.rb

@@ -49,6 +49,7 @@ module Spree
     scope :pending, -> { with_state('pending') }
     scope :failed, -> { with_state('failed') }
     scope :valid, -> { where('state NOT IN (?)', %w(failed invalid)) }
+    scope :authorization_action_required, -> { where.not(cvv_response_message: nil) }
 
     # order state machine (see http://github.com/pluginaweek/state_machine/tree/master for details)
     state_machine initial: :checkout do

app/queries/payments_requiring_action.rb

@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+class PaymentsRequiringAction
+  def initialize(user)
+    @user = user
+  end
+
+  def query
+    Spree::Payment.joins(:order).where("spree_orders.user_id = ?", user.id).
+      authorization_action_required
+  end
+
+  private
+
+  attr_reader :user
+end

app/views/spree/users/_fat.html.haml

@@ -16,8 +16,6 @@
           %td.order3.show-for-large-up
             %i{"ng-class" => "{'ofn-i_012-warning': payment.state == 'invalid' || payment.state == 'void' || payment.state == 'failed'}"}
             %span{"ng-bind" => "::'spree.payment_states.' + payment.state | t | capitalize"}
-            %span{"ng-if" => "payment.cvv_response_message.length > 0" }
-              %a{"ng-href" => "{{payment.cvv_response_message}}", "ng-bind" => "::'spree.payment_states.authorise' | t | capitalize" }
           %td.order4.show-for-large-up
           %td.order5.text-right{"ng-class" => "{'credit' : payment.amount > 0, 'debit' : payment.amount < 0, 'paid' : payment.amount == 0}","ng-bind" => "::payment.amount | localizeCurrency"}
           %td.order6.show-for-large-up

app/views/spree/users/_transactions.html.haml

@@ -1,4 +1,27 @@
 %script{ type: "text/ng-template", id: "account/transactions.html" }
+  - if @payments_requiring_action.present?
+    .active_table.requiring-authorization
+      %h3= t(".authorisation_required")
+      %table.full.top-rounded
+        %tr
+          %th= t :transaction
+          %th= t :transaction_date
+          %th.show-for-large-up= t :payment_state
+          %th.text-right= t :value
+        %tbody
+          - @payments_requiring_action.each do |payment|
+            %tr
+              %td
+                = link_to payment.order.number, main_app.order_path(payment.order)
+              %td
+                = payment.updated_at.strftime("%Y-%m-%d")
+              %td
+                %a{ href: "#{payment.cvv_response_message}" }
+                  %button.x-small
+                    = t(".authorise")
+              %td.text-right
+                = payment.display_amount
+
   .active_table.orders{"ng-controller" => "OrdersCtrl", "ng-cloak" => true}
     %h3.my-orders= t(".transaction_history")
     %distributor.active_table_node.row.animate-repeat{"ng-if" => "Orders.shops.length > 0", "ng-repeat" => "shop in Orders.shops",

config/locales/en.yml

@@ -3732,6 +3732,8 @@ See the %{link} to find out more about %{sitename}'s features and to start using
         past_orders: Past Orders
       transactions:
         transaction_history: Transaction History
+        authorisation_required: Authorisation Required
+        authorise: Authorize
       open_orders:
         order: Order
         shop: Shop

spec/features/consumer/account/payments_spec.rb

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+feature "Payments requiring action", js: true do
+  include AuthenticationHelper
+
+  describe "as a logged in user" do
+    let(:user) { create(:user) }
+    let(:order) { create(:order, user: user) }
+
+    before do
+      login_as user
+    end
+
+    context "there is a payment requiring authorization" do
+      let!(:payment) do
+        create(:payment, order: order, cvv_response_message: "https://stripe.com/redirect")
+      end
+
+      it "shows a table of payments requiring authorization" do
+        visit "/account"
+
+        find("a", :text => %r{#{I18n.t('spree.users.show.tabs.transactions')}}i).click
+        expect(page).to have_content I18n.t("spree.users.transactions.authorisation_required")
+      end
+    end
+
+    context "there are no payments requiring authorization" do
+      let!(:payment) do
+        create(:payment, order: order, cvv_response_message: nil)
+      end
+
+      it "does not show the table of payments requiring authorization" do
+        visit "/account"
+
+        find("a", :text => %r{#{I18n.t('spree.users.show.tabs.transactions')}}i).click
+        expect(page).to_not have_content I18n.t("spree.users.transactions.authorisation_required")
+      end
+    end
+  end
+end

spec/queries/payments_requiring_action_spec.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe PaymentsRequiringAction do
+  let(:user) { create(:user) }
+  let(:order) { create(:order, user: user) }
+  subject(:payments_requiring_action) { described_class.new(user) }
+
+  describe '#query' do
+    context "payment has a cvv_response_message" do
+      let(:payment) do
+        create(:payment, order: order, cvv_response_message: "https://stripe.com/redirect")
+      end
+
+      it "finds the payment" do
+        expect(payments_requiring_action.query.all).to include(payment)
+      end
+    end
+
+    context "payment has no cvv_response_message" do
+      let(:payment) do
+        create(:payment, order: order, cvv_response_message: nil)
+      end
+
+      it "does not find the payment" do
+        expect(payments_requiring_action.query.all).to_not include(payment)
+      end
+    end
+  end
+end