From 1efc3d18b24ac873279d0d5a5b166ec74f67cc19 Mon Sep 17 00:00:00 2001
From: Sean <seand7565@gmail.com>
Date: Thu, 29 Oct 2020 13:58:34 -0500
Subject: [PATCH] Add a PayPal messaging component partial

This allows you to drop in the PayPal messaging component anywhere you'd
like.
---
 README.md                                     | 11 +++++++++-
 .../solidus_paypal_braintree/constants.js     |  8 +++++++
 .../solidus_paypal_braintree/frontend.js      |  1 +
 .../paypal_messaging.js                       | 22 +++++++++++++++++++
 .../spree/shared/_paypal_messaging.html.erb   | 13 +++++++++++
 5 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 app/assets/javascripts/solidus_paypal_braintree/paypal_messaging.js
 create mode 100644 app/views/spree/shared/_paypal_messaging.html.erb

diff --git a/README.md b/README.md
index 00b42181..4c717619 100644
--- a/README.md
+++ b/README.md
@@ -165,7 +165,7 @@ using the
 [Vault flow](https://developers.braintreepayments.com/guides/paypal/overview/javascript/v3),
 which allows the source to be reused. If you want, you can use [Checkout with PayPal](https://developers.braintreepayments.com/guides/paypal/checkout-with-paypal/javascript/v3)
 instead, which doesn't allow you to reuse sources but allows your customers to pay with their PayPal
-balance (see setup instructions).
+balance and with PayPal financing options ([see setup instructions](#create-a-new-payment-method)).
 
 If you are creating your own checkout view or would like to customize the
 [options that get passed to tokenize](https://braintree.github.io/braintree-web/3.6.3/PayPal.html#tokenize)
@@ -188,6 +188,15 @@ A PayPal button can also be included on the cart view to enable express checkout
 render "spree/shared/paypal_cart_button"
 ```
 
+### PayPal Financing Messaging
+
+PayPal offers an [on-site messaging component](https://www.paypal.com/us/webapps/mpp/on-site-messaging) to notify the customer that there are financing options available. By default, this component is used in both the cart and checkout partials.
+
+You can also include this view partial to implement this messaging component anywhere - for instance, on the product page:
+```ruby
+render "spree/shared/paypal_messaging, options: {total: @product.price, placement: "product", currency: 'USD'}"
+```
+
 #### PayPal configuration
 
 If your store requires the [phone number into user addresses](https://github.com/solidusio/solidus/blob/859143f3f061de79cc1b385234599422b8ae8e21/core/app/models/spree/address.rb#L151-L153)
diff --git a/app/assets/javascripts/solidus_paypal_braintree/constants.js b/app/assets/javascripts/solidus_paypal_braintree/constants.js
index 80e0c269..450873c1 100644
--- a/app/assets/javascripts/solidus_paypal_braintree/constants.js
+++ b/app/assets/javascripts/solidus_paypal_braintree/constants.js
@@ -26,6 +26,10 @@ SolidusPaypalBraintree = {
         return SolidusPaypalBraintree.PaypalButton;
       },
 
+      paypalMessaging: function() {
+        return SolidusPaypalBraintree.PaypalMessaging;
+      },
+
       applepayButton: function() {
         return SolidusPaypalBraintree.ApplepayButton;
       }
@@ -51,6 +55,10 @@ SolidusPaypalBraintree = {
     return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.paypalButton(), arguments);
   },
 
+  createPaypalMessaging: function() {
+    return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.paypalMessaging(), arguments);
+  },
+
   createApplePayButton: function() {
     return SolidusPaypalBraintree._factory(SolidusPaypalBraintree.config.classes.applepayButton(), arguments);
   },
diff --git a/app/assets/javascripts/solidus_paypal_braintree/frontend.js b/app/assets/javascripts/solidus_paypal_braintree/frontend.js
index 962d4f2d..dd8a118b 100644
--- a/app/assets/javascripts/solidus_paypal_braintree/frontend.js
+++ b/app/assets/javascripts/solidus_paypal_braintree/frontend.js
@@ -9,4 +9,5 @@
 //= require solidus_paypal_braintree/client
 //= require solidus_paypal_braintree/hosted_form
 //= require solidus_paypal_braintree/paypal_button
+//= require solidus_paypal_braintree/paypal_messaging
 //= require solidus_paypal_braintree/apple_pay_button
diff --git a/app/assets/javascripts/solidus_paypal_braintree/paypal_messaging.js b/app/assets/javascripts/solidus_paypal_braintree/paypal_messaging.js
new file mode 100644
index 00000000..34adc5a6
--- /dev/null
+++ b/app/assets/javascripts/solidus_paypal_braintree/paypal_messaging.js
@@ -0,0 +1,22 @@
+//= require solidus_paypal_braintree/constants
+
+SolidusPaypalBraintree.PaypalMessaging = function(paypalOptions) {
+  this._paypalOptions = paypalOptions || {};
+
+  this._client = null;
+};
+
+SolidusPaypalBraintree.PaypalMessaging.prototype.initialize = function() {
+  this._client = new SolidusPaypalBraintree.createClient({usePaypal: true});
+
+  return this._client.initialize().then(this.initializeCallback.bind(this));
+};
+
+SolidusPaypalBraintree.PaypalMessaging.prototype.initializeCallback = function() {
+  this._paymentMethodId = this._client.paymentMethodId;
+
+  this._client.getPaypalInstance().loadPayPalSDK({
+    currency: this._paypalOptions.currency,
+    components: "messages"
+  })
+};
diff --git a/app/views/spree/shared/_paypal_messaging.html.erb b/app/views/spree/shared/_paypal_messaging.html.erb
new file mode 100644
index 00000000..e4959aec
--- /dev/null
+++ b/app/views/spree/shared/_paypal_messaging.html.erb
@@ -0,0 +1,13 @@
+<%= render "spree/shared/paypal_braintree_head_scripts" %>
+
+<div data-pp-message data-pp-placement="<%= options[:placement] %>" data-pp-amount="<%= options[:total] %>"></div>
+
+<script>
+  var message = new SolidusPaypalBraintree.createPaypalMessaging(
+    {
+      currency: "<%= options[:currency] %>"
+    }
+  )
+
+  message.initialize();
+</script>