Merge branch 'master' into ENG-3189/Improvise-giftaid-react-repo

config/webpack.config.dev.js

@@ -214,7 +214,8 @@ module.exports = {
             "https://*.comicrelief.com",
             "https://*.sportrelief.com",
             "https://sentry.io",
-            "https://*.netlify.com"
+            "https://*.netlify.com",
+            "https://*.google-analytics.com"
           ],
           'frame-src': [
             "'self'",
@@ -272,6 +273,7 @@ module.exports = {
         "https://www.gstatic.com",
         "https://www.google-analytics.com",
         "https://www.googletagmanager.com",
+        "https://*.google-analytics.com",
         "https://connect.facebook.net",
         "https://sjs.bizographics.com",
         "https://snap.licdn.com"
@@ -281,7 +283,8 @@ module.exports = {
         "https://*.comicrelief.com",
         "https://*.sportrelief.com",
         "https://sentry.io",
-        "https://*.netlify.com"
+        "https://*.netlify.com",
+        "https://*.google-analytics.com",
       ],
       'frame-src': [
         "'self'",

config/webpack.config.prod.js

@@ -322,6 +322,7 @@ module.exports = {
             "https://www.gstatic.com",
             "https://www.google-analytics.com",
             "https://www.googletagmanager.com",
+            "https://*.google-analytics.com",
             "https://www.tagmanager.google.com",
             "https://connect.facebook.net",
             "https://sjs.bizographics.com",
@@ -332,7 +333,8 @@ module.exports = {
             "https://*.comicrelief.com",
             "https://*.sportrelief.com",
             "https://sentry.io",
-            "https://*.netlify.com"
+            "https://*.netlify.com",
+            "https://*.google-analytics.com",
           ],
           'frame-src': [
             "'self'",
@@ -400,7 +402,8 @@ module.exports = {
         "https://*.comicrelief.com",
         "https://*.sportrelief.com",
         "https://sentry.io",
-        "https://*.netlify.com"
+        "https://*.netlify.com",
+        "https://*.google-analytics.com"
       ],
       'frame-src': [
         "'self'",

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "dependencies": {
     "@babel/polyfill": "^7.11.5",
-    "@comicrelief/storybook": "2.1.0",
+    "@comicrelief/storybook": "2.3.0",
     "@snyk/protect": "^1.986.0",
     "autoprefixer": "10.0.0",
     "axios": "^1.6.8",

playwright-staging/tests/update/formValidation.spec.js

@@ -63,6 +63,16 @@ test.describe('Giftaid update form validation @sanity @nightly-sanity', () => {
     await page.waitForSelector('div#field-error--transactionId > span');
     await expect(page.locator('div#field-error--transactionId > span')).toContainText('This transaction ID doesn\'t seem to be valid, please check your donation confirmation email or letter');
 
+    // transaction ID number with space at the end should not show error message
+    await page.locator('input#field-input--transactionId').fill('');
+    await page.locator('input#field-input--transactionId').type('a0e9840d-b724-4868-9a68-06a86e0f0150  ', {delay: 100});
+    await expect(page.locator('div#field-error--transactionId > span')).toBeHidden();
+
+    // transaction ID number with space at the beginning should not show error message
+    await page.locator('input#field-input--transactionId').fill('');
+    await page.locator('input#field-input--transactionId').type(' a0e9840d-b724-4868-9a68-06a86e0f0150', {delay: 100});
+    await expect(page.locator('div#field-error--transactionId > span')).toBeHidden();
+
     // clear the transaction ID field and enter valid inputs and submit form
     await page.locator('input#field-input--transactionId').fill('');
 

src/pages/GiftAid/GiftAid.js

@@ -152,6 +152,11 @@ function GiftAid(props) {
 
     if (validity) { // submit form if no errors
       setIsSubmitting(true); // Update state that's passed down to disable button during submission
+      // Rather than mess with the input field value itself (crummy UX), just sanitise the value on submission,
+      // removing any leading or trailing whitespace that the new regex brings allows for (see ENG-3193) 
+      if (formValues.donationID) formValues.donationID = formValues.donationID.trim();
+      if (formValues.transactionId) formValues.transactionId = formValues.transactionId.trim();
+
       axios.post(pathParams.endpoint, formValues) // post form data and settings to endpoint
         .then(() => {
           setIsCompleted(true); // set completed state

src/pages/GiftAid/UpdateForm/UpdateFormFields.js

@@ -61,7 +61,7 @@ export const updateFormFields = {
     label: 'Transaction ID',
     required: true,
     invalidErrorText: 'This transaction ID doesn\'t seem to be valid, please check your donation confirmation email or letter',
-    pattern: '^[a-zA-Z0-9-_]{5,}$',
+    pattern: '^\\s*[a-zA-Z0-9-_]{5,}\\s*$',
     tooltip: 'This is found at the bottom of your donation confirmation email'
   },
   firstName: {

src/pages/GiftAid/utils/Utils.js

@@ -148,7 +148,7 @@ export const justInTimeLinkText = 'Why do we collect this info?';
 * REGEX for transactionId
 *
 */
-const transactionIdPattern = '^[a-zA-Z0-9-_]{5,}$';
+const transactionIdPattern = '^\\s*[a-zA-Z0-9-_]{5,}\\s*$';
 
 /**
  * Function to validate form

yarn.lock

@@ -1382,10 +1382,10 @@
     uuid "^8.3.2"
     yup "^0.29.3"
 
-"@comicrelief/storybook@2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@comicrelief/storybook/-/storybook-2.1.0.tgz#f079531e08348f31573a52e8b44f4d00b1a168f0"
-  integrity sha512-+sjmm5jnxjwbOpsQWGzhSv9iv1c+CgfYlxD0YWwEAZ6K3w7S5IPinEmCbu0GAUK3lxAp8SiJRQu4GRyVEBsnfQ==
+"@comicrelief/storybook@2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@comicrelief/storybook/-/storybook-2.3.0.tgz#8685d0b3a27feefe8cdb1030705637945951f029"
+  integrity sha512-LXtxZGvijxYNeWQdp8VpTDbFqAO3CGYuuTdBa/SjzYXil4EsYvBS8iOBuArBQPgtzPhEdFDG6QA5aCkpa38CXQ==
   dependencies:
     "@snyk/protect" "^1.1060.0"
     "@storybook/addon-info" "3"