Merge branch 'release/0.3.3'

UPGRADING.md

@@ -0,0 +1,45 @@
+# Upgrading
+This file contains instructions for anyone upgrading a project from one version of Submarine.js to the next.
+
+## Upgrading from 0.3.2 to 0.3.3
+
+### Changes for Braintree hosted field widget
+There were a couple of changes related to the styling of hosted fields in the Braintree credit card widget.
+
+A merchant-specific piece of code that set the `<iframe>` Braintree field elements to a height of `44px` was removed.
+Height of these elements should be controlled through CSS in the theme.
+
+The default styling options for the hosted field inputs was tweaked a little to match Shopify's defaults, and the margin and padding values provided were removed.
+Again, most margin and padding should be managed through theme CSS. Where that's not possible, you can now explicitly pass hosted field options to Submarine's options, eg:
+
+```
+window.submarineOptions = {
+  submarine: {
+    api_url: {{ shop.metafields.submarine.api_url | json }},
+    ...
+  },
+  braintree: {
+    hostedFieldsOptions: {
+      styles: {
+        input: {
+          color: '#333333',
+          'font-size': '14px',
+          'font-family':
+            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif'
+        },
+        '::-webkit-input-placeholder': {
+          'color': '#515151',
+          'font-size': '13.33333px',
+          'font-weight': '400',
+          'line-height': '150%'
+        }
+      }
+    }
+  }
+}
+```
+
+Note that options aren't merged, so if you're providing this option you need to provide everything, not just your customisations.
+
+## Upgrading to 0.3.2
+As this file didn't exist prior to this, no detailed upgrade notes are available.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@discolabs/submarine-js",
-  "version": "0.3.2",
+  "version": "0.3.3",
   "description": "Javascript client library for Submarine.",
   "main": "index.js",
   "author": "Gavin Ballard",

src/checkout/payment_methods/shop_payment_methods/braintree_credit_card_shop_payment_method.js

@@ -4,6 +4,20 @@ const NUMBER_ERROR = 'Please enter a valid card number';
 const EXPIRATION_DATE_ERROR = 'Please enter a valid expiration date';
 const CVV_ERROR = 'Please enter a valid CVV';
 
