From fbe69b8027fd3fb47569794ebd29c39af75bef8d Mon Sep 17 00:00:00 2001
From: Jean-Baptiste Bellet <jb.bellet@gmail.com>
Date: Fri, 26 Nov 2021 10:22:11 +0100
Subject: [PATCH] Manage savedCards or enter new card behavior for stripe
 payment form

---
 .../split_checkout/payment/_stripe.html.haml  | 29 ++++++++++---------
 config/locales/en.yml                         |  3 +-
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/app/views/split_checkout/payment/_stripe.html.haml b/app/views/split_checkout/payment/_stripe.html.haml
index 233460a722..a52152ad1f 100644
--- a/app/views/split_checkout/payment/_stripe.html.haml
+++ b/app/views/split_checkout/payment/_stripe.html.haml
@@ -3,21 +3,22 @@
     :javascript
       angular.module('Darkswarm').value("stripeObject", Stripe("#{Stripe.publishable_key}"))
 
-- if @saved_credit_cards.length > 0
-  .checkout-input
-    %label
-      = t('split_checkout.step2.form.stripe.use_saved_card')
-    = select_tag :card, options_for_select(@saved_credit_cards.map {|cc| [ "#{cc.brand} #{cc.last_digits} #{I18n.t(:card_expiry_abbreviation)}:#{cc.month.to_s.rjust(2, '0')}/#{cc.year}", cc.id ] }, @selected_card)
-
-.checkout-input
+%div{"data-controller": "stripe"}
   - if @saved_credit_cards.length > 0
-    %label
-      = t('split_checkout.step2.form.stripe.use_new_card')
-  %stripe-elements
+    .checkout-input
+      %label
+        = t('split_checkout.step2.form.stripe.use_saved_card')
+      = select_tag :card, options_for_select(@saved_credit_cards.map {|cc| [ "#{cc.brand} #{cc.last_digits} #{I18n.t(:card_expiry_abbreviation)}:#{cc.month.to_s.rjust(2, '0')}/#{cc.year}", cc.id ] } + [[t('split_checkout.step2.form.stripe.create_new_card'), ""]], @selected_card), { "data-action": "change->stripe#onSelectCard", "data-stripe-target": "select" } 
+
+  .checkout-input{"data-stripe-target": "stripeelements"}
+    - if @saved_credit_cards.length == 0
+      %label
+        = t('split_checkout.step2.form.stripe.use_new_card')
+    %stripe-elements
 
 
-- if spree_current_user
-  .checkout-input
-    = check_box_tag :save_card, {id: "save_card", name: "save_card", checked: false, value: "1"}
-    = label :save_card, t('split_checkout.step2.form.stripe.save_card'), { for: "save_card" }
+  - if spree_current_user
+    .checkout-input
+      = check_box_tag :save_card, {id: "save_card", name: "save_card", checked: false, value: "1"}
+      = label :save_card, t('split_checkout.step2.form.stripe.save_card'), { for: "save_card" }
     
\ No newline at end of file
diff --git a/config/locales/en.yml b/config/locales/en.yml
index de27c5c0c2..bd815d6587 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1739,8 +1739,9 @@ en:
           placeholder: 2020
         stripe:
           use_saved_card: Use saved card
-          use_new_card: or use a new card
+          use_new_card: Enter your card identifiers
           save_card: Save card for future use
+          create_new_card: or create new card below
       explaination: You can review and confirm your order in the next step which includes the final costs.
       submit: Next - Order summary
       cancel: Back to Your details