feat(tracking): adds privacy settings modal

.github/workflows/testnet.yml

@@ -0,0 +1,62 @@
+name: RIF Marketplace UI deploy
+
+on:
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+    branches:
+      - testnet
+
+jobs:
+  deploy-staging:
+    name: RIF Marketplace UI - Testnet
+    runs-on: ubuntu-latest
+    environment: testnet
+
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Setup Node 14
+      uses: actions/setup-node@v1
+      with:
+        node-version: '14'
+
+    - uses: actions/cache@v2
+      id: cache
+      with:
+        path: ~/.npm
+        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
+        restore-keys: |
+          ${{ runner.os }}-node-
+
+    - name: Install dependencies
+      if: steps.cache.outputs.cache-hit != 'true'
+      run: |
+        npm ci
+
+    - name: Build site
+      env:
+        REACT_APP_CACHE_ADDR: ${{ secrets.TESTNET_REACT_APP_CACHE_ADDR }}
+        REACT_APP_UPLOAD_ADDR: ${{ secrets.TESTNET_REACT_APP_UPLOAD_ADDR }}
+        REACT_APP_LOG_LEVEL: error
+        REACT_APP_NETWORK: rsktestnet
+        REACT_APP_REQUIRED_NETWORK_ID: 31
+        REACT_APP_REQUIRED_NETWORK_NAME: RSK Testnet
+      run: |
+        npm run build:prod
+
+    - name: Configure AWS credentials
+      uses: aws-actions/configure-aws-credentials@v1
+      with:
+        aws-access-key-id: ${{ secrets.TESTNET_AWS_ACCESS_KEY_ID }}
+        aws-secret-access-key: ${{ secrets.TESNET_AWS_SECRET_ACCESS_KEY }}
+        aws-region: ${{ secrets.TESTNET_AWS_REGION }}
+
+    - name: Deploy site to S3
+      run: |
+        aws s3 sync --delete --only-show-errors build/ ${{ secrets.TESTNET_S3_BUCKET }}
+
+    - name: Invalidate CloudFront cache
+      run: |
+        aws cloudfront create-invalidation --distribution-id ${{ secrets.TESTNET_CLOUDFRONT_DISTRIBUTION }} --paths "/*"

src/components/organisms/Footer.tsx

@@ -4,6 +4,7 @@ import { Footer as RUIFooter } from '@rsksmart/rif-ui'
 /* eslint-disable-next-line import/no-unresolved */
 import { FooterProps } from '@rsksmart/rif-ui/dist/components/organisms/Footer'
 import { appVersion } from 'config'
