Add default card, disable inputs when a card is selected

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

@@ -1,8 +1,10 @@
 Darkswarm.controller "PaymentCtrl", ($scope, $timeout, savedCreditCards) ->
   angular.extend(this, new FieldsetMixin($scope))
-  $scope.savedCreditCards = savedCreditCards
+  defaultCard = [ {id: null, formatted: t("new_credit_card")} ]
+  $scope.savedCreditCards = defaultCard.concat savedCreditCards if savedCreditCards
   $scope.selected_card = null
 
+
   $scope.name = "payment"
 
   $scope.months = [

app/helpers/injection_helper.rb

@@ -71,8 +71,11 @@ module InjectionHelper
 
   def inject_saved_credit_cards
     if spree_current_user
-      inject_json_ams "savedCreditCards", spree_current_user.credit_cards, Api::CreditCardSerializer
+      data = spree_current_user.credit_cards
+    else
+      data = nil
     end
+    inject_json_ams "savedCreditCards", data, Api::CreditCardSerializer
   end
 
   def inject_json(name, partial, opts = {})

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

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

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

@@ -1,8 +1,8 @@
-.row{ "ng-show" => "savedCreditCards != null && savedCreditCards.length > 0" }
+.row{ "ng-show" => "savedCreditCards != null && savedCreditCards.length > 1" }
   .small-12.columns
     %label
       = t :previously_used_credit_cards
-    %select{"ng-model" => "selected_card", "ng-options" => "card.id as card.formatted for card in savedCreditCards", name: "secrets.card_year", required: true}
+    %select{"ng-model" => "selected_card", "ng-options" => "card.id as card.formatted for card in savedCreditCards", name: "selected_card", required: false}
 
 = render "spree/checkout/payment/gateway", payment_method: payment_method
 

config/locales/en.yml

@@ -862,6 +862,7 @@ en:
   card_expiry_date: Expiry Date
   card_masked_digit: "X"
   card_expiry_abbreviation: "Exp"
+  new_credit_card: "New credit card"
 
   ie_warning_headline: "Your browser is out of date :-("
   ie_warning_text: "For the best Open Food Network experience, we strongly recommend upgrading your browser:"

spec/factories.rb

@@ -368,6 +368,7 @@ FactoryGirl.define do
     stripe_user_id "abc123"
     stripe_publishable_key "xyz456"
   end
+
 end
 
 

spec/features/consumer/shopping/checkout_spec.rb

@@ -39,7 +39,6 @@ feature "As a consumer I want to check out my cart", js: true, retry: 3 do
       end
     end
 
-
     before do
       distributor.shipping_methods << sm1
       distributor.shipping_methods << sm2
@@ -61,61 +60,66 @@ feature "As a consumer I want to check out my cart", js: true, retry: 3 do
         page.should have_content "An item in your cart has become unavailable"
       end
     end
+
     context 'login in as user' do
       let(:user) { create(:user) }
 
       before do
         quick_login_as(user)
-        visit checkout_path
-
-        toggle_shipping
-        choose sm1.name
-        toggle_payment
-        choose pm1.name
-        toggle_details
-        within "#details" do
-          fill_in "First Name", with: "Will"
-          fill_in "Last Name", with: "Marshall"
-          fill_in "Email", with: "test@test.com"
-          fill_in "Phone", with: "0468363090"
-        end
-        toggle_billing
-        check "Save as default billing address"
-        within "#billing" do
-          fill_in "City", with: "Melbourne"
-          fill_in "Postcode", with: "3066"
-          fill_in "Address", with: "123 Your Head"
-          select "Australia", from: "Country"
-          select "Victoria", from: "State"
-        end
-
-        toggle_shipping
-        check "Shipping address same as billing address?"
-        check "Save as default shipping address"
       end
 
-      it "sets user's default billing address and shipping address" do
-        user.bill_address.should be_nil
-        user.ship_address.should be_nil
+      context "with details filled out" do
+        before do
+          visit checkout_path
+          toggle_shipping
+          choose sm1.name
+          toggle_payment
+          choose pm1.name
+          toggle_details
+          within "#details" do
+            fill_in "First Name", with: "Will"
+            fill_in "Last Name", with: "Marshall"
+            fill_in "Email", with: "test@test.com"
+            fill_in "Phone", with: "0468363090"
+          end
+          toggle_billing
+          check "Save as default billing address"
+          within "#billing" do
+            fill_in "City", with: "Melbourne"
+            fill_in "Postcode", with: "3066"
+            fill_in "Address", with: "123 Your Head"
+            select "Australia", from: "Country"
+            select "Victoria", from: "State"
+          end
 
-        order.bill_address.should be_nil
-        order.ship_address.should be_nil
+          toggle_shipping
+          check "Shipping address same as billing address?"
+          check "Save as default shipping address"
+        end
 
-        place_order
-        page.should have_content "Your order has been processed successfully"
+        it "sets user's default billing address and shipping address" do
+          user.bill_address.should be_nil
+          user.ship_address.should be_nil
 
-        order.reload.bill_address.address1.should eq '123 Your Head'
-        order.reload.ship_address.address1.should eq '123 Your Head'
+          order.bill_address.should be_nil
+          order.ship_address.should be_nil
 
-        order.customer.bill_address.address1.should eq '123 Your Head'
-        order.customer.ship_address.address1.should eq '123 Your Head'
+          place_order
+          page.should have_content "Your order has been processed successfully"
 
-        user.reload.bill_address.address1.should eq '123 Your Head'
-        user.reload.ship_address.address1.should eq '123 Your Head'
-      end
+          order.reload.bill_address.address1.should eq '123 Your Head'
+          order.reload.ship_address.address1.should eq '123 Your Head'
 
-      it "it doesn't tell about previous orders" do
-        expect(page).to_not have_content("You have an order for this order cycle already.")
+          order.customer.bill_address.address1.should eq '123 Your Head'
+          order.customer.ship_address.address1.should eq '123 Your Head'
+
+          user.reload.bill_address.address1.should eq '123 Your Head'
+          user.reload.ship_address.address1.should eq '123 Your Head'
+        end
+
+        it "it doesn't tell about previous orders" do
+          expect(page).to_not have_content("You have an order for this order cycle already.")
+        end
       end
 
       context "with previous orders" do
@@ -124,13 +128,41 @@ feature "As a consumer I want to check out my cart", js: true, retry: 3 do
         before do
           order.distributor.allow_order_changes = true
           order.distributor.save
+          visit checkout_path
         end
 
         it "informs about previous orders" do
-          visit checkout_path
           expect(page).to have_content("You have an order for this order cycle already.")
         end
       end
+
+      context "with Stripe" do
+        let!(:stripe_pm) { create(:payment_method, distributors: [distributor], name: "Stripe", type: "Spree::Gateway::StripeConnect") }
+
+        let!(:saved_card) {
+          create(:credit_card,
+          user_id: user.id,
+          month: "01",
+          year: "2025",
+          cc_type: "Visa",
+          number: "1111111111111111")
+        }
+
+        before do
+          visit checkout_path
+          toggle_payment
+          choose stripe_pm.name
+        end
+
+        it "shows the saved credit card dropdown" do
+          page.should have_content "Previously Used Credit Cards"
+        end
+
+        it "disables the input fields when a saved card is selected" do
+          select "Visa XXXX XXXX XXXX 1111 Exp 01/2025", from: "selected_card"
+          page.should have_css "#secrets\\.card_number[disabled]"
+        end
+      end
     end
 
     context "on the checkout page" do