From 63ff7d27249320f5853531d52751c7bfaa57a083 Mon Sep 17 00:00:00 2001
From: Iqbal AHmed <iqbal.ahmed@digital.cabinet-office.gov.uk>
Date: Wed, 20 Sep 2023 16:13:25 +0100
Subject: [PATCH] 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.
---
 .../browsered/web-payments/google-pay.js      | 17 +++++++++--
 package.json                                  |  3 +-
 .../browsered/web-payments/google-pay.test.js | 29 +++++++++++++++++++
 3 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 test/unit/browsered/web-payments/google-pay.test.js

diff --git a/app/assets/javascripts/browsered/web-payments/google-pay.js b/app/assets/javascripts/browsered/web-payments/google-pay.js
index 3c3dc3457..bfaef7baf 100644
--- a/app/assets/javascripts/browsered/web-payments/google-pay.js
+++ b/app/assets/javascripts/browsered/web-payments/google-pay.js
@@ -119,15 +119,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
@@ -157,5 +169,6 @@ const googlePayNow = () => {
 
 module.exports = {
   createGooglePaymentRequest,
-  googlePayNow
+  googlePayNow,
+  shortenGooglePayDescription
 }
diff --git a/package.json b/package.json
index c53f5dbbf..b069b39f6 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,8 @@
       "Charge",
       "parent",
       "showCardType",
-      "openregisterLocationPicker"
+      "openregisterLocationPicker",
+      "window"
     ],
     "ignore": [
       "app/assets/javascripts/modules/*.js"
diff --git a/test/unit/browsered/web-payments/google-pay.test.js b/test/unit/browsered/web-payments/google-pay.test.js
new file mode 100644
index 000000000..def1225b2
--- /dev/null
+++ b/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…')
+    })
+})
+})