feat: improve Ackee tracking (#11)

* build(deps): add use-ackee hook package

* chore: create a context provider for Ackee

The provider allows users to change the 'detailed' settings.

* chore: add a select menu to choose which info to share with Ackee

* chore: add a tooltip for askee settings

* chore: replace default select styles with custom styles

* chore: register user choice in localstorage

* chore: replace Matomo with Ackee in legal notice

2 files changed, 89 insertions, 0 deletions

diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.module.scss b/src/components/Settings/AckeeSelect/AckeeSelect.module.scss
new file mode 100644
index 0000000..b145761
--- /dev/null
+++ b/src/components/Settings/AckeeSelect/AckeeSelect.module.scss
@@ -0,0 +1,6 @@
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: var(--spacing-xs);
+}
diff --git a/src/components/Settings/AckeeSelect/AckeeSelect.tsx b/src/components/Settings/AckeeSelect/AckeeSelect.tsx
new file mode 100644
index 0000000..58fc994
--- /dev/null
+++ b/src/components/Settings/AckeeSelect/AckeeSelect.tsx
@@ -0,0 +1,83 @@
+import { Label, Select } from '@components/Form';
+import Tooltip from '@components/Tooltip/Tooltip';
+import { LocalStorage } from '@services/local-storage';
+import { useAckeeTracker } from '@utils/providers/ackee';
+import { useEffect, useState } from 'react';
+import { useIntl } from 'react-intl';
+import styles from './AckeeSelect.module.scss';
+
+const AckeeSelect = () => {
+  const intl = useIntl();
+  const options = [
+    {
+      id: 'partial',
+      name: intl.formatMessage({
+        defaultMessage: 'Partial',
+        description: 'AckeeSelect: partial option name',
+      }),
+      value: 'partial',
+    },
+    {
+      id: 'full',
+      name: intl.formatMessage({
+        defaultMessage: 'Full',
+        description: 'AckeeSelect: full option name',
+      }),
+      value: 'full',
+    },
+  ];
+  const [value, setValue] = useState<string>('full');
+  const { setDetailed } = useAckeeTracker();
+
+  useEffect(() => {
+    setDetailed(value === 'full');
+  }, [setDetailed, value]);
+
+  useEffect(() => {
+    const initialState = LocalStorage.get('ackee-tracking');
+    if (initialState) setValue(initialState);
+  }, []);
+
+  useEffect(() => {
+    LocalStorage.set('ackee-tracking', `${value}`);
+  }, [value]);
+
+  const label = (
+    <Label
+      body={intl.formatMessage({
+        defaultMessage: 'Tracking:',
+        description: 'AckeeSelect: select label',
+      })}
+      htmlFor="ackee-settings"
+      kind="settings"
+    />
+  );
+
+  const message = [
+    intl.formatMessage({
+      defaultMessage: 'Partial includes only page url, views and duration.',
+      description: 'AckeeSelect: tooltip message',
+    }),
+    intl.formatMessage({
+      defaultMessage:
+        'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
+      description: 'AckeeSelect: tooltip message',
+    }),
+  ];
+
+  return (
+    <div className={styles.wrapper}>
+      <Select
+        id="ackee-settings"
+        name="ackee-settings"
+        label={label}
+        options={options}
+        value={value}
+        setValue={setValue}
+      />
+      <Tooltip message={message} title="Ackee tracking (analytics)" />
+    </div>
+  );
+};
+
+export default AckeeSelect;