+const DEFAULT_HOSTED_FIELDS_OPTIONS = {
+  styles: {
+    input: {
+      color: '#333333',
+      'font-size': '14px',
+      'font-family':
+        '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif'
+    },
+    '::-webkit-input-placeholder': {
+      color: '#737373'
+    }
+  }
+};
+
 export class BraintreeCreditCardShopPaymentMethod extends ShopPaymentMethod {
   beforeSetup() {
     this.$subfields = this.$(
@@ -37,7 +51,6 @@ export class BraintreeCreditCardShopPaymentMethod extends ShopPaymentMethod {
             this.$subfields.addClass(
               'card-fields-container--loaded card-fields-container--transitioned'
             );
-            this.$subfields.find('iframe').css({ height: '44px' });
 
             success();
           })
@@ -51,18 +64,14 @@ export class BraintreeCreditCardShopPaymentMethod extends ShopPaymentMethod {
   }
 
   getHostedFieldsOptions(clientInstance) {
+    const additionalOptions =
+      this.options.braintree && this.options.braintree.hostedFieldsOptions
+        ? this.options.braintree.hostedFieldsOptions
+        : DEFAULT_HOSTED_FIELDS_OPTIONS;
+
     return {
+      ...additionalOptions,
       client: clientInstance,
-      styles: {
-        input: {
-          color: '#333333',
-          margin: '-1px 0 0 0',
-          padding: '0.94em 0.8em',
-          'font-size': '14px',
-          'font-family':
-            '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif'
-        }
-      },
       fields: this.creditCardFields()
     };
   }
@@ -116,6 +125,14 @@ export class BraintreeCreditCardShopPaymentMethod extends ShopPaymentMethod {
     };
   }
 
+  getRenderTemplate() {
+    if (this.options.html_templates.shop_payment_method_braintree_credit_card) {
+      return 'shop_payment_method_braintree_credit_card';
+    }
+
+    return 'shop_payment_method';
+  }
+
   subfieldsContent() {
     return this.isSingleUse()
       ? this.options.html_templates

src/checkout/payment_methods/shop_payment_methods/braintree_paypal_shop_payment_method.js

@@ -42,7 +42,8 @@ export class BraintreePaypalShopPaymentMethod extends ShopPaymentMethod {
               window.paypalCheckoutInstance = paypalCheckoutInstance;
 
               paypalCheckoutInstance.loadPayPalSDK({
-                vault: true
+                vault: true,
+                intent: 'tokenize'
               }, (error) => {
                 paypal.Buttons({
                   fundingSource: paypal.FUNDING.PAYPAL,
@@ -74,6 +75,7 @@ export class BraintreePaypalShopPaymentMethod extends ShopPaymentMethod {
 
     const createPaymentOptions = {
       flow: 'vault',
+      intent: 'tokenize',
       billingAgreementDescription: that.t(
         'payment_methods.shop_payment_methods.paypal.billing_agreement_description'
       ),
@@ -197,4 +199,12 @@ export class BraintreePaypalShopPaymentMethod extends ShopPaymentMethod {
       icon: 'icons_paypal'
     };
   }
+
+  getRenderTemplate() {
+    if (this.options.html_templates.shop_payment_method_braintree_paypal) {
+      return 'shop_payment_method_braintree_paypal';
+    }
+
+    return 'shop_payment_method';
+  }
 }

src/checkout/submarine_payment_method_step.js

@@ -203,15 +203,7 @@ export class SubmarinePaymentMethodStep extends CustardModule {
   }
 
   onShopifyGatewayChange() {
-    const $selectedShopifyGatewayInput = this.$element.find(
-      `${SHOPIFY_GATEWAY_INPUT_SELECTOR}:checked`
-    );
-    const $selectedShopifyGatewayElement = $selectedShopifyGatewayInput.closest(
-      '[data-select-gateway]'
-    );
-    this.selectedShopifyGatewayId = $selectedShopifyGatewayElement.attr(
-      'data-select-gateway'
-    );
+    this.selectedShopifyGatewayId = this.getSelectedShopifyGatewayId();
 
     // If the gateway that was selected isn't Submarine, ensure that Submarine payment methods are unselected.
     if (!this.submarineGatewayIsSelected()) {
@@ -279,6 +271,22 @@ export class SubmarinePaymentMethodStep extends CustardModule {
     );
   }
 
+  getSelectedShopifyGatewayId() {
+    if (this.submarineIsOnlyPaymentGateway()) {
+      return this.options.submarine.submarine_gateway_id;
+    }
+
+    const $selectedShopifyGatewayInput = this.$element.find(
+      `${SHOPIFY_GATEWAY_INPUT_SELECTOR}:checked`
+    );
+
+    const $selectedShopifyGatewayElement = $selectedShopifyGatewayInput.closest(
+      '[data-select-gateway]'
+    );
+
+    return $selectedShopifyGatewayElement.attr('data-select-gateway');
+  }
+
   submarineGatewayIsSelected() {
     return (
       this.selectedShopifyGatewayId ===
@@ -287,10 +295,13 @@ export class SubmarinePaymentMethodStep extends CustardModule {
   }
 
   submarineIsOnlyPaymentGateway() {
-    return (
-      this.$element.find(`${SHOPIFY_GATEWAY_INPUT_SELECTOR}`).attr('type') ===
-      'hidden'
-    );
+    if (this.cacheSubmarineIsOnlyPaymentGateway === undefined) {
+      this.cacheSubmarineIsOnlyPaymentGateway =
+        this.$element.find(`${SHOPIFY_GATEWAY_INPUT_SELECTOR}`).attr('type') ===
+        'hidden';
+    }
+
+    return this.cacheSubmarineIsOnlyPaymentGateway;
   }
 
   sortGatewaysAndPaymentMethods() {