Merge pull request #236 from nebulab/mm/i229-paypal-button-style

Let PayPal button to receive locale/style parameters

app/assets/javascripts/solidus_paypal_braintree/paypal_button.js

@@ -7,6 +7,12 @@
 SolidusPaypalBraintree.PaypalButton = function(element, paypalOptions, options) {
   this._element = element;
   this._paypalOptions = paypalOptions || {};
+
+  this.locale = paypalOptions['locale'] || "en_US";
+  this.style = paypalOptions['style'] || {};
+  delete paypalOptions['locale'];
+  delete paypalOptions['style'];
+
   this._options = options || {};
   this._client = null;
   this._environment = this._paypalOptions.environment || 'sandbox';
@@ -34,17 +40,19 @@ SolidusPaypalBraintree.PaypalButton.prototype.initialize = function() {
 SolidusPaypalBraintree.PaypalButton.prototype.initializeCallback = function() {
   this._paymentMethodId = this._client.paymentMethodId;
 
-  paypal.Button.render({
+  var render_options = {
     env: this._environment,
-
+    locale: this.locale,
+    style: this.style,
     payment: function () {
       return this._client.getPaypalInstance().createPayment(this._paypalOptions);
     }.bind(this),
-
     onAuthorize: function (data, actions) {
       return this._client.getPaypalInstance().tokenizePayment(data, this._tokenizeCallback.bind(this));
     }.bind(this)
-  }, this._element);
+  };
+
+  paypal.Button.render(render_options, this._element);
 };
 
 /**

app/helpers/braintree_checkout_helper.rb

@@ -0,0 +1,5 @@
+module BraintreeCheckoutHelper
+  def paypal_button_preference(key, store:)
+    store.braintree_configuration.preferences[key]
+  end
+end

app/models/solidus_paypal_braintree/configuration.rb

@@ -1,5 +1,23 @@
-class SolidusPaypalBraintree::Configuration < ApplicationRecord
+class SolidusPaypalBraintree::Configuration < Spree::Base
+  PAYPAL_BUTTON_PREFERENCES = {
+    color: { availables: %w[gold blue silver white black], default: 'white' },
+    size: { availables: %w[small medium large responsive], default: 'small' },
+    shape: { availables: %w[pill rect], default: 'rect' },
+    label: { availables: %w[checkout credit pay buynow paypal installment], default: 'checkout' },
+    tagline: { availables: %w[true false], default: 'false' }
+  }
+
   belongs_to :store, class_name: 'Spree::Store'
 
   validates :store, presence: true
+
+  # Preferences for Paypal button
+  PAYPAL_BUTTON_PREFERENCES.each do |name, desc|
+    preference_name = "paypal_button_#{name}".to_sym
+    attribute_name = "preferred_#{preference_name}".to_sym
+
+    preference preference_name, :string, default: desc[:default]
+
+    validates attribute_name, inclusion: desc[:availables]
+  end
 end

config/initializers/braintree.rb

@@ -1,3 +1,7 @@
 if SolidusSupport.backend_available?
   Spree::Admin::PaymentsController.helper :braintree_admin
 end
+
+if SolidusSupport.frontend_available?
+  Spree::CheckoutController.helper :braintree_checkout
+end

db/migrate/20190705115327_add_paypal_button_preferences_to_braintree_configurations.rb

@@ -0,0 +1,5 @@
+class AddPaypalButtonPreferencesToBraintreeConfigurations < ActiveRecord::Migration[5.1]
+  def change
+    add_column :solidus_paypal_braintree_configurations, :preferences, :text
+  end
+end

lib/controllers/backend/solidus_paypal_braintree/configurations_controller.rb

@@ -12,7 +12,8 @@ def update
       authorize! :update, SolidusPaypalBraintree::Configuration
 
       params = configurations_params[:configuration_fields]
-      if SolidusPaypalBraintree::Configuration.update(params.keys, params.values)
+      results = SolidusPaypalBraintree::Configuration.update(params.keys, params.values)
+      if results.all? { |r| r.valid? }
         flash[:success] = t('update_success', scope: 'solidus_paypal_braintree.configurations')
       else
         flash[:error] = t('update_error', scope: 'solidus_paypal_braintree.configurations')
@@ -24,7 +25,17 @@ def update
 
     def configurations_params
       params.require(:configurations).
-        permit(configuration_fields: [:paypal, :apple_pay, :credit_card])
+        permit(configuration_fields: [
+        :paypal,
+        :apple_pay,
+        :credit_card,
+        :preferred_paypal_button_locale,
+        :preferred_paypal_button_color,
+        :preferred_paypal_button_size,
+        :preferred_paypal_button_shape,
+        :preferred_paypal_button_label,
+        :preferred_paypal_button_tagline
+      ])
     end
   end
 end

lib/views/backend/solidus_paypal_braintree/configurations/list.html.erb

@@ -21,6 +21,12 @@
             <%= c.label :credit_card %>
             <%= c.check_box :credit_card %>
           </div>
+
+          <% config.admin_form_preference_names.each do |name| %>
+            <%= render "spree/admin/shared/preference_fields/#{config.preference_type(name)}",
+                       form: c, attribute: "preferred_#{name}",
+                       label: t(name, scope: 'spree', default: name.to_s.humanize) %>
+          <% end %>
         <% end %>
       </fieldset>
     </div>

app/views/spree/shared/_paypal_checkout_button.html.erb → lib/views/frontend/spree/shared/_paypal_checkout_button.html.erb

@@ -21,7 +21,15 @@
     enableShippingAddress: true,
     shippingAddressOverride: address,
     shippingAddressEditable: false,
-    environment: '<%= Rails.env.production? ? "production" : "sandbox" %>'
+    environment: '<%= Rails.env.production? ? "production" : "sandbox" %>',
+    locale: '<%= paypal_button_preference(:paypal_button_locale, store: current_store) %>',
+    style: {
+      color: '<%= paypal_button_preference(:paypal_button_color, store: current_store) %>',
+      size: '<%= paypal_button_preference(:paypal_button_size, store: current_store) %>',
+      shape: '<%= paypal_button_preference(:paypal_button_shape, store: current_store) %>',
+      label: '<%= paypal_button_preference(:paypal_button_label, store: current_store) %>',
+      tagline: '<%= paypal_button_preference(:paypal_button_tagline, store: current_store) %>'
+    }
   }
 
   var button = new SolidusPaypalBraintree.createPaypalButton(document.querySelector("#paypal-button"), paypalOptions);

spec/controllers/solidus_paypal_braintree/configurations_controller_spec.rb

@@ -25,12 +25,17 @@
   end
 
   describe "POST #update" do
+    let(:paypal_button_color) { 'blue' }
     let(:configurations_params) do
       {
         configurations: {
           configuration_fields: {
             store_1_config.id.to_s => { paypal: true, apple_pay: true },
-            store_2_config.id.to_s => { paypal: true, apple_pay: false }
+            store_2_config.id.to_s => {
+              paypal: true,
+              apple_pay: false,
+              preferred_paypal_button_color: paypal_button_color
+            }
           }
         }
       }
@@ -55,7 +60,7 @@
     end
 
     context "with invalid parameters" do
-      before { allow(SolidusPaypalBraintree::Configuration).to receive(:update) { false } }
+      let(:paypal_button_color) { 'invalid-color'}
 
       it "displays an error message to the user" do
         subject

spec/features/frontend/paypal_checkout_spec.rb

@@ -32,6 +32,26 @@
         expect(page).to have_content("Your order has been processed successfully")
       end
     end
+
+    context 'using custom paypal button style' do
+      before do
+        store.braintree_configuration.tap do |conf|
+          conf.set_preference(:paypal_button_color, 'blue')
+          conf.save!
+        end
+      end
+
+      it 'should display required PayPal button style' do
+        pend_if_paypal_slow do
+          expect_any_instance_of(Spree::Order).to receive(:restart_checkout_flow)
+          move_through_paypal_popup
+
+          within(find('#paypal-button iframe')) do
+            expect(page).to have_selector('[class="paypal-button-color-blue]')
+          end
+        end
+      end
+    end
   end
 
   context "goes through regular checkout using paypal payment method" do