Merge pull request #8487 from jibees/7278-multipe-stripe-form-in-admin-section

Allow mutiple stripe form in the admin section

app/assets/javascripts/admin/payments/controllers/payment.js.coffee

@@ -8,3 +8,6 @@ angular.module("admin.payments").controller "PaymentCtrl", ($scope, Payment, Sta
     $scope.submitted = true
     StatusMessage.display 'progress', t("spree.admin.payments.source_forms.stripe.submitting_payment")
     Payment.purchase()
+
+  $scope.isSelected = (payment_method_id) ->
+    return parseInt($scope.form_data.payment_method) == payment_method_id

app/assets/javascripts/admin/payments/directives/stripe_elements.js.coffee

@@ -1,10 +1,12 @@
 angular.module('admin.payments').directive "stripeElements", ($injector, AdminStripeElements) ->
   restrict: 'E'
-  template: "<label for='card-element'>\
-             <div id='card-element'></div>\
-             <div id='card-errors' class='error'></div>\
-             </label>"
-
+  template: "<div >\
+             <div class='card-element'></div>\
+             <div class='error card-errors'></div>\
+             </div>"
+  scope:
+    selected: "="
+  
   link: (scope, elem, attr)->
     if $injector.has('stripeObject')
       stripe = $injector.get('stripeObject')
@@ -18,13 +20,13 @@ angular.module('admin.payments').directive "stripeElements", ($injector, AdminSt
             color: '#5c5c5c'
             '::placeholder':
               color: '#6c6c6c'
-      card.mount('#card-element')
+      card.mount(elem.find('.card-element').get(0))
 
       # Elements validates user input as it is typed. To help your customers
       # catch mistakes, you should listen to change events on the card Element
       # and display any errors:
       card.addEventListener 'change', (event) ->
-        displayError = document.getElementById('card-errors')
+        displayError = elem.find('.card-errors').get(0)
         if event.error
           displayError.textContent = event.error.message
         else
@@ -32,5 +34,7 @@ angular.module('admin.payments').directive "stripeElements", ($injector, AdminSt
 
         return
 
-      AdminStripeElements.stripe = stripe
-      AdminStripeElements.card = card
+      scope.$watch "selected", (value) ->
+        if (value)
+          AdminStripeElements.stripe = stripe
+          AdminStripeElements.card = card 

app/assets/javascripts/admin/payments/services/stripe_elements.js.coffee

@@ -1,4 +1,4 @@
-angular.module("admin.payments").factory 'AdminStripeElements', ($rootScope, StatusMessage) ->
+angular.module("admin.payments").factory 'AdminStripeElements', ($rootScope, StatusMessage, $timeout) ->
   new class AdminStripeElements
 
     # These are both set from the AdminStripeElements directive
@@ -13,7 +13,7 @@ angular.module("admin.payments").factory 'AdminStripeElements', ($rootScope, Sta
 
       @stripe.createToken(@card, cardData).then (response) =>
         if(response.error)
-          StatusMessage.display 'error', response.error.message
+          $timeout -> StatusMessage.display 'error', response.error.message
           console.error(JSON.stringify(response.error))
         else
           secrets.token = response.token.id
@@ -29,7 +29,7 @@ angular.module("admin.payments").factory 'AdminStripeElements', ($rootScope, Sta
 
       @stripe.createPaymentMethod({ type: 'card', card: @card }, @card, cardData).then (response) =>
         if(response.error)
-          StatusMessage.display 'error', response.error.message
+          $timeout -> StatusMessage.display 'error', response.error.message
           console.error(JSON.stringify(response.error))
         else
           secrets.token = response.paymentMethod.id

app/assets/javascripts/admin/utils/services/status_message.js.coffee

@@ -6,6 +6,7 @@ angular.module("admin.utils").factory "StatusMessage", ->
       notice:   {style: {color: 'grey'}}
       success:  {style: {color: '#9fc820'}}
       failure:  {style: {color: '#da5354'}}
+      error:   {style: {color: '#da5354'}}
 
     statusMessage:
       text: ""

app/views/spree/admin/payments/source_forms/_stripe.html.haml

@@ -1,6 +1,7 @@
 -# = render "spree/admin/payments/source_forms/gateway", payment_method: payment_method
 .stripe
-  = render "shared/stripe_js"
+  - content_for :stripe_js, flush: true do
+    = render "shared/stripe_js"
 
   - if Stripe.publishable_key
     :javascript
@@ -15,4 +16,4 @@
     .three.columns
       = label_tag :card_details, t(:card_details)
     .nine.columns
-      %stripe-elements
+      %stripe-elements{selected: "isSelected(#{payment_method.id})"}

app/views/spree/admin/payments/source_forms/_stripe_sca.html.haml

@@ -1,5 +1,6 @@
 .stripe
-  = render "shared/stripe_js"
+  - content_for :stripe_js, flush: true do
+    = render "shared/stripe_js"
 
   - if Stripe.publishable_key
     :javascript
@@ -14,4 +15,4 @@
     .three.columns
       = label_tag :card_details, t(:card_details)
     .nine.columns
-      %stripe-elements
+      %stripe-elements{selected: "isSelected(#{payment_method.id})"}

app/views/spree/layouts/_admin_body.html.haml

@@ -1,5 +1,6 @@
 = admin_inject_currency_config
 = render "layouts/i18n_script"
+= yield :stripe_js
 
 #wrapper{ data: { hook: '' } }
   - if flash[:error]