+import PrivacySettingsModal from './tracking/PrivacySettingsModal'
 
 const useStyles = makeStyles(() => ({
   root: {
@@ -114,6 +115,7 @@ const Footer: FC = () => {
 
   return (
     <div className={classes.root}>
+      <PrivacySettingsModal />
       <RUIFooter {...footerProps} />
     </div>
   )

src/components/organisms/tracking/PrivacySettingsModal.tsx

@@ -0,0 +1,192 @@
+import React, { FC, useEffect, useState } from 'react'
+import {
+  Button,
+  colors,
+} from '@rsksmart/rif-ui'
+import GridColumn from 'components/atoms/GridColumn'
+import GridItem from 'components/atoms/GridItem'
+import GridRow from 'components/atoms/GridRow'
+import useTracking from 'hooks/useTracking'
+import Logger from 'utils/Logger'
+import { TRACKING_DATA_DOMAIN } from 'config'
+import makeStyles from '@material-ui/core/styles/makeStyles'
+import { Theme } from '@material-ui/core/styles/createMuiTheme'
+import Portal from '@material-ui/core/Portal/Portal'
+import Box from '@material-ui/core/Box/Box'
+import Typography from '@material-ui/core/Typography/Typography'
+import Link from '@material-ui/core/Link/Link'
+import createStyles from '@material-ui/core/styles/createStyles'
+
+const useStyles = makeStyles((theme: Theme) => createStyles({
+  root: {
+    flexGrow: 1,
+  },
+  paper: {
+    position: 'fixed',
+    bottom: '0px',
+    backgroundColor: '#F2F2F2',
+    border: 'none',
+    borderRadius: '20px 20px 0px 0px',
+    boxShadow: theme.shadows[5],
+    color: colors.gray5,
+  },
+  titleBox: {
+    margin: '0px',
+    height: '46px',
+    borderRadius: '20px 20px 0px 0px',
+    backgroundColor: colors.gray3,
+    color: '#4D4C4C',
+    justifySelf: 'center',
+  },
+  title: {
+    margin: 'auto',
+    padding: '10px',
+  },
+
+  descriptionBox: {
+    padding: '10px',
+    paddingRight: '75px',
+  },
+  actions: {
+    marginBottom: '1rem',
+    paddingRight: '75px',
+  },
+}))
+
+type PrivacySettings = {
+  tracking: boolean
+}
+
+const PrivacySettingsModal: FC = () => {
+  const classes = useStyles()
+  const settingsString = localStorage.getItem('privacySettings')
+  const [isOpen, setIsOpen] = useState(true)
+  const [settings, setSettings] = useState<PrivacySettings>()
+
+  useTracking({
+    activated: Boolean(settings?.tracking),
+    dataDomain: TRACKING_DATA_DOMAIN,
+  })
+
+  useEffect(() => {
+    if (settingsString) {
+      try {
+        const privacySettings = JSON.parse(settingsString)
+        setSettings(privacySettings)
+        setIsOpen(!privacySettings)
+      } catch {
+        Logger.getInstance().error('Something unexpected happened with the privacy settings object stored in the local storage.')
+      }
+    }
+  }, [settingsString])
+
+  const handleSelect = (allow: boolean) => (): void => {
+    localStorage.setItem('privacySettings', JSON.stringify({
+      tracking: allow,
+    }))
+    setIsOpen(false)
+  }
+
+  return isOpen ? (
+    <Portal>
+      <GridColumn className={classes.paper}>
+        <GridItem xs={12}>
+          <Box className={classes.titleBox}>
+            <Typography className={classes.title} align="left">
+              Privacy settings
+            </Typography>
+          </Box>
+        </GridItem>
+        <GridItem xs={12}>
+          <Box className={classes.descriptionBox}>
+            <GridColumn spacing={2}>
+              <GridItem>
+                <Typography align="left">
+                  In order to improve the user&apos;s experience,
+                  {' '}
+                  this site uses Plausible, an open source and privacy-friendly
+                  {' '}
+                  tool, which does not use cookies and is compliant with GDPR,
+                  {' '}
+                  CCPA and PECR. We analyse your activity and our traffic.
+                  {' '}
+                  We strive to collect only the data that we need.
+                  {' '}
+                  We do not share your information with third parties;
+                  {' '}
+                  we want to better understand your behaviour in order
+                  {' '}
+                  to improve our website. Please take a moment to familiarize
+                  {' '}
+                  yourself with Plausible’s and our policies, accessible at
+                  {' '}
+                  <Link href="https://plausible.io/data-policy">https://plausible.io/data-policy</Link>
+                  {' '}
+                  and
+                  {' '}
+                  <Link href="https://www.rsk.co/privacy-policy">https://www.rsk.co/privacy-policy</Link>
+                  .
+                </Typography>
+              </GridItem>
+              <GridItem>
+                <Typography align="left">
+                  If you accept Plausible’s and ours policy, please click
+                  {' '}
+                  <u>Accept</u>
+                  .
+                </Typography>
+              </GridItem>
+              <GridItem>
+                <Typography align="left">
+                  If you do not accept Plausible’s and ours policy,
+                  {' '}
+                  we provide you with the means to disable our tracking system,
+                  {' '}
+                  please click
+                  {' '}
+                  <u>Reject</u>
+                  .
+                </Typography>
+                <Typography align="left" color="primary">
+                  Certain features of the site may not be available if the
+                  {' '}
+                  tracking system is disabled.*
+                </Typography>
+              </GridItem>
+            </GridColumn>
+          </Box>
+        </GridItem>
+        <GridItem className={classes.actions}>
+          <GridRow justify="flex-end" spacing={3}>
+            <GridItem xs={1}>
+              <Button
+                fullWidth
+                rounded
+                id="reject-btn"
+                variant="contained"
+                color="secondary"
+                onClick={handleSelect(false)}
+              >
+                Reject
+              </Button>
+            </GridItem>
+            <GridItem xs={1}>
+              <Button
+                fullWidth
+                rounded
+                id="accept-btn"
+                variant="contained"
+                color="primary"
+                onClick={handleSelect(true)}
+              >
+                Accept
+              </Button>
+            </GridItem>
+          </GridRow>
+        </GridItem>
+      </GridColumn>
+    </Portal>
+  ) : null
+}
+
+export default PrivacySettingsModal

src/config.ts

@@ -11,3 +11,8 @@ export const networkName = process.env.REACT_APP_REQUIRED_NETWORK_NAME
 export default uiConfig[network]
 
 export const appVersion = process.env.REACT_APP_VERSION
+
+export const TRACKING_URL = process.env.REACT_APP_TRACKING_URL
+|| 'https://plausible.io/js/plausible.js'
+export const TRACKING_DATA_DOMAIN = process.env.REACT_APP_TRACKING_DOMAIN
+|| window.location.host

src/hooks/usePlausible.tsx → src/hooks/useTracking.tsx

@@ -1,20 +1,19 @@
+import { TRACKING_URL } from 'config'
 import { useEffect } from 'react'
 
-export type UsePlausibleProps = {
+export type Props = {
   activated: boolean
   dataDomain: string
 }
 
-const PLAUSIBLE_URL = 'https://plausible.io/js/plausible.js'
-
-const usePlausible = (
-  { activated, dataDomain }: UsePlausibleProps,
+const useTracking = (
+  { activated, dataDomain }: Props,
 ): void => {
   useEffect(() => {
     if (activated) {
       const script = document.createElement('script')
 
-      script.setAttribute('src', PLAUSIBLE_URL)
+      script.setAttribute('src', TRACKING_URL)
       script.setAttribute('async', 'true')
       script.setAttribute('data-domain', dataDomain)
 
@@ -23,4 +22,4 @@ const usePlausible = (
   }, [activated, dataDomain])
 }
 
-export default usePlausible
+export default useTracking