show authorization links in separate table

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/queries/payments_requiring_action.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+class PaymentsRequiringAction
+  def initialize(user)
+    @user = user
+  end
+
+  attr_reader :user
+
+  def query
+    Spree::Payment.joins(order: [:user]).where.not(cvv_response_message: nil).
+      where("spree_users.id = ?", user.id)
+  end
+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,28 @@
 %script{ type: "text/ng-template", id: "account/transactions.html" }
+  - if @payments_requiring_action.present?
+    .active_table
+      %h3.requiring-authorization= t(".authorization_required")
+      .small-12.columns
+        %table
+          %tr
+            %th.order1= t :transaction
+            %th.order2= t :transaction_date
+            %th.order3.show-for-large-up= t :payment_state
+            %th.order5.text-right= t :value
+          %tbody
+            - @payments_requiring_action.each do |payment|
+              %tr
+                %td.order1
+                  = link_to payment.order.number, main_app.order_path(payment.order)
+                %td.order2
+                  = payment.updated_at.strftime("%Y-%m-%d")
+                %td.order3
+                  %a{ href: "#{payment.cvv_response_message}" }
+                    %button.bright
+                      Authorize
+                %td.order5
+                  = 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,7 @@ 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
       open_orders:
         order: Order
         shop: Shop