Add pre and post whitespace to TransactionID regex (#420)

* Add pre/post whitespace to regex * Update all regex instances, trim accordingly * Tidyup * Add check * Allow any number of whitespaces * test: update transaction ID field steps to not show error messages when whitespace is added * test: update transaction ID field steps to not show error messages when whitespace is added --------- Co-authored-by: Krupa Pammi <k.pammi@comicrelief.com>
comicrelief · Mar 27, 2024 · 40e85c9 · 40e85c9
1 parent 63e39d5
commit 40e85c9
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 2 deletions.
diff --git a/playwright-staging/tests/update/formValidation.spec.js b/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('');
 

diff --git a/src/pages/GiftAid/GiftAid.js b/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

diff --git a/src/pages/GiftAid/UpdateForm/UpdateFormFields.js b/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: {

diff --git a/src/pages/GiftAid/utils/Utils.js b/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