Remove transactionID fields and associated config

comicrelief · Apr 9, 2024 · 86a32ce · 86a32ce
1 parent a3f6e94
commit 86a32ce
Show file tree

Hide file tree

Showing 14 changed files with 31 additions and 142 deletions.
diff --git a/e2e/update/formValidation.spec.js b/e2e/update/formValidation.spec.js
@@ -1,8 +1,6 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
 const { Commands } = require('../utils/commands');
-const { v4: uuidv4 } = require('uuid');
-const transactionId = uuidv4();
 
 test.describe('Giftaid update form validation', () => {
 
@@ -17,11 +15,6 @@ test.describe('Giftaid update form validation', () => {
     // submit the form
     await page.locator('button[type=submit]').click();
 
-    await expect(page.locator('div#field-error--urlTransID > span')).toContainText('This transaction ID doesn\'t seem to be valid, please check your donation confirmation email or letter');
-
-    // transaction field error message
-    await expect(page.locator('div#field-error--transactionId > span')).toContainText('Please fill in your transaction id');
-
     // firstname field error message
     await expect(page.locator('div#field-error--firstname > span')).toContainText('Please fill in your first name');
 
@@ -49,37 +42,6 @@ test.describe('Giftaid update form validation', () => {
     await page.close();
   });
 
-  test('validate transaction ID field', async ({ page }) => {
-
-    const commands = new Commands(page);
-
-    await page.locator('input#field-input--transactionId').fill(transactionId);
-    await page.locator('input#field-input--transactionId').fill('');
-    await expect(page.locator('div#field-error--transactionId > span')).toContainText('Please fill in your transaction id');
-
-    // transaction ID number with special characters should shows error message
-    await page.locator('input#field-input--transactionId').type('ea794dc3-35f8-4a87-bc94-14125fd480@$', {delay: 100});
-    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');
-
-    // clear the transaction ID field and enter valid inputs and submit form
-    await page.locator('input#field-input--transactionId').fill('');
-
-    // entering valid input fields should be able to submit the form
-    await commands.populateUpdateFormFields();
-
-    // select giftaid declaration
-    await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
-
-    // submit the form
-    await page.locator('button[type=submit]').click();
-
-    await expect(page.locator('div > h1')).toContainText('Thank you,\n' +
-      'test!');
-
-    await page.close();
-  });
-
   test('validate first name field on giftaid update form', async ({ page }) => {
 
     const commands = new Commands(page);
@@ -256,7 +218,6 @@ test.describe('Giftaid update form validation', () => {
   test('enter valid UK postcode on giftaid update form using postcode lookup should be able to submit the form', async ({ page }) => {
 
     // fill in all input fields
-    await page.locator('input#field-input--transactionId').fill(transactionId);
     await page.locator('#field-input--firstname').fill('test');
     await page.locator('#field-input--lastname').fill('test lastname');
     await page.locator('input#field-input--email').fill('giftaid-staging-@email.sls.comicrelief.com');

diff --git a/e2e/update/internationalAddressesValidation.spec.js b/e2e/update/internationalAddressesValidation.spec.js
@@ -1,7 +1,5 @@
 // @ts-check
 const { test, expect } = require('@playwright/test');
-const { v4: uuidv4 } = require('uuid');
-const transactionId = uuidv4();
 
 test.describe('International addresses validation on update form', () => {
   test('selecting a non-UK country and entering a non-UK postcode should submit the update form', async ({ page }) => {
@@ -11,7 +9,6 @@ test.describe('International addresses validation on update form', () => {
     await page.waitForLoadState('domcontentloaded');
 
     // fill in all input fields
-    await page.locator('input#field-input--transactionId').fill(transactionId);
     await page.locator('#field-input--firstname').fill('test');
     await page.locator('#field-input--lastname').fill('test lastname');
     await page.locator('input#field-input--email').fill('giftaid-staging-@email.sls.comicrelief.com');

diff --git a/e2e/update/validFormSubmission.spec.js b/e2e/update/validFormSubmission.spec.js
@@ -12,7 +12,7 @@ test.describe('Valid giftaid update submission', () => {
 
     await page.waitForLoadState('domcontentloaded');
 
-    await expect(page.locator('input#field-input--transactionId')).toBeVisible();
+    await expect(page.locator('input#field-input--firstname')).toBeVisible();
 
     // entering valid input fields should be able to submit the form
     await commands.populateUpdateFormFields();

diff --git a/e2e/utils/commands.js b/e2e/utils/commands.js
@@ -1,13 +1,10 @@
 const faker = require('faker');
-const { v4: uuidv4 } = require('uuid');
-const transactionId = uuidv4();
 
 class Commands {
   constructor(page) {
     this.page = page;
 
     // form inputs
-    this.transactionID = page.locator('input#field-input--transactionId');
     this.mobile = page.locator('#field-input--mobile');
     this.phone = page.locator('#field-input--phone');
     this.firstName = page.locator('input#field-input--firstname');
@@ -83,7 +80,6 @@ class Commands {
    */
   async populateUpdateFormFields(
     {
-      transactionID = transactionId,
       firstName = 'test',
       lastName = 'user',
       email = 'giftaid-update-staging-@email.sls.comicrelief.com',
@@ -94,8 +90,6 @@ class Commands {
       town = 'London',
     } = {},
   ) {
-    await this.transactionID.type(transactionID);
-    console.log('transactionId is:', transactionID);
     await this.firstName.type(firstName);
     await this.lastName.type(lastName);
     await this.postcode.type(postcode);

diff --git a/playwright-staging/tests/update/formValidation.spec.js b/playwright-staging/tests/update/formValidation.spec.js
@@ -2,8 +2,6 @@
 const { expect } = require('@playwright/test');
 const { test } = require('../../browserstack');
 const { Commands } = require('../utils/commands');
-const { v4: uuidv4 } = require('uuid');
-const transactionId = uuidv4();
 
 test.describe('Giftaid update form validation @sanity @nightly-sanity', () => {
 
@@ -18,11 +16,6 @@ test.describe('Giftaid update form validation @sanity @nightly-sanity', () => {
     // submit the form
     await page.locator('button[type=submit]').click();
 
-    await expect(page.locator('div#field-error--urlTransID > span')).toContainText('This transaction ID doesn\'t seem to be valid, please check your donation confirmation email or letter');
-
-    // transaction field error message
-    await expect(page.locator('div#field-error--transactionId > span')).toContainText('Please fill in your transaction id');
-
     // firstname field error message
     await expect(page.locator('div#field-error--firstname > span')).toContainText('Please fill in your first name');
 
@@ -50,47 +43,6 @@ test.describe('Giftaid update form validation @sanity @nightly-sanity', () => {
     await page.close();
   });
 
-  test('validate transaction ID field', async ({ page }) => {
-
-    const commands = new Commands(page);
-
-    await page.locator('input#field-input--transactionId').fill(transactionId);
-    await page.locator('input#field-input--transactionId').fill('');
-    await expect(page.locator('div#field-error--transactionId > span')).toContainText('Please fill in your transaction id');
-
-    // transaction ID number with special characters should shows error message
-    await page.locator('input#field-input--transactionId').type('ea794dc3-35f8-4a87-bc94-14125fd480@$', {delay: 100});
-    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('');
-
-    // entering valid input fields should be able to submit the form
-    await commands.populateUpdateFormFields();
-
-    // select giftaid declaration
-    await page.locator('#giftAidClaimChoice>div:nth-child(2)>label').click();
-
-    // submit the form
-    await page.locator('button[type=submit]').click();
-
-    await expect(page.locator('div > h1')).toContainText('Thank you,\n' +
-      'test!');
-
-    await page.close();
-  });
-
   test('validate first name field on giftaid update form', async ({ page }) => {
 
     const commands = new Commands(page);
@@ -267,7 +219,6 @@ test.describe('Giftaid update form validation @sanity @nightly-sanity', () => {
   test('enter valid UK postcode on giftaid update form using postcode lookup should be able to submit the form', async ({ page }) => {
 
     // fill in all input fields
-    await page.locator('input#field-input--transactionId').fill(transactionId);
     await page.locator('#field-input--firstname').fill('test');
     await page.locator('#field-input--lastname').fill('test lastname');
     await page.locator('input#field-input--email').fill('giftaid-staging-@email.sls.comicrelief.com');

diff --git a/playwright-staging/tests/update/giftaidDeclarationOptions.spec.js b/playwright-staging/tests/update/giftaidDeclarationOptions.spec.js
@@ -12,7 +12,7 @@ test.describe('Giftaid declaration validation @sanity @nightly-sanity', () => {
 
     await page.waitForLoadState('domcontentloaded');
 
-    await expect(page.locator('input#field-input--transactionId')).toBeVisible();
+    await expect(page.locator('input#field-input--firstname')).toBeVisible();
 
     // entering valid input fields should be able to submit the form
     await commands.populateUpdateFormFields();
@@ -42,7 +42,7 @@ test.describe('Giftaid declaration validation @sanity @nightly-sanity', () => {
 
     await page.waitForLoadState('domcontentloaded');
 
-    await expect(page.locator('input#field-input--transactionId')).toBeVisible();
+    await expect(page.locator('input#field-input--firstname')).toBeVisible();
 
     // entering valid input fields should be able to submit the form
     await commands.populateUpdateFormFields();

diff --git a/playwright-staging/tests/update/internationalAddressesValidation.spec.js b/playwright-staging/tests/update/internationalAddressesValidation.spec.js
@@ -1,8 +1,6 @@
 // @ts-check
 const { expect } = require('@playwright/test');
 const { test } = require('../../browserstack');
-const { v4: uuidv4 } = require('uuid');
-const transactionId = uuidv4();
 
 test.describe('International addresses validation on update form @sanity @nightly-sanity', () => {
   test('selecting a non-UK country and entering a non-UK postcode should submit the update form', async ({ page }) => {
@@ -12,7 +10,6 @@ test.describe('International addresses validation on update form @sanity @nightl
     await page.waitForLoadState('domcontentloaded');
 
     // fill in all input fields
-    await page.locator('input#field-input--transactionId').fill(transactionId);
     await page.locator('#field-input--firstname').fill('test');
     await page.locator('#field-input--lastname').fill('test lastname');
     await page.locator('input#field-input--email').fill('giftaid-staging-@email.sls.comicrelief.com');

diff --git a/playwright-staging/tests/update/updateSuccessRedirect.spec.js b/playwright-staging/tests/update/updateSuccessRedirect.spec.js
@@ -14,7 +14,7 @@ test.describe('Success page redirect @sanity @nightly-sanity', () => {
 
     await expect(page.locator('h1[class=giftaid-title]')).toContainText('Giftaid it');
 
-    await expect(page.locator('input#field-input--transactionId')).toBeVisible();
+    await expect(page.locator('input#field-input--firstname')).toBeVisible();
 
     await page.close();
   });

diff --git a/playwright-staging/tests/update/validFormSubmission.spec.js b/playwright-staging/tests/update/validFormSubmission.spec.js
@@ -13,7 +13,7 @@ test.describe('Valid giftaid update submission @sanity @nightly-sanity', () => {
 
     await page.waitForLoadState('domcontentloaded');
 
-    await expect(page.locator('input#field-input--transactionId')).toBeVisible();
+    await expect(page.locator('input#field-input--firstname')).toBeVisible();
 
     // entering valid input fields should be able to submit the form
     await commands.populateUpdateFormFields();

diff --git a/playwright-staging/tests/utils/commands.js b/playwright-staging/tests/utils/commands.js
@@ -1,13 +1,10 @@
 const faker = require('faker');
-const { v4: uuidv4 } = require('uuid');
-const transactionId = uuidv4();
 
 class Commands {
   constructor(page) {
     this.page = page;
 
     // form inputs
-    this.transactionID = page.locator('input#field-input--transactionId');
     this.mobile = page.locator('#field-input--mobile');
     this.phone = page.locator('#field-input--phone');
     this.firstName = page.locator('input#field-input--firstname');
@@ -83,7 +80,6 @@ class Commands {
    */
   async populateUpdateFormFields(
     {
-      transactionID = transactionId,
       firstName = 'test',
       lastName = 'user',
       email = 'giftaid-update-staging-@email.sls.comicrelief.com',
@@ -94,8 +90,6 @@ class Commands {
       town = 'London',
     } = {},
   ) {
-    await this.transactionID.type(transactionID);
-    console.log('transactionId is:', transactionID);
     await this.firstName.type(firstName);
     await this.lastName.type(lastName);
     await this.postcode.type(postcode);

diff --git a/src/pages/GiftAid/GiftAid.js b/src/pages/GiftAid/GiftAid.js
@@ -47,6 +47,7 @@ function GiftAid(props) {
   const [msisdn, setMSISDN] = useState(null);
 
   // initialise URL transaction id state if available
+  // TO-DO: REMOVE THIS
   const [urlTransactionId, setUrlTransactionId] = useState(props.match.params.transaction_id);
 
   /**
@@ -94,7 +95,7 @@ function GiftAid(props) {
   useEffect(() => {
     // Update validation accordingly on update
     if ((formValidityState.showErrorMessages && !formValidityState.formValidity
-      && formValidityState.validating) || formValidityState.urlTransactionId.valid === false ) {
+      && formValidityState.validating)) {
       // update validation state
       setFormValidityState({
         ...formValidityState,
@@ -121,15 +122,15 @@ function GiftAid(props) {
 
     if ((thisFieldsPreviousState && isUpdatedState) || marketingConsentFieldsChanged === true) {
         // Reset url transaction Id state
-        if (thisFieldsName === 'transactionId' && thisFieldsState.valid) {
-          setFormValidityState({
-            ...formValidityState,
-            urlTransactionId: {
-              ...formValidityState.urlTransactionId,
-              valid: true,
-            }
-          });
-        }
+        // if (thisFieldsName === 'transactionId' && thisFieldsState.valid) {
+        //   setFormValidityState({
+        //     ...formValidityState,
+        //     urlTransactionId: {
+        //       ...formValidityState.urlTransactionId,
+        //       valid: true,
+        //     }
+        //   });
+        // }
         fieldValidation[thisFieldsName] = thisFieldsState;
         setFieldValidation({...fieldValidation});
 
@@ -147,6 +148,7 @@ function GiftAid(props) {
   const submitForm = (e) => {
     e.preventDefault();
     const formValues = getFormValues(fieldValidation, urlTransactionId, updating); // get form values
+    console.log('formValues', formValues);
     const { validity, validationState } = validateForm(fieldValidation, formValues, formValidityState); // validate form
     setFormValidityState(validationState); // update form validation state
 
@@ -155,7 +157,7 @@ function GiftAid(props) {
       // 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();
+      // if (formValues.transactionId) formValues.transactionId = formValues.transactionId.trim();
 
       axios.post(pathParams.endpoint, formValues) // post form data and settings to endpoint
         .then(() => {

diff --git a/src/pages/GiftAid/UpdateForm/UpdateForm.js b/src/pages/GiftAid/UpdateForm/UpdateForm.js
@@ -11,14 +11,12 @@ import InputFields from '../../../components/InputFields/InputFields';
 import JustInTime from '../../../components/JustInTime/index';
 import UrlTransactionIdError from './UrlTransactionIdError';
 
-
 // fields data
 import { updateFormFields, donationTypeChoices, giftAidButtonChoices } from './UpdateFormFields';
 
 // import context
 import FormContext from '../../../context/FormContext';
 
-
 function UpdateForm(props) {
 
   // initialise context

diff --git a/src/pages/GiftAid/UpdateForm/UpdateFormFields.js b/src/pages/GiftAid/UpdateForm/UpdateFormFields.js
@@ -53,17 +53,6 @@ export const giftAidButtonChoices = [
 * Default Update Form Fields
 */
 export const updateFormFields = {
-
-  transactionId: {
-    id: 'transactionId',
-    type: 'text',
-    name: 'transactionId',
-    label: 'Transaction ID',
-    required: true,
-    invalidErrorText: 'This transaction ID doesn\'t seem to be valid, please check your donation confirmation email or letter',
-    pattern: '^\\s*[a-zA-Z0-9-_]{5,}\\s*$',
-    tooltip: 'This is found at the bottom of your donation confirmation email'
-  },
   firstName: {
     id: 'firstname',
     type: 'text',
@@ -87,6 +76,17 @@ export const updateFormFields = {
     type: 'email',
     name: 'email',
     label: 'Email address',
-    required: false,
-  }
+    required: true
+  },
+  phoneNumber: {
+    id: 'mobile',
+    type: 'tel',
+    name: 'mobile',
+    placeholder: 'In the format 07123456789',
+    label: 'Mobile number',
+    pattern: '^07[0-9]{9}$',
+    helpText: 'If you donated by SMS, you MUST fill in this field',
+    emptyFieldErrorText: 'Please fill in your mobile number',
+    invalidErrorText: 'Please enter a valid mobile phone number - it must be the same number associated with your donation.'
+  },
 };