From c04c188d247ec868be983203201c9cd232ee83e4 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Tue, 7 Jan 2020 16:52:21 +0000
Subject: [PATCH 01/17] Initialising DL stuff

---
 .../Molecules/Membership/Form/Form.js         | 57 +++++++++++++++++++
 1 file changed, 57 insertions(+)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index e2c95d056..d4f7e0efe 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -44,6 +44,57 @@ const Signup = ({
   const [inputBorderColor, setInputBorderColor] = useState(false);
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
 
+  // eslint-disable-next-line no-multi-assign
+  const dataLayer = (window.dataLayer = window.dataLayer || []);
+
+  // Called by UseEffect later on first load
+  const DataLayerInit = (
+    thisRowID,
+    thisClientID,
+    thisCartID,
+    theseMoneyBuys
+  ) => {
+    // Construct object to push to datalayer,staring with manual entry 'Other Amount' field
+    const ecommerceObj = {
+      ecommerce: {
+        currencyCode: 'GBP',
+        impressions: [
+          {
+            id: 'manual-entry',
+            name: 'manual-entry',
+            price: 0.0,
+            category: thisCartID,
+            position: 0,
+            list: `${thisClientID}_${thisRowID}`,
+            dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+          }
+        ]
+      }
+    };
+
+    /* Iterate over all moneybuys */
+    theseMoneyBuys.map((moneyBuy, index) => {
+      const thisMoneyBuy = {
+        id: `moneybuy-${moneyBuy.value}`,
+        name: `moneybuy-${moneyBuy.value}`,
+        price: moneyBuy.value,
+        brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
+        category: thisCartID,
+        position: index + 1,
+        list: `${thisClientID}_${thisRowID}`,
+        dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+      };
+
+      // Add this 'button' object to the impressions array
+      ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
+
+      // Push to the data layer
+      dataLayer.push(ecommerceObj);
+
+      return null;
+    });
+  };
+
   // This function is triggered when one of the money buy box is selected
   const selectMoneyBuy = (copy, value) => {
     if (isSelected) setIsSelected(false);
@@ -94,6 +145,7 @@ const Signup = ({
       const box = `box${index + 1}`;
       // eslint-disable-next-line no-shadow
       setMoneyBoxes(moneyBoxes => ({ ...moneyBoxes, [box]: moneyBuy }));
+
       return (
         isSelected &&
         index === 1 &&
@@ -102,6 +154,11 @@ const Signup = ({
     });
   }, [isSelected, regularGiving.moneybuys]);
 
+  /* Set up default DataLayer obj on pageload */
+  useEffect(() => {
+    DataLayerInit(mbshipID, clientID, cartID, regularGiving.moneybuys);
+  }, [DataLayerInit, cartID, clientID, mbshipID, regularGiving.moneybuys]);
+
   const submitDonation = (
     event,
     amount,

From dcf83510221e07c2f73a03a20bda9734d6ef5128 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Tue, 7 Jan 2020 17:03:20 +0000
Subject: [PATCH 02/17] Define init func where its used to avoid dep loop

---
 .../Molecules/Membership/Form/Form.js         | 98 +++++++++----------
 1 file changed, 49 insertions(+), 49 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index d4f7e0efe..d8df54c44 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -47,54 +47,6 @@ const Signup = ({
   // eslint-disable-next-line no-multi-assign
   const dataLayer = (window.dataLayer = window.dataLayer || []);
 
-  // Called by UseEffect later on first load
-  const DataLayerInit = (
-    thisRowID,
-    thisClientID,
-    thisCartID,
-    theseMoneyBuys
-  ) => {
-    // Construct object to push to datalayer,staring with manual entry 'Other Amount' field
-    const ecommerceObj = {
-      ecommerce: {
-        currencyCode: 'GBP',
-        impressions: [
-          {
-            id: 'manual-entry',
-            name: 'manual-entry',
-            price: 0.0,
-            category: thisCartID,
-            position: 0,
-            list: `${thisClientID}_${thisRowID}`,
-            dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
-          }
-        ]
-      }
-    };
-
-    /* Iterate over all moneybuys */
-    theseMoneyBuys.map((moneyBuy, index) => {
-      const thisMoneyBuy = {
-        id: `moneybuy-${moneyBuy.value}`,
-        name: `moneybuy-${moneyBuy.value}`,
-        price: moneyBuy.value,
-        brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
-        category: thisCartID,
-        position: index + 1,
-        list: `${thisClientID}_${thisRowID}`,
-        dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
-      };
-
-      // Add this 'button' object to the impressions array
-      ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
-
-      // Push to the data layer
-      dataLayer.push(ecommerceObj);
-
-      return null;
-    });
-  };
-
   // This function is triggered when one of the money buy box is selected
   const selectMoneyBuy = (copy, value) => {
     if (isSelected) setIsSelected(false);
@@ -156,8 +108,56 @@ const Signup = ({
 
   /* Set up default DataLayer obj on pageload */
   useEffect(() => {
+    // Called by UseEffect later on first load
+    const DataLayerInit = (
+      thisRowID,
+      thisClientID,
+      thisCartID,
+      theseMoneyBuys
+    ) => {
+      // Construct object to push to datalayer,staring with manual entry 'Other Amount' field
+      const ecommerceObj = {
+        ecommerce: {
+          currencyCode: 'GBP',
+          impressions: [
+            {
+              id: 'manual-entry',
+              name: 'manual-entry',
+              price: 0.0,
+              category: thisCartID,
+              position: 0,
+              list: `${thisClientID}_${thisRowID}`,
+              dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+            }
+          ]
+        }
+      };
+
+      /* Iterate over all moneybuys */
+      theseMoneyBuys.map((moneyBuy, index) => {
+        const thisMoneyBuy = {
+          id: `moneybuy-${moneyBuy.value}`,
+          name: `moneybuy-${moneyBuy.value}`,
+          price: moneyBuy.value,
+          brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
+          category: thisCartID,
+          position: index + 1,
+          list: `${thisClientID}_${thisRowID}`,
+          dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+        };
+
+        // Add this 'button' object to the impressions array
+        ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
+
+        // Push to the data layer
+        dataLayer.push(ecommerceObj);
+
+        return null;
+      });
+    };
+
     DataLayerInit(mbshipID, clientID, cartID, regularGiving.moneybuys);
-  }, [DataLayerInit, cartID, clientID, mbshipID, regularGiving.moneybuys]);
+  }, [cartID, clientID, dataLayer, mbshipID, regularGiving.moneybuys]);
 
   const submitDonation = (
     event,

From e553c7a38f4239a9008a16e2c2f2c13876db9434 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Wed, 8 Jan 2020 10:06:18 +0000
Subject: [PATCH 03/17] Break-out datalayer to 'helper functions' file

---
 .../Molecules/Membership/Form/Form.js         | 59 +++----------------
 src/utils/Membership.js                       | 52 +++++++++++++++-
 2 files changed, 60 insertions(+), 51 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index d8df54c44..80ac212c9 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -7,7 +7,8 @@ import {
   handleDonateSubmission,
   onKeyPress,
   isAmountValid,
-  isInputMatchBoxValue
+  isInputMatchBoxValue,
+  DataLayerInit
 } from '../../../../utils/Membership';
 import {
   Button,
@@ -108,55 +109,13 @@ const Signup = ({
 
   /* Set up default DataLayer obj on pageload */
   useEffect(() => {
-    // Called by UseEffect later on first load
-    const DataLayerInit = (
-      thisRowID,
-      thisClientID,
-      thisCartID,
-      theseMoneyBuys
-    ) => {
-      // Construct object to push to datalayer,staring with manual entry 'Other Amount' field
-      const ecommerceObj = {
-        ecommerce: {
-          currencyCode: 'GBP',
-          impressions: [
-            {
-              id: 'manual-entry',
-              name: 'manual-entry',
-              price: 0.0,
-              category: thisCartID,
-              position: 0,
-              list: `${thisClientID}_${thisRowID}`,
-              dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
-            }
-          ]
-        }
-      };
-
-      /* Iterate over all moneybuys */
-      theseMoneyBuys.map((moneyBuy, index) => {
-        const thisMoneyBuy = {
-          id: `moneybuy-${moneyBuy.value}`,
-          name: `moneybuy-${moneyBuy.value}`,
-          price: moneyBuy.value,
-          brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
-          category: thisCartID,
-          position: index + 1,
-          list: `${thisClientID}_${thisRowID}`,
-          dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
-        };
-
-        // Add this 'button' object to the impressions array
-        ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
-
-        // Push to the data layer
-        dataLayer.push(ecommerceObj);
-
-        return null;
-      });
-    };
-
-    DataLayerInit(mbshipID, clientID, cartID, regularGiving.moneybuys);
+    DataLayerInit(
+      mbshipID,
+      clientID,
+      cartID,
+      regularGiving.moneybuys,
+      dataLayer
+    );
   }, [cartID, clientID, dataLayer, mbshipID, regularGiving.moneybuys]);
 
   const submitDonation = (
diff --git a/src/utils/Membership.js b/src/utils/Membership.js
index 1d85b34ba..8f747a66e 100644
--- a/src/utils/Membership.js
+++ b/src/utils/Membership.js
@@ -59,9 +59,59 @@ const handleDonateSubmission = (
   window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
 };
 
+// Called by UseEffect later on first load
+const DataLayerInit = (
+  thisRowID,
+  thisClientID,
+  thisCartID,
+  theseMoneyBuys,
+  thisDataLayer
+) => {
+  // Construct object to push to datalayer,staring with manual entry 'Other Amount' field
+  const ecommerceObj = {
+    ecommerce: {
+      currencyCode: 'GBP',
+      impressions: [
+        {
+          id: 'manual-entry',
+          name: 'manual-entry',
+          price: 0.0,
+          category: thisCartID,
+          position: 0,
+          list: `${thisClientID}_${thisRowID}`,
+          dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+        }
+      ]
+    }
+  };
+
+  /* Iterate over all moneybuys */
+  theseMoneyBuys.map((moneyBuy, index) => {
+    const thisMoneyBuy = {
+      id: `moneybuy-${moneyBuy.value}`,
+      name: `moneybuy-${moneyBuy.value}`,
+      price: moneyBuy.value,
+      brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
+      category: thisCartID,
+      position: index + 1,
+      list: `${thisClientID}_${thisRowID}`,
+      dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+    };
+
+    // Add this 'button' object to the impressions array
+    ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
+
+    // Push to the data layer
+    thisDataLayer.push(ecommerceObj);
+
+    return null;
+  });
+};
+
 export {
   onKeyPress,
   isAmountValid,
   isInputMatchBoxValue,
-  handleDonateSubmission
+  handleDonateSubmission,
+  DataLayerInit
 };

From 697914185af7fd32f6ed430aa4c8c2455f9ed0a4 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Wed, 8 Jan 2020 15:01:58 +0000
Subject: [PATCH 04/17] Move DL push outside of map

---
 src/utils/Membership.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/utils/Membership.js b/src/utils/Membership.js
index 8f747a66e..d10593cc9 100644
--- a/src/utils/Membership.js
+++ b/src/utils/Membership.js
@@ -100,12 +100,13 @@ const DataLayerInit = (
 
     // Add this 'button' object to the impressions array
     ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
-
-    // Push to the data layer
-    thisDataLayer.push(ecommerceObj);
-
+    console.log('DL:', ecommerceObj);
     return null;
   });
+
+  // Push to the data layer
+  alert('pushing to DL');
+  thisDataLayer.push(ecommerceObj);
 };
 
 export {

From e4d23e64a7f929218e7cd0f75bc7093fff963369 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Fri, 10 Jan 2020 12:24:46 +0000
Subject: [PATCH 05/17] Update comments and filename

---
 src/components/Molecules/Membership/Form/Form.js |  2 +-
 src/utils/{Membership.js => membershipHelper.js} | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)
 rename src/utils/{Membership.js => membershipHelper.js} (93%)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index 80ac212c9..0cbcc040f 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -9,7 +9,7 @@ import {
   isAmountValid,
   isInputMatchBoxValue,
   DataLayerInit
-} from '../../../../utils/Membership';
+} from '../../../../utils/membershipHelper';
 import {
   Button,
   Copy,
diff --git a/src/utils/Membership.js b/src/utils/membershipHelper.js
similarity index 93%
rename from src/utils/Membership.js
rename to src/utils/membershipHelper.js
index d10593cc9..34ddf0105 100644
--- a/src/utils/Membership.js
+++ b/src/utils/membershipHelper.js
@@ -59,7 +59,7 @@ const handleDonateSubmission = (
   window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
 };
 
-// Called by UseEffect later on first load
+// Sets-up initial DataLayer values
 const DataLayerInit = (
   thisRowID,
   thisClientID,
@@ -67,7 +67,7 @@ const DataLayerInit = (
   theseMoneyBuys,
   thisDataLayer
 ) => {
-  // Construct object to push to datalayer,staring with manual entry 'Other Amount' field
+  // Construct object to push to datalayer, staring with manual entry 'Other Amount' field
   const ecommerceObj = {
     ecommerce: {
       currencyCode: 'GBP',
@@ -85,7 +85,7 @@ const DataLayerInit = (
     }
   };
 
-  /* Iterate over all moneybuys */
+  // Iterate over all moneybuys
   theseMoneyBuys.map((moneyBuy, index) => {
     const thisMoneyBuy = {
       id: `moneybuy-${moneyBuy.value}`,
@@ -100,8 +100,8 @@ const DataLayerInit = (
 
     // Add this 'button' object to the impressions array
     ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
-    console.log('DL:', ecommerceObj);
-    return null;
+
+    return true;
   });
 
   // Push to the data layer

From a73885cb55bd1a279ccaef94622a4b7afc567326 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Fri, 10 Jan 2020 14:09:15 +0000
Subject: [PATCH 06/17] Debugged annoying doubleclick event from having a label
 wrap an input

---
 src/components/Molecules/Membership/Form/Form.js    | 13 ++++++++++---
 .../Molecules/Membership/MoneyBox/MoneyBox.js       |  6 ++++--
 src/utils/membershipHelper.js                       |  9 +++++++--
 3 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index 0cbcc040f..cac31c338 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -8,7 +8,8 @@ import {
   onKeyPress,
   isAmountValid,
   isInputMatchBoxValue,
-  DataLayerInit
+  DataLayerInit,
+  DataLayerUpdate
 } from '../../../../utils/membershipHelper';
 import {
   Button,
@@ -49,7 +50,11 @@ const Signup = ({
   const dataLayer = (window.dataLayer = window.dataLayer || []);
 
   // This function is triggered when one of the money buy box is selected
-  const selectMoneyBuy = (copy, value) => {
+  const selectMoneyBuy = (copy, value, event) => {
+    // Stops outer label clickevent being passed down to the input, triggering twice
+    event.stopPropagation();
+    alert('selectMoneyBuy');
+    DataLayerUpdate(copy, value);
     if (isSelected) setIsSelected(false);
     if (errorMsg) setErrorMsg(false);
     // Check if input is highlighted and his value matches one of the money buy box
@@ -144,7 +149,9 @@ const Signup = ({
         isInputMatchBox={value}
         amount={value}
         description={description}
-        setOtherAmount={() => selectMoneyBuy(description, value)}
+        setOtherAmount={e => {
+          selectMoneyBuy(description, value, e);
+        }}
         key={value}
         name={`moneyBuy${index + 1}`}
         id={`moneyBuy-box${index + 1}`}
diff --git a/src/components/Molecules/Membership/MoneyBox/MoneyBox.js b/src/components/Molecules/Membership/MoneyBox/MoneyBox.js
index 9af0f1a74..42634fb05 100644
--- a/src/components/Molecules/Membership/MoneyBox/MoneyBox.js
+++ b/src/components/Molecules/Membership/MoneyBox/MoneyBox.js
@@ -37,7 +37,9 @@ const MoneyBuy = ({
       type="button"
       label=""
       errorMsg=""
-      onClick={setOtherAmount}
+      onClick={e => {
+        setOtherAmount(e);
+      }}
     />
   );
 };
@@ -46,7 +48,7 @@ MoneyBuy.propTypes = {
   amount: PropTypes.number,
   currency: PropTypes.string,
   description: PropTypes.string,
-  // Function already set does'nt need to be passed as props
+  // Function already set doesn't need to be passed as props
   setOtherAmount: PropTypes.func.isRequired
 };
 
diff --git a/src/utils/membershipHelper.js b/src/utils/membershipHelper.js
index 34ddf0105..564f852b5 100644
--- a/src/utils/membershipHelper.js
+++ b/src/utils/membershipHelper.js
@@ -105,14 +105,19 @@ const DataLayerInit = (
   });
 
   // Push to the data layer
-  alert('pushing to DL');
+  // alert('pushing to DL');
   thisDataLayer.push(ecommerceObj);
 };
 
+const DataLayerUpdate = (input1, input2) => {
+  // alert(input1, input2);
+};
+
 export {
   onKeyPress,
   isAmountValid,
   isInputMatchBoxValue,
   handleDonateSubmission,
-  DataLayerInit
+  DataLayerInit,
+  DataLayerUpdate
 };

From ebbc95320550f53b1c99c7521d764863e9100023 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Fri, 10 Jan 2020 16:50:02 +0000
Subject: [PATCH 07/17] Set-up addd-remove func

---
 .../Molecules/Membership/Form/Form.js         |  9 ++---
 src/utils/membershipHelper.js                 | 34 +++++++++++++++++--
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index cac31c338..9c988fb36 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -53,8 +53,9 @@ const Signup = ({
   const selectMoneyBuy = (copy, value, event) => {
     // Stops outer label clickevent being passed down to the input, triggering twice
     event.stopPropagation();
-    alert('selectMoneyBuy');
-    DataLayerUpdate(copy, value);
+
+    DataLayerUpdate(value, 'add', dataLayer);
+
     if (isSelected) setIsSelected(false);
     if (errorMsg) setErrorMsg(false);
     // Check if input is highlighted and his value matches one of the money buy box
@@ -86,7 +87,7 @@ const Signup = ({
     setUserInput(input);
   };
 
-  const hightlightInput = (value, description) => {
+  const highlightInput = (value, description) => {
     if (isSelected) setIsSelected(false);
     if (errorMsg) {
       setMoneyBuyCopy(false);
@@ -195,7 +196,7 @@ const Signup = ({
             pattern="[^[0-9]+([,.][0-9]+)?$]"
             placeholder="0.00"
             onChange={e => handleChange(e.target.value, otherDescription)}
-            onClick={e => hightlightInput(e.target.value, otherDescription)}
+            onClick={e => highlightInput(e.target.value, otherDescription)}
             onKeyPress={e => onKeyPress(e)}
           />
         </FormFieldset>
diff --git a/src/utils/membershipHelper.js b/src/utils/membershipHelper.js
index 564f852b5..948b55785 100644
--- a/src/utils/membershipHelper.js
+++ b/src/utils/membershipHelper.js
@@ -109,8 +109,38 @@ const DataLayerInit = (
   thisDataLayer.push(ecommerceObj);
 };
 
-const DataLayerUpdate = (input1, input2) => {
-  // alert(input1, input2);
+const DataLayerUpdate = (thisValue, isAddUpdate, thisDataLayer) => {
+  // Construct generic ecommerce object for all use cases
+  // TODO: handle currency changes
+  const ecommerceObj = {
+    ecommerce: { currencyCode: 'GBP' },
+    event: isAddUpdate ? 'addToBasket' : 'removeFromBasket'
+  };
+
+  const thisMoneyBuy = {
+    id: `moneybuy-${thisValue}`,
+    name: `moneybuy-${thisValue}`,
+    price: thisValue,
+    brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
+    // category: thisCartID,
+    // position: index + 1,
+    // list: `${thisClientID}_${thisRowID}`,
+    dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+  };
+
+  // Add this 'button' object to the impressions array
+  ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
+
+  thisDataLayer.push(ecommerceObj);
+
+  /*   if (isAddUpdate) {
+    // Add
+    alert(`Adding - ${input1} : ${input2} : ${isAddUpdate}`);
+  } else {
+    alert(`Removal - ${input1} : ${input2} : ${isAddUpdate}`);
+  } */
+
+  return true;
 };
 
 export {

From b1412e549066cac50c8d71b7e845af477dcaaa92 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Mon, 13 Jan 2020 17:30:41 +0000
Subject: [PATCH 08/17] Set up basic submission

---
 .../Molecules/Membership/Form/Form.js         | 59 +++++++++++++------
 .../Molecules/Membership/MoneyBox/MoneyBox.js |  5 +-
 src/utils/membershipHelper.js                 | 57 ++++++++++--------
 3 files changed, 78 insertions(+), 43 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index 9c988fb36..d0d30e0d3 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -29,7 +29,7 @@ const Signup = ({
   otherDescription,
   clientID,
   cartID,
-  mbshipID,
+  mbshipID: mbshipRowID,
   ...rest
 }) => {
   const [moneyBoxes, setMoneyBoxes] = useState({
@@ -40,11 +40,12 @@ const Signup = ({
 
   const [isSelected, setIsSelected] = useState(true); // Highlight one the money buy box when the page load
   const [errorMsg, setErrorMsg] = useState(false);
-  const [amountDonate, setAmountDonate] = useState('');
-  const [userInput, setUserInput] = useState('');
+  const [currentDonationAmount, setCurrentDonationAmount] = useState('');
+  const [userInputValue, setUserInputValue] = useState('');
   const [boxBorderColor, setBoxBorderColor] = useState('');
   const [inputBorderColor, setInputBorderColor] = useState(false);
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
+  const [currentMoneyBuyPosition, setCurrentMoneyBuyPosition] = useState(true);
 
   // eslint-disable-next-line no-multi-assign
   const dataLayer = (window.dataLayer = window.dataLayer || []);
@@ -52,21 +53,24 @@ const Signup = ({
   // This function is triggered when one of the money buy box is selected
   const selectMoneyBuy = (copy, value, event) => {
     // Stops outer label clickevent being passed down to the input, triggering twice
-    event.stopPropagation();
+    if (event && event.type === 'click') {
+      event.stopPropagation();
+    }
 
-    DataLayerUpdate(value, 'add', dataLayer);
+    // Make a record of what position our currently selected amount is
+    setCurrentMoneyBuyPosition(event.target.getAttribute('data-pos'));
 
     if (isSelected) setIsSelected(false);
     if (errorMsg) setErrorMsg(false);
     // Check if input is highlighted and his value matches one of the money buy box
-    const isUserInputMatch = userInput * 1 === value; // convert string to number string * 1
+    const isUserInputMatch = userInputValue * 1 === value; // convert string to number string * 1
     if (inputBorderColor && !isUserInputMatch) {
       setInputBorderColor(false);
-      setUserInput('');
+      setUserInputValue('');
     }
     setBoxBorderColor(value);
     setMoneyBuyCopy(copy);
-    setAmountDonate(value);
+    setCurrentDonationAmount(value);
   };
 
   // Handle user other amount input
@@ -79,20 +83,27 @@ const Signup = ({
       setBoxBorderColor(false);
       if (errorMsg) setErrorMsg(false);
       setMoneyBuyCopy(description);
-      setAmountDonate(input);
+      setCurrentDonationAmount(input);
     }
     // Highlight both input and box
-    isInputMatchBoxValue(moneyBoxes, selectMoneyBuy, setAmountDonate, input);
+    isInputMatchBoxValue(
+      moneyBoxes,
+      selectMoneyBuy,
+      setCurrentDonationAmount,
+      input
+    );
     setInputBorderColor(true);
-    setUserInput(input);
+    setUserInputValue(input);
   };
 
   const highlightInput = (value, description) => {
+    // The manual input field always represnts the '0' MoneyBuy position in the DL
+    setCurrentMoneyBuyPosition('0');
     if (isSelected) setIsSelected(false);
     if (errorMsg) {
       setMoneyBuyCopy(false);
     } else if (!value) {
-      setAmountDonate(0);
+      setCurrentDonationAmount(0);
       setBoxBorderColor(false);
       setMoneyBuyCopy(description);
     }
@@ -108,7 +119,8 @@ const Signup = ({
       return (
         isSelected &&
         index === 1 &&
-        (setMoneyBuyCopy(moneyBuy.description), setAmountDonate(moneyBuy.value))
+        (setMoneyBuyCopy(moneyBuy.description),
+        setCurrentDonationAmount(moneyBuy.value))
       );
     });
   }, [isSelected, regularGiving.moneybuys]);
@@ -116,13 +128,13 @@ const Signup = ({
   /* Set up default DataLayer obj on pageload */
   useEffect(() => {
     DataLayerInit(
-      mbshipID,
+      mbshipRowID,
       clientID,
       cartID,
       regularGiving.moneybuys,
       dataLayer
     );
-  }, [cartID, clientID, dataLayer, mbshipID, regularGiving.moneybuys]);
+  }, [cartID, clientID, dataLayer, mbshipRowID, regularGiving.moneybuys]);
 
   const submitDonation = (
     event,
@@ -133,7 +145,17 @@ const Signup = ({
     donateURL
   ) => {
     event.preventDefault();
+
     if (isAmountValid(amount)) {
+      DataLayerUpdate(
+        amount,
+        'add',
+        currentMoneyBuyPosition,
+        clientId,
+        cartId,
+        mbshipRowID,
+        dataLayer
+      );
       handleDonateSubmission(amount, clientId, cartId, mbshipId, donateURL);
     } else {
       setErrorMsg(true);
@@ -156,6 +178,7 @@ const Signup = ({
         key={value}
         name={`moneyBuy${index + 1}`}
         id={`moneyBuy-box${index + 1}`}
+        position={`${index + 1}`}
       />
     )
   );
@@ -166,10 +189,10 @@ const Signup = ({
         onSubmit={e =>
           submitDonation(
             e,
-            amountDonate,
+            currentDonationAmount,
             clientID,
             cartID,
-            mbshipID,
+            mbshipRowID,
             donateLink
           )
         }
@@ -192,7 +215,7 @@ const Signup = ({
             {...rest}
             max="5000"
             min="1"
-            value={userInput}
+            value={userInputValue}
             pattern="[^[0-9]+([,.][0-9]+)?$]"
             placeholder="0.00"
             onChange={e => handleChange(e.target.value, otherDescription)}
diff --git a/src/components/Molecules/Membership/MoneyBox/MoneyBox.js b/src/components/Molecules/Membership/MoneyBox/MoneyBox.js
index 42634fb05..5c720ecc6 100644
--- a/src/components/Molecules/Membership/MoneyBox/MoneyBox.js
+++ b/src/components/Molecules/Membership/MoneyBox/MoneyBox.js
@@ -27,6 +27,7 @@ const MoneyBuy = ({
   amount,
   currency,
   description,
+  position,
   ...rest
 }) => {
   return (
@@ -37,6 +38,7 @@ const MoneyBuy = ({
       type="button"
       label=""
       errorMsg=""
+      data-pos={position}
       onClick={e => {
         setOtherAmount(e);
       }}
@@ -49,7 +51,8 @@ MoneyBuy.propTypes = {
   currency: PropTypes.string,
   description: PropTypes.string,
   // Function already set doesn't need to be passed as props
-  setOtherAmount: PropTypes.func.isRequired
+  setOtherAmount: PropTypes.func.isRequired,
+  position: PropTypes.string.isRequired
 };
 
 MoneyBuy.defaultProps = {
diff --git a/src/utils/membershipHelper.js b/src/utils/membershipHelper.js
index 948b55785..150f040a9 100644
--- a/src/utils/membershipHelper.js
+++ b/src/utils/membershipHelper.js
@@ -56,7 +56,8 @@ const handleDonateSubmission = (
       currentpageUrl.indexOf(thisMatch)
     );
   }
-  window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
+  // DEBUG
+  // window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
 };
 
 // Sets-up initial DataLayer values
@@ -109,37 +110,45 @@ const DataLayerInit = (
   thisDataLayer.push(ecommerceObj);
 };
 
-const DataLayerUpdate = (thisValue, isAddUpdate, thisDataLayer) => {
-  // Construct generic ecommerce object for all use cases
-  // TODO: handle currency changes
+const DataLayerUpdate = (
+  amount,
+  updateType,
+  currentMoneyBuyPosition,
+  clientId,
+  cartId,
+  mbshipRowID,
+  thisDataLayer
+) => {
+  const isManualEntry = currentMoneyBuyPosition === '0';
+
   const ecommerceObj = {
     ecommerce: { currencyCode: 'GBP' },
-    event: isAddUpdate ? 'addToBasket' : 'removeFromBasket'
+    event: updateType === 'add' ? 'addToBasket' : 'removeFromBasket'
   };
 
-  const thisMoneyBuy = {
-    id: `moneybuy-${thisValue}`,
-    name: `moneybuy-${thisValue}`,
-    price: thisValue,
-    brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
-    // category: thisCartID,
-    // position: index + 1,
-    // list: `${thisClientID}_${thisRowID}`,
-    dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+  const submitNameID = isManualEntry ? 'manual-entry' : `moneybuy-${amount}`;
+
+  // Parse this to a 2-decimal place float, need to re-parse after toFixed
+  let thisAmount = parseFloat(amount).toFixed(2);
+  thisAmount = parseFloat(thisAmount);
+
+  ecommerceObj.ecommerce[updateType] = {
+    actionField: { list: `${clientId}_${mbshipRowID}` },
+    products: [
+      {
+        id: submitNameID,
+        name: submitNameID,
+        price: thisAmount,
+        brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
+        category: cartId,
+        quantity: 1,
+        dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+      }
+    ]
   };
 
-  // Add this 'button' object to the impressions array
-  ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
-
   thisDataLayer.push(ecommerceObj);
 
-  /*   if (isAddUpdate) {
-    // Add
-    alert(`Adding - ${input1} : ${input2} : ${isAddUpdate}`);
-  } else {
-    alert(`Removal - ${input1} : ${input2} : ${isAddUpdate}`);
-  } */
-
   return true;
 };
 

From ad289fd0503a9a1feea6e2030475da9673159e52 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Tue, 14 Jan 2020 14:16:50 +0000
Subject: [PATCH 09/17] Unique IDs for buttons

---
 src/components/Molecules/Membership/Form/Form.js | 5 +++--
 src/utils/membershipHelper.js                    | 9 ++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index d0d30e0d3..033dc96fe 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -147,6 +147,7 @@ const Signup = ({
     event.preventDefault();
 
     if (isAmountValid(amount)) {
+      // Pass current values to function to fire DL event
       DataLayerUpdate(
         amount,
         'add',
@@ -176,8 +177,8 @@ const Signup = ({
           selectMoneyBuy(description, value, e);
         }}
         key={value}
-        name={`moneyBuy${index + 1}`}
-        id={`moneyBuy-box${index + 1}`}
+        name={`${mbshipRowID}--moneyBuy${index + 1}`}
+        id={`${mbshipRowID}--moneyBuy-box${index + 1}`}
         position={`${index + 1}`}
       />
     )
diff --git a/src/utils/membershipHelper.js b/src/utils/membershipHelper.js
index 150f040a9..3a5b55fcf 100644
--- a/src/utils/membershipHelper.js
+++ b/src/utils/membershipHelper.js
@@ -56,7 +56,7 @@ const handleDonateSubmission = (
       currentpageUrl.indexOf(thisMatch)
     );
   }
-  // DEBUG
+  // ** DEBUG! **
   // window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
 };
 
@@ -106,7 +106,6 @@ const DataLayerInit = (
   });
 
   // Push to the data layer
-  // alert('pushing to DL');
   thisDataLayer.push(ecommerceObj);
 };
 
@@ -128,9 +127,9 @@ const DataLayerUpdate = (
 
   const submitNameID = isManualEntry ? 'manual-entry' : `moneybuy-${amount}`;
 
-  // Parse this to a 2-decimal place float, need to re-parse after toFixed
-  let thisAmount = parseFloat(amount).toFixed(2);
-  thisAmount = parseFloat(thisAmount);
+  // Parse this to a 2-decimal place float and back to a string
+  let thisAmount = parseFloat(amount);
+  thisAmount = thisAmount.toFixed(2);
 
   ecommerceObj.ecommerce[updateType] = {
     actionField: { list: `${clientId}_${mbshipRowID}` },

From 17c829992b5f52ec1ce21fc8f546413cdd1b50cf Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Tue, 14 Jan 2020 14:42:52 +0000
Subject: [PATCH 10/17] Update labels

---
 src/components/Molecules/Membership/Form/Form.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index 033dc96fe..17789ab03 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -172,7 +172,7 @@ const Signup = ({
         boxBorderColor={boxBorderColor}
         isInputMatchBox={value}
         amount={value}
-        description={description}
+        description={`£${value}`}
         setOtherAmount={e => {
           selectMoneyBuy(description, value, e);
         }}
@@ -222,6 +222,7 @@ const Signup = ({
             onChange={e => handleChange(e.target.value, otherDescription)}
             onClick={e => highlightInput(e.target.value, otherDescription)}
             onKeyPress={e => onKeyPress(e)}
+            aria-label="Input a different amount"
           />
         </FormFieldset>
         <Button type="submit">Donate</Button>

From 81bc1a91c02e4b13ce5b870aeb34f48cd578db81 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Tue, 14 Jan 2020 16:11:16 +0000
Subject: [PATCH 11/17] Add cookie func

---
 package.json                  |  1 +
 src/utils/membershipHelper.js | 31 +++++++++++++++++++++++++++++--
 yarn.lock                     | 19 ++++++++++++++++++-
 3 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/package.json b/package.json
index 81c9187b8..479c5cc6b 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
     "react-test-renderer": "^16.8.6",
     "react-uid": "^2.2.0",
     "styled-components": "^4.3.1",
+    "universal-cookie": "^4.0.3",
     "youtube-player": "^5.5.2"
   },
   "husky": {
diff --git a/src/utils/membershipHelper.js b/src/utils/membershipHelper.js
index 3a5b55fcf..2de5e5085 100644
--- a/src/utils/membershipHelper.js
+++ b/src/utils/membershipHelper.js
@@ -1,3 +1,5 @@
+import Cookies from 'universal-cookie';
+
 // this function prevent keyboard characters like  e, + , - to be passed on the input
 const onKeyPress = event => {
   const keyCode = event.keyCode || event.which;
@@ -57,6 +59,7 @@ const handleDonateSubmission = (
     );
   }
   // ** DEBUG! **
+  alert('submitting');
   // window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
 };
 
@@ -109,6 +112,26 @@ const DataLayerInit = (
   thisDataLayer.push(ecommerceObj);
 };
 
+const updateCookie = (thisRowID, btnPos, addOrRemove) => {
+  const thisDomain = window.location.hostname;
+  const cookieName = 'mship-previous-amount';
+  let expireDate;
+
+  if (addOrRemove === 'add') {
+    expireDate = new Date(); // Current time
+    expireDate.setTime(expireDate.getTime() + 0.5 * 60 * 60 * 1000); // Add 30m
+  } else {
+    expireDate = new Date(1970, 1, 1, 0, 0, 0, 0);
+  }
+
+  const cookies = new Cookies();
+  cookies.set(`${cookieName}`, `${thisRowID}_${btnPos}`, {
+    path: '/',
+    expires: expireDate,
+    domain: thisDomain
+  });
+};
+
 const DataLayerUpdate = (
   amount,
   updateType,
@@ -138,14 +161,18 @@ const DataLayerUpdate = (
         id: submitNameID,
         name: submitNameID,
         price: thisAmount,
-        brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
-        category: cartId,
+        brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
         quantity: 1,
         dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
       }
     ]
   };
 
+  // Update our 'previously submitted cookie
+  if (updateType === 'add') {
+    updateCookie(mbshipRowID, currentMoneyBuyPosition, updateType);
+  }
+
   thisDataLayer.push(ecommerceObj);
 
   return true;
diff --git a/yarn.lock b/yarn.lock
index 56490486e..e476a5515 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1284,6 +1284,10 @@
   dependencies:
     "@babel/types" "^7.3.0"
 
+"@types/cookie@^0.3.3":
+  version "0.3.3"
+  resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.3.3.tgz#85bc74ba782fb7aa3a514d11767832b0e3bc6803"
+
 "@types/eslint-visitor-keys@^1.0.0":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
@@ -1333,6 +1337,10 @@
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
 
+"@types/object-assign@^4.0.30":
+  version "4.0.30"
+  resolved "https://registry.yarnpkg.com/@types/object-assign/-/object-assign-4.0.30.tgz#8949371d5a99f4381ee0f1df0a9b7a187e07e652"
+
 "@types/q@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
@@ -3029,7 +3037,7 @@ cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
 
-cookie@0.4.0:
+cookie@0.4.0, cookie@^0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.0.tgz#beb437e7022b3b6d49019d088665303ebe9c14ba"
 
@@ -11582,6 +11590,15 @@ unist-util-visit@^1.1.0, unist-util-visit@^1.4.0:
   dependencies:
     unist-util-visit-parents "^2.0.0"
 
+universal-cookie@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/universal-cookie/-/universal-cookie-4.0.3.tgz#c2fa59127260e6ad21ef3e0cdd66ad453cbc41f6"
+  dependencies:
+    "@types/cookie" "^0.3.3"
+    "@types/object-assign" "^4.0.30"
+    cookie "^0.4.0"
+    object-assign "^4.1.1"
+
 universal-user-agent@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/universal-user-agent/-/universal-user-agent-4.0.0.tgz#27da2ec87e32769619f68a14996465ea1cb9df16"

From 4610fc0faa0d93d824aefbe87b56c033c93c17e8 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Tue, 14 Jan 2020 16:33:12 +0000
Subject: [PATCH 12/17] Break out DL and cookie stuff

---
 .../Molecules/Membership/Form/Form.js         |  11 +-
 src/utils/membershipDataLayer.js              | 125 ++++++++++++++++++
 src/utils/membershipHelper.js                 | 121 +----------------
 3 files changed, 134 insertions(+), 123 deletions(-)
 create mode 100644 src/utils/membershipDataLayer.js

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index 17789ab03..fa2c80779 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -7,9 +7,7 @@ import {
   handleDonateSubmission,
   onKeyPress,
   isAmountValid,
-  isInputMatchBoxValue,
-  DataLayerInit,
-  DataLayerUpdate
+  isInputMatchBoxValue
 } from '../../../../utils/membershipHelper';
 import {
   Button,
@@ -23,6 +21,13 @@ import {
   AmountField
 } from '../Membership.style';
 
+import {
+  DataLayerInit,
+  DataLayerUpdate,
+  updateCookie,
+  checkCookie
+} from '../../../../utils/membershipDataLayer';
+
 const Signup = ({
   data: { regularGiving },
   donateLink,
diff --git a/src/utils/membershipDataLayer.js b/src/utils/membershipDataLayer.js
new file mode 100644
index 000000000..deeaea9fc
--- /dev/null
+++ b/src/utils/membershipDataLayer.js
@@ -0,0 +1,125 @@
+import Cookies from 'universal-cookie';
+
+/* Add/remove the cookie used to track previous interaction */
+const updateCookie = (thisRowID, btnPos, addOrRemove) => {
+  const cookies = new Cookies();
+  const thisDomain = window.location.hostname;
+  let expireDate;
+
+  if (addOrRemove === 'add') {
+    expireDate = new Date(); // Current time
+    expireDate.setTime(expireDate.getTime() + 0.5 * 60 * 60 * 1000); // Add 30m
+  } else {
+    // Effectively acts as a removal of the cookie by setting expiry in the past
+    expireDate = new Date(1970, 1, 1, 0, 0, 0, 0);
+  }
+
+  cookies.set('mship-previous-amount', `${thisRowID}_${btnPos}`, {
+    path: '/',
+    expires: expireDate,
+    domain: thisDomain
+  });
+};
+
+const checkCookie = () => {
+  /*   const cookies = new Cookies();
+  const x = cookies.get(); */
+  alert('checkCookie');
+};
+
+// Sets-up initial DataLayer values
+const DataLayerInit = (
+  thisRowID,
+  thisClientID,
+  thisCartID,
+  theseMoneyBuys,
+  thisDataLayer
+) => {
+  // Construct object to push to datalayer, staring with manual entry 'Other Amount' field
+  const ecommerceObj = {
+    ecommerce: {
+      currencyCode: 'GBP',
+      impressions: [
+        {
+          id: 'manual-entry',
+          name: 'manual-entry',
+          price: 0.0,
+          category: thisCartID,
+          position: 0,
+          list: `${thisClientID}_${thisRowID}`,
+          dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+        }
+      ]
+    }
+  };
+
+  // Iterate over all moneybuys
+  theseMoneyBuys.map((moneyBuy, index) => {
+    const thisMoneyBuy = {
+      id: `moneybuy-${moneyBuy.value}`,
+      name: `moneybuy-${moneyBuy.value}`,
+      price: moneyBuy.value,
+      brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
+      category: thisCartID,
+      position: index + 1,
+      list: `${thisClientID}_${thisRowID}`,
+      dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+    };
+
+    // Add this 'button' object to the impressions array
+    ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
+
+    return true;
+  });
+
+  // Push to the data layer
+  thisDataLayer.push(ecommerceObj);
+};
+
+/* Call Datalayer events */
+const DataLayerUpdate = (
+  amount,
+  updateType,
+  currentMoneyBuyPosition,
+  clientId,
+  cartId,
+  mbshipRowID,
+  thisDataLayer
+) => {
+  const isManualEntry = currentMoneyBuyPosition === '0';
+
+  const ecommerceObj = {
+    ecommerce: { currencyCode: 'GBP' },
+    event: updateType === 'add' ? 'addToBasket' : 'removeFromBasket'
+  };
+
+  const submitNameID = isManualEntry ? 'manual-entry' : `moneybuy-${amount}`;
+
+  // Parse this to a 2-decimal place float and back to a string
+  let thisAmount = parseFloat(amount);
+  thisAmount = thisAmount.toFixed(2);
+
+  ecommerceObj.ecommerce[updateType] = {
+    actionField: { list: `${clientId}_${mbshipRowID}` },
+    products: [
+      {
+        id: submitNameID,
+        name: submitNameID,
+        price: thisAmount,
+        brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+        quantity: 1,
+        dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
+      }
+    ]
+  };
+
+  // Update our 'previously submitted cookie
+  if (updateType === 'add') {
+    updateCookie(mbshipRowID, currentMoneyBuyPosition, updateType);
+  }
+
+  thisDataLayer.push(ecommerceObj);
+  return true;
+};
+
+export { DataLayerInit, DataLayerUpdate, updateCookie, checkCookie };
diff --git a/src/utils/membershipHelper.js b/src/utils/membershipHelper.js
index 2de5e5085..70d6e6060 100644
--- a/src/utils/membershipHelper.js
+++ b/src/utils/membershipHelper.js
@@ -1,5 +1,3 @@
-import Cookies from 'universal-cookie';
-
 // this function prevent keyboard characters like  e, + , - to be passed on the input
 const onKeyPress = event => {
   const keyCode = event.keyCode || event.which;
@@ -63,126 +61,9 @@ const handleDonateSubmission = (
   // window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
 };
 
-// Sets-up initial DataLayer values
-const DataLayerInit = (
-  thisRowID,
-  thisClientID,
-  thisCartID,
-  theseMoneyBuys,
-  thisDataLayer
-) => {
-  // Construct object to push to datalayer, staring with manual entry 'Other Amount' field
-  const ecommerceObj = {
-    ecommerce: {
-      currencyCode: 'GBP',
-      impressions: [
-        {
-          id: 'manual-entry',
-          name: 'manual-entry',
-          price: 0.0,
-          category: thisCartID,
-          position: 0,
-          list: `${thisClientID}_${thisRowID}`,
-          dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
-        }
-      ]
-    }
-  };
-
-  // Iterate over all moneybuys
-  theseMoneyBuys.map((moneyBuy, index) => {
-    const thisMoneyBuy = {
-      id: `moneybuy-${moneyBuy.value}`,
-      name: `moneybuy-${moneyBuy.value}`,
-      price: moneyBuy.value,
-      brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
-      category: thisCartID,
-      position: index + 1,
-      list: `${thisClientID}_${thisRowID}`,
-      dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
-    };
-
-    // Add this 'button' object to the impressions array
-    ecommerceObj.ecommerce.impressions.push(thisMoneyBuy);
-
-    return true;
-  });
-
-  // Push to the data layer
-  thisDataLayer.push(ecommerceObj);
-};
-
-const updateCookie = (thisRowID, btnPos, addOrRemove) => {
-  const thisDomain = window.location.hostname;
-  const cookieName = 'mship-previous-amount';
-  let expireDate;
-
-  if (addOrRemove === 'add') {
-    expireDate = new Date(); // Current time
-    expireDate.setTime(expireDate.getTime() + 0.5 * 60 * 60 * 1000); // Add 30m
-  } else {
-    expireDate = new Date(1970, 1, 1, 0, 0, 0, 0);
-  }
-
-  const cookies = new Cookies();
-  cookies.set(`${cookieName}`, `${thisRowID}_${btnPos}`, {
-    path: '/',
-    expires: expireDate,
-    domain: thisDomain
-  });
-};
-
-const DataLayerUpdate = (
-  amount,
-  updateType,
-  currentMoneyBuyPosition,
-  clientId,
-  cartId,
-  mbshipRowID,
-  thisDataLayer
-) => {
-  const isManualEntry = currentMoneyBuyPosition === '0';
-
-  const ecommerceObj = {
-    ecommerce: { currencyCode: 'GBP' },
-    event: updateType === 'add' ? 'addToBasket' : 'removeFromBasket'
-  };
-
-  const submitNameID = isManualEntry ? 'manual-entry' : `moneybuy-${amount}`;
-
-  // Parse this to a 2-decimal place float and back to a string
-  let thisAmount = parseFloat(amount);
-  thisAmount = thisAmount.toFixed(2);
-
-  ecommerceObj.ecommerce[updateType] = {
-    actionField: { list: `${clientId}_${mbshipRowID}` },
-    products: [
-      {
-        id: submitNameID,
-        name: submitNameID,
-        price: thisAmount,
-        brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
-        quantity: 1,
-        dimenstion10: 'membership-payment' // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
-      }
-    ]
-  };
-
-  // Update our 'previously submitted cookie
-  if (updateType === 'add') {
-    updateCookie(mbshipRowID, currentMoneyBuyPosition, updateType);
-  }
-
-  thisDataLayer.push(ecommerceObj);
-
-  return true;
-};
-
 export {
   onKeyPress,
   isAmountValid,
   isInputMatchBoxValue,
-  handleDonateSubmission,
-  DataLayerInit,
-  DataLayerUpdate
+  handleDonateSubmission
 };

From 00b86493f6daa60f8fd42c42b90822b88eeab308 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Tue, 14 Jan 2020 17:32:16 +0000
Subject: [PATCH 13/17] Set up cookie update logic

---
 .../Molecules/Membership/Form/Form.js         |  5 +++-
 .../Molecules/Membership/Membership.js        |  3 +-
 src/utils/membershipDataLayer.js              | 29 +++++++++++++++----
 3 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index fa2c80779..c741fef0b 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -24,7 +24,6 @@ import {
 import {
   DataLayerInit,
   DataLayerUpdate,
-  updateCookie,
   checkCookie
 } from '../../../../utils/membershipDataLayer';
 
@@ -189,6 +188,10 @@ const Signup = ({
     )
   );
 
+  useEffect(() => {
+    checkCookie(clientID, cartID, dataLayer);
+  });
+
   return (
     <FormWrapper>
       <Form
diff --git a/src/components/Molecules/Membership/Membership.js b/src/components/Molecules/Membership/Membership.js
index 23762b659..71add1914 100644
--- a/src/components/Molecules/Membership/Membership.js
+++ b/src/components/Molecules/Membership/Membership.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+
 import PropTypes from 'prop-types';
 
 import Text from '../../Atoms/Text/Text';
diff --git a/src/utils/membershipDataLayer.js b/src/utils/membershipDataLayer.js
index deeaea9fc..0be3d16c7 100644
--- a/src/utils/membershipDataLayer.js
+++ b/src/utils/membershipDataLayer.js
@@ -21,12 +21,6 @@ const updateCookie = (thisRowID, btnPos, addOrRemove) => {
   });
 };
 
-const checkCookie = () => {
-  /*   const cookies = new Cookies();
-  const x = cookies.get(); */
-  alert('checkCookie');
-};
-
 // Sets-up initial DataLayer values
 const DataLayerInit = (
   thisRowID,
@@ -122,4 +116,27 @@ const DataLayerUpdate = (
   return true;
 };
 
+const checkCookie = (thisClientID, thisCartID, thisDataLayer) => {
+  const cookies = new Cookies();
+
+  // See if we've got a previously saved interaction in our cookie
+  let checkCookieValues = cookies.get('mship-previous-amount');
+
+  if (checkCookieValues) {
+    checkCookieValues = checkCookieValues.split('_');
+    const thisRowID = checkCookieValues[0];
+    const thisBtnPos = checkCookieValues[1];
+
+    // Remove this cookie
+    updateCookie(thisRowID, thisBtnPos, 'remove');
+
+    alert(
+      `thisClientID: ${thisClientID}, thisCartID: ${thisCartID}, thisDataLayer: ${thisDataLayer}`
+    );
+
+    // NEED TO DETERMINE AMOUNTS ETC. FROM THE SUPPLIED BTNPOS AND ROWID
+    //DataLayerUpdate(thisRowID, thisBtnPos, 'remove');
+  }
+};
+
 export { DataLayerInit, DataLayerUpdate, updateCookie, checkCookie };

From a1448f825d04f2e712f8de99953c752b945ef107 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Mon, 20 Jan 2020 11:42:13 +0000
Subject: [PATCH 14/17] Finish cookie handling

---
 .../Molecules/Membership/Form/Form.js         |  4 +++
 .../Molecules/Membership/Membership.js        |  2 +-
 src/utils/membershipDataLayer.js              | 29 +++++++++++--------
 src/utils/membershipHelper.js                 |  4 +--
 4 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index 02848f841..49783533c 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -190,6 +190,10 @@ const Signup = ({
     )
   );
 
+  /*
+   * Check to see if we've got any previously 'added' values in the last 30min, if so 'remove'
+   * them from the 'basket' to avoid duplicates in the DL for the same user session
+   */
   useEffect(() => {
     checkCookie(clientID, cartID, dataLayer);
   });
diff --git a/src/components/Molecules/Membership/Membership.js b/src/components/Molecules/Membership/Membership.js
index 71add1914..b309ffaf8 100644
--- a/src/components/Molecules/Membership/Membership.js
+++ b/src/components/Molecules/Membership/Membership.js
@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
 import PropTypes from 'prop-types';
 
diff --git a/src/utils/membershipDataLayer.js b/src/utils/membershipDataLayer.js
index 0be3d16c7..01f1a388a 100644
--- a/src/utils/membershipDataLayer.js
+++ b/src/utils/membershipDataLayer.js
@@ -1,7 +1,7 @@
 import Cookies from 'universal-cookie';
 
 /* Add/remove the cookie used to track previous interaction */
-const updateCookie = (thisRowID, btnPos, addOrRemove) => {
+const updateCookie = (thisRowID, btnPos, thisAmount, addOrRemove) => {
   const cookies = new Cookies();
   const thisDomain = window.location.hostname;
   let expireDate;
@@ -10,11 +10,11 @@ const updateCookie = (thisRowID, btnPos, addOrRemove) => {
     expireDate = new Date(); // Current time
     expireDate.setTime(expireDate.getTime() + 0.5 * 60 * 60 * 1000); // Add 30m
   } else {
-    // Effectively acts as a removal of the cookie by setting expiry in the past
+    // Set an expired date to act as removal of the cookie
     expireDate = new Date(1970, 1, 1, 0, 0, 0, 0);
   }
 
-  cookies.set('mship-previous-amount', `${thisRowID}_${btnPos}`, {
+  cookies.set('mship-previous-amount', `${thisRowID}_${btnPos}_${thisAmount}`, {
     path: '/',
     expires: expireDate,
     domain: thisDomain
@@ -53,7 +53,7 @@ const DataLayerInit = (
       id: `moneybuy-${moneyBuy.value}`,
       name: `moneybuy-${moneyBuy.value}`,
       price: moneyBuy.value,
-      brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF .. also, is this right? "brand"?
+      brand: 'membership-payment', // ** CURRENTLY MONTHLY ONLY, NEEDS UPDATE TO ALLOW SINGLE DONATION STUFF
       category: thisCartID,
       position: index + 1,
       list: `${thisClientID}_${thisRowID}`,
@@ -109,7 +109,7 @@ const DataLayerUpdate = (
 
   // Update our 'previously submitted cookie
   if (updateType === 'add') {
-    updateCookie(mbshipRowID, currentMoneyBuyPosition, updateType);
+    updateCookie(mbshipRowID, currentMoneyBuyPosition, thisAmount, updateType);
   }
 
   thisDataLayer.push(ecommerceObj);
@@ -126,16 +126,21 @@ const checkCookie = (thisClientID, thisCartID, thisDataLayer) => {
     checkCookieValues = checkCookieValues.split('_');
     const thisRowID = checkCookieValues[0];
     const thisBtnPos = checkCookieValues[1];
+    const thisAmount = checkCookieValues[2];
 
     // Remove this cookie
-    updateCookie(thisRowID, thisBtnPos, 'remove');
-
-    alert(
-      `thisClientID: ${thisClientID}, thisCartID: ${thisCartID}, thisDataLayer: ${thisDataLayer}`
+    updateCookie(thisRowID, thisBtnPos, thisAmount, 'remove');
+
+    // Trigger 'remove' event for these values
+    DataLayerUpdate(
+      thisAmount,
+      'remove',
+      thisBtnPos,
+      thisClientID,
+      thisCartID,
+      thisRowID,
+      thisDataLayer
     );
-
-    // NEED TO DETERMINE AMOUNTS ETC. FROM THE SUPPLIED BTNPOS AND ROWID
-    //DataLayerUpdate(thisRowID, thisBtnPos, 'remove');
   }
 };
 
diff --git a/src/utils/membershipHelper.js b/src/utils/membershipHelper.js
index 70d6e6060..1d85b34ba 100644
--- a/src/utils/membershipHelper.js
+++ b/src/utils/membershipHelper.js
@@ -56,9 +56,7 @@ const handleDonateSubmission = (
       currentpageUrl.indexOf(thisMatch)
     );
   }
-  // ** DEBUG! **
-  alert('submitting');
-  // window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
+  window.location.href = `${donateLink}?clientOverride=${clientID}&amount=${amount}&currency=GBP&givingType=monthly&cartId=${cartID}&affiliate=${affiliateValue}&siteurl=${currentpageUrl}&rowID=${mbshipID}`;
 };
 
 export {

From 97f4cd4bc962006bd232291da2c81135ff32ec2d Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Mon, 20 Jan 2020 11:50:41 +0000
Subject: [PATCH 15/17] Update tests

---
 src/components/Molecules/Membership/Membership.test.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Molecules/Membership/Membership.test.js b/src/components/Molecules/Membership/Membership.test.js
index e483d221f..b5f7d83a7 100644
--- a/src/components/Molecules/Membership/Membership.test.js
+++ b/src/components/Molecules/Membership/Membership.test.js
@@ -450,6 +450,7 @@ it('renders correctly', () => {
                 <label
                   aria-label="£5"
                   className="c13 c14"
+                  data-pos="1"
                   htmlFor="mship-1--moneyBuy-box1"
                   onClick={[Function]}
                 >
@@ -464,6 +465,7 @@ it('renders correctly', () => {
                     aria-describedby="mship-1--moneyBuy-box1"
                     aria-label="£5"
                     className="c16 c14"
+                    data-pos="1"
                     id="mship-1--moneyBuy-box1"
                     name="mship-1--moneyBuy1"
                     onClick={[Function]}
@@ -476,6 +478,7 @@ it('renders correctly', () => {
                 <label
                   aria-label="£10"
                   className="c13 c17"
+                  data-pos="2"
                   htmlFor="mship-1--moneyBuy-box2"
                   onClick={[Function]}
                 >
@@ -490,6 +493,7 @@ it('renders correctly', () => {
                     aria-describedby="mship-1--moneyBuy-box2"
                     aria-label="£10"
                     className="c16 c17"
+                    data-pos="2"
                     id="mship-1--moneyBuy-box2"
                     name="mship-1--moneyBuy2"
                     onClick={[Function]}
@@ -502,6 +506,7 @@ it('renders correctly', () => {
                 <label
                   aria-label="£20"
                   className="c13 c14"
+                  data-pos="3"
                   htmlFor="mship-1--moneyBuy-box3"
                   onClick={[Function]}
                 >
@@ -516,6 +521,7 @@ it('renders correctly', () => {
                     aria-describedby="mship-1--moneyBuy-box3"
                     aria-label="£20"
                     className="c16 c14"
+                    data-pos="3"
                     id="mship-1--moneyBuy-box3"
                     name="mship-1--moneyBuy3"
                     onClick={[Function]}

From c2d3dbd4d0cb5af4f694e46f352221fc80b89d36 Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Mon, 20 Jan 2020 14:34:40 +0000
Subject: [PATCH 16/17] Set DL as hook var

---
 .../Molecules/Membership/Form/Form.js         | 20 +++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index 49783533c..b4c4ab6dd 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 
 import Text from '../../../Atoms/Text/Text';
@@ -53,8 +53,7 @@ const Signup = ({
   const [moneyBuyCopy, setMoneyBuyCopy] = useState(true);
   const [currentMoneyBuyPosition, setCurrentMoneyBuyPosition] = useState(true);
 
-  // eslint-disable-next-line no-multi-assign
-  const dataLayer = (window.dataLayer = window.dataLayer || []);
+  const dataLayer = useRef(null);
 
   // This function is triggered when one of the money buy box is selected
   const selectMoneyBuy = (copy, value, event) => {
@@ -63,7 +62,7 @@ const Signup = ({
       event.stopPropagation();
     }
 
-    // Make a record of what position our currently selected amount is
+    // Make a record of what position our currently-selected amount is
     setCurrentMoneyBuyPosition(event.target.getAttribute('data-pos'));
 
     if (isSelected) setIsSelected(false);
@@ -116,6 +115,11 @@ const Signup = ({
     setInputBorderColor(true);
   };
 
+  useEffect(() => {
+    // eslint--next-line no-multi-assign
+    dataLayer.current = window.dataLayer = window.dataLayer || [];
+  }, []);
+
   useEffect(() => {
     regularGiving.moneybuys.map((moneyBuy, index) => {
       const box = `box${index + 1}`;
@@ -138,9 +142,9 @@ const Signup = ({
       clientID,
       cartID,
       regularGiving.moneybuys,
-      dataLayer
+      dataLayer.current
     );
-  }, [cartID, clientID, dataLayer, mbshipRowID, regularGiving.moneybuys]);
+  }, [cartID, clientID, mbshipRowID, regularGiving.moneybuys]);
 
   const submitDonation = (
     event,
@@ -161,7 +165,7 @@ const Signup = ({
         clientId,
         cartId,
         mbshipRowID,
-        dataLayer
+        dataLayer.current
       );
       handleDonateSubmission(amount, clientId, cartId, mbshipId, donateURL);
     } else {
@@ -195,7 +199,7 @@ const Signup = ({
    * them from the 'basket' to avoid duplicates in the DL for the same user session
    */
   useEffect(() => {
-    checkCookie(clientID, cartID, dataLayer);
+    checkCookie(clientID, cartID, dataLayer.current);
   });
 
   return (

From 625ab326de9a5e69b28884d9898c16272115cc7e Mon Sep 17 00:00:00 2001
From: Andy E Phipps <a.phipps@comicrelief.com>
Date: Mon, 20 Jan 2020 14:56:26 +0000
Subject: [PATCH 17/17] ESlint fix

---
 src/components/Molecules/Membership/Form/Form.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Molecules/Membership/Form/Form.js b/src/components/Molecules/Membership/Form/Form.js
index b4c4ab6dd..b9aed2b31 100644
--- a/src/components/Molecules/Membership/Form/Form.js
+++ b/src/components/Molecules/Membership/Form/Form.js
@@ -117,7 +117,7 @@ const Signup = ({
 
   useEffect(() => {
     // eslint--next-line no-multi-assign
-    dataLayer.current = window.dataLayer = window.dataLayer || [];
+    dataLayer.current = window.dataLayer ? window.dataLayer : [];
   }, []);
 
   useEffect(() => {