PP-11463 Fix Google pay description dialog bug

- When the payment reference is long and the Google pay dialog appears,
  then it does not show the `add` button.  Which the user needs to add
  contact information.
- This is a bug with Google chrome - it does not wrap the payment description text.
  So its pushes the button too wide so it is not visible.
- This PR truncates the payment description if it is too long when setting up the
  Google payment.

app/assets/javascripts/browsered/web-payments/google-pay.js

@@ -121,15 +121,27 @@ const processPayment = paymentData => {
   }
 }
 
+const shortenGooglePayDescription = (fullPaymentDescription) => {
+  const MAX_LENGTH_PAYMENT_DESCRIPTION = 18
+
+  if (fullPaymentDescription.length > MAX_LENGTH_PAYMENT_DESCRIPTION) {
+    return fullPaymentDescription.substring(0, MAX_LENGTH_PAYMENT_DESCRIPTION - 1) + '…'
+  } else {
+    return fullPaymentDescription
+  }
+}
+
 const createGooglePaymentRequest = () => {
   const methodData = [{
     supportedMethods: 'https://google.com/pay',
     data: getGooglePaymentsConfiguration()
   }]
 
+  const shortenedPaymentDescription = shortenGooglePayDescription(window.paymentDetails.description)
+
   const details = {
     total: {
-      label: window.paymentDetails.description,
+      label: shortenedPaymentDescription,
       amount: {
         currency: 'GBP',
         value: window.paymentDetails.amount
@@ -159,5 +171,6 @@ const googlePayNow = () => {
 
 module.exports = {
   createGooglePaymentRequest,
-  googlePayNow
+  googlePayNow,
+  shortenGooglePayDescription
 }

package.json

@@ -30,7 +30,8 @@
       "Charge",
       "parent",
       "showCardType",
-      "openregisterLocationPicker"
+      "openregisterLocationPicker",
+      "window"
     ],
     "ignore": [
       "app/assets/javascripts/modules/*.js"

test/unit/browsered/web-payments/google-pay.test.js

@@ -0,0 +1,29 @@
+'use strict'
+
+global.window = {
+  Card: {},
+  Charge: {}
+}
+
+const { shortenGooglePayDescription } = require('../../../../app/assets/javascripts/browsered/web-payments/google-pay')
+const { expect } = require('chai')
+
+const STRING_17_CHAR_LENGTH = 'abcdefghijklmnopq'
+const STRING_18_CHAR_LENGTH = 'abcdefghijklmnopqr'
+const STRING_19_CHAR_LENGTH = 'abcdefghijklmnopqrs'
+
+describe('Google Pay', () => {
+  describe('shorten payment description for Google pay', () => {
+    it('should return the original description when the length < 18', () => {
+      expect(shortenGooglePayDescription(STRING_17_CHAR_LENGTH)).to.equal(STRING_17_CHAR_LENGTH)
+    })
+
+    it('should return the original description when length = 18', () => {
+      expect(shortenGooglePayDescription(STRING_18_CHAR_LENGTH)).to.equal(STRING_18_CHAR_LENGTH)
+    })
+
+    it('should tuncate the description to 17 characters and add the elipses character when length > 18', () => {
+      expect(shortenGooglePayDescription(STRING_19_CHAR_LENGTH)).to.equal('abcdefghijklmnopq…')
+    })
+})
+})