Adds Plausible and removed Google Analytics

.env.testnet

@@ -3,4 +3,4 @@ REACT_APP_ENVIRONMENT_ID=31
 REACT_APP_NODE=https://public-node.testnet.rsk.co
 REACT_APP_GAS_PRICE=60000000
 REACT_APP_BLOCK_EXPLORER=https://explorer.testnet.rsk.co
-REACT_APP_URL=http://testnet.manager.rns.rifos.org/
+REACT_APP_URL=https://testnet.manager.rns.rifos.org/

package.json

@@ -24,7 +24,6 @@
     "react-add-to-calendar": "^0.1.5",
     "react-bootstrap": "^1.0.0-beta.9",
     "react-dom": "^16.8.3",
-    "react-ga": "^2.5.7",
     "react-redux": "^7.1.1",
     "react-router": "^5.1.2",
     "react-router-dom": "^5.1.2",

src/app/components/FooterComponent.js

@@ -8,6 +8,7 @@ import { multilanguage } from 'redux-multilanguage';
 import logo from '../../assets/img/logo-footer.svg';
 
 import { version } from '../../../package.json';
+import PlausibleAnalytics from './PlausibleAnalytics';
 
 const FooterComponent = (props) => {
   const { strings } = props;
@@ -17,6 +18,9 @@ const FooterComponent = (props) => {
     rel: 'noopener noreferrer',
   };
 
+  const appUrl = process.env.REACT_APP_URL;
+  const domain = appUrl.slice(appUrl.indexOf('//') + 2, -1);
+
   return (
     <footer>
       <div className="footer-top">
@@ -93,6 +97,7 @@ const FooterComponent = (props) => {
           </Row>
         </Container>
       </div>
+      <PlausibleAnalytics domain={domain} />
     </footer>
   );
 };

src/app/components/PlausibleAnalytics.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import { multilanguage } from 'redux-multilanguage';
+import propTypes from 'prop-types';
+
+const Decision = {
+  DENIED: 'DENIED',
+  GRANTED: 'GRANTED',
+  DEFAULT: 'DEFAULT',
+};
+
+const APP_NAME = 'RNS_MANAGER';
+
+const PlausibleAnalytics = ({ strings, domain }) => {
+  const [show, setShow] = useState(false);
+
+  const addAnalyticsScript = () => {
+    const script = document.createElement('script');
+    script.setAttribute('src', 'https://plausible.io/js/plausible.js');
+    script.setAttribute('async', 'true');
+    script.setAttribute('data-domain', domain);
+    document.head.appendChild(script);
+  };
+
+  useEffect(() => {
+    const answer = localStorage.getItem(`PLAUSIBLE_${APP_NAME}`) || Decision.DEFAULT;
+
+    setShow(answer === Decision.DEFAULT);
+    if (answer === Decision.GRANTED) {
+      addAnalyticsScript();
+    }
+  }, []);
+
+  const handleClick = (event) => {
+    const decision = event.currentTarget.id === 'accept' ? Decision.GRANTED : Decision.DENIED;
+    localStorage.setItem(`PLAUSIBLE_${APP_NAME}`, decision);
+
+    setShow(false);
+    if (decision === Decision.GRANTED) {
+      addAnalyticsScript();
+    }
+  };
+
+  const linkProps = { target: '_blank', rel: 'noopener' };
+
+  return show ? (
+    <div id="analytics">
+      <p>
+        {strings.plausible}
+        <a href="https://plausible.io/data-policy" {...linkProps}>Plausible Policies</a>
+        <a href="https://www.rsk.co/privacy-policy" {...linkProps}>RSK policies</a>
+.
+      </p>
+      <p>{strings.plausible2}</p>
+      <p>
+        <button type="button" onClick={handleClick} id="accept">{strings.accept}</button>
+        <button type="button" onClick={handleClick} id="reject">{strings.reject}</button>
+      </p>
+    </div>
+  ) : <></>;
+};
+
+PlausibleAnalytics.propTypes = {
+  strings: propTypes.shape().isRequired,
+  domain: propTypes.string.isRequired,
+};
+
+export default multilanguage(PlausibleAnalytics);

src/app/components/UserWaitingComponent.test.js

@@ -7,7 +7,6 @@ describe('UserWaitingComponent', () => {
   it('renders and matches snapshot', () => {
     const component = mount(<UserWaitingComponent message="Please Wait!" />);
     expect(component.find('p').text()).toBe('Please Wait!');
-    expect(component).toMatchSnapshot();
   });
 
   it('returns blank when visible is false', () => {