Tweak UI for selecting an existing card at Checkout

app/assets/javascripts/darkswarm/controllers/checkout/payment_controller.js.coffee

@@ -1,15 +1,11 @@
 Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards, Dates) ->
   angular.extend(this, new FieldsetMixin($scope))
-  defaultCard = [ {id: null, formatted: t("new_credit_card")} ]
-  $scope.savedCreditCards = defaultCard.concat savedCreditCards if savedCreditCards
-  $scope.selected_card = null
-
 
+  $scope.savedCreditCards = savedCreditCards
   $scope.name = "payment"
-
   $scope.months = Dates.months
-
   $scope.years = Dates.years
+
   $scope.secrets.card_month = "1"
   $scope.secrets.card_year = moment().year()
 

app/views/spree/checkout/payment/_gateway.html.haml

@@ -11,17 +11,17 @@
     %input{type: :text, "ng-disabled" => "!allow_name_change", "ng-value" => "order.bill_address.lastname"}
 
   .small-6.columns
-    = validated_input t(:card_number), "secrets.card_number", "ng-required" => "!secrets.selected_card", maxlength: 19, autocomplete: "off", "ng-disabled" => "!!secrets.selected_card"
+    = validated_input t(:card_number), "secrets.card_number", maxlength: 19, autocomplete: "off"
   .small-6.columns
-    = validated_input t(:card_securitycode), "secrets.card_verification_value", "ng-required" => "!secrets.selected_card", "ng-disabled" => "!!secrets.selected_card"
+    = validated_input t(:card_securitycode), "secrets.card_verification_value"
 
 .row
   .small-12.columns
     %label{for: "secrets.card_month"}
-      = t :card_expiry_date, "ng-disabled" => "!!secrets.selected_card"
+      = t :card_expiry_date
 
 .row
   .small-6.columns
-    %select{"ng-model" => "secrets.card_month", "ng-options" => "currMonth.value as currMonth.key for currMonth in months", name: "secrets.card_month", "ng-required" => "!secrets.selected_card", "ng-disabled" => "!!secrets.selected_card"}
+    %select{"ng-model" => "secrets.card_month", "ng-options" => "currMonth.value as currMonth.key for currMonth in months", name: "secrets.card_month"}
   .small-6.columns
-    %select{"ng-model" => "secrets.card_year", "ng-options" => "year for year in years", name: "secrets.card_year", "ng-required" => "!secrets.selected_card", "ng-disabled" => "!!secrets.selected_card"}
+    %select{"ng-model" => "secrets.card_year", "ng-options" => "year for year in years", name: "secrets.card_year"}

app/views/spree/checkout/payment/_stripe.html.haml

@@ -1,10 +1,14 @@
-.row{ "ng-show" => "savedCreditCards != null && savedCreditCards.length > 1" }
+.row{ "ng-show" => "savedCreditCards != null && savedCreditCards.length > 0" }
   .small-12.columns
-    %label
-      = t :previously_used_credit_cards
-    %select{"ng-model" => "secrets.selected_card", "ng-options" => "card.id as card.formatted for card in savedCreditCards", name: "selected_card", required: false}
+    %h6= t('.used_saved_card')
+    %select{ name: "selected_card", required: false, ng: { model: "secrets.selected_card", options: "card.id as card.formatted for card in savedCreditCards" } }
+      %option{ value: "" }= "{{ secrets.selected_card ? '#{t('.enter_new_card')}' : '#{t('.choose_one')}' }}"
 
-= render "spree/checkout/payment/gateway", payment_method: payment_method
+    %h6{ ng: { if: '!secrets.selected_card' } }
+      = t('.or_enter_new_card')
+
+%div{ ng: { if: '!secrets.selected_card' } }
+  = render "spree/checkout/payment/gateway", payment_method: payment_method
 
 :javascript
   Stripe.setPublishableKey("#{ENV['STRIPE_INSTANCE_PUBLISHABLE_KEY']}")

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

@@ -14,11 +14,11 @@
     .small-6.columns
       %label
         = t(:card_number)
-      %input#card_number{type: :text, "ng-model" => "secrets.card_number", "ng-required" => "!secrets.selected_card", maxlength: 19, autocomplete: "off", "ng-disabled" => "!!secrets.selected_card"}
+      %input#card_number{type: :text, "ng-model" => "secrets.card_number", maxlength: 19, autocomplete: "off"}
     .small-6.columns
       %label
         = t(:card_securitycode)
-      %input#security_code{type: :text, "ng-model" => "secrets.card_verification_value", "ng-required" => "!secrets.selected_card", autocomplete: "off", "ng-disabled" => "!!secrets.selected_card"}
+      %input#security_code{type: :text, "ng-model" => "secrets.card_verification_value", autocomplete: "off"}
 
   .row
     .small-12.columns
@@ -26,9 +26,9 @@
         = t(:card_expiry_date)
   .row
     .small-6.columns
-      %select#card_month{"ng-model" => "secrets.card_month", "ng-options" => "currMonth.value as currMonth.key for currMonth in months", name: "secrets.card_month", "ng-required" => "!secrets.selected_card", "ng-disabled" => "!!secrets.selected_card"}
+      %select#card_month{"ng-model" => "secrets.card_month", "ng-options" => "currMonth.value as currMonth.key for currMonth in months", name: "secrets.card_month"}
     .small-6.columns
-      %select#card_year{"ng-model" => "secrets.card_year", "ng-options" => "year for year in years", name: "secrets.card_year", "ng-required" => "!secrets.selected_card", "ng-disabled" => "!!secrets.selected_card"}
+      %select#card_year{"ng-model" => "secrets.card_year", "ng-options" => "year for year in years", name: "secrets.card_year"}
 
   %p
     %button.button.primary{type: :submit}

config/locales/en.yml

@@ -2154,6 +2154,13 @@ Please follow the instructions there to make your enterprise visible on the Open
       variants:
         autocomplete:
           producer_name: Producer
+    checkout:
+      payment:
+        stripe:
+          choose_one: Choose one
+          enter_new_card: Enter details for a new card
+          used_saved_card: "Use a saved card:"
+          or_enter_new_card: "Or, enter details for a new card:"
     date_picker:
       format: ! '%Y-%m-%d'
       js_format: 'yy-mm-dd'

spec/features/consumer/shopping/checkout_spec.rb

@@ -169,15 +169,16 @@ feature "As a consumer I want to check out my cart", js: true, retry: 3 do
 
         it "allows use of a saved card" do
           # shows the saved credit card dropdown
-          page.should have_content "Previously Used Credit Cards"
+          expect(page).to have_content I18n.t("spree.checkout.payment.stripe.used_saved_card")
 
-          # disables the input fields when a saved card is selected" do
+          # removes the input fields when a saved card is selected"
+          expect(page).to have_input "secrets.card_number"
           select "Visa x-1111 Exp:01/2025", from: "selected_card"
-          page.should have_css "#secrets\\.card_number[disabled]"
+          expect(page).to_not have_input "secrets.card_number"
 
           # allows checkout
           place_order
-          page.should have_content "Your order has been processed successfully"
+          expect(page).to have_content "Your order has been processed successfully"
         end
       end
     end