From 61278678ea8a8febee0574cd0f6006492d7b15cb Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 8 Apr 2022 22:34:24 +0200
Subject: chore: add a AckeeSelect component

---
 src/components/molecules/forms/ackee-select.tsx | 89 +++++++++++++++++++++++++
 1 file changed, 89 insertions(+)
 create mode 100644 src/components/molecules/forms/ackee-select.tsx

(limited to 'src/components/molecules/forms/ackee-select.tsx')

diff --git a/src/components/molecules/forms/ackee-select.tsx b/src/components/molecules/forms/ackee-select.tsx
new file mode 100644
index 0000000..4a8410c
--- /dev/null
+++ b/src/components/molecules/forms/ackee-select.tsx
@@ -0,0 +1,89 @@
+import { SelectOptions } from '@components/atoms/forms/select';
+import { Dispatch, SetStateAction, useState, VFC } from 'react';
+import { useIntl } from 'react-intl';
+import SelectWithTooltip, {
+  SelectWithTooltipProps,
+} from './select-with-tooltip';
+
+export type AckeeOptions = 'full' | 'partial';
+
+export type AckeeSelectProps = Pick<
+  SelectWithTooltipProps,
+  'labelClassName' | 'tooltipClassName'
+> & {
+  /**
+   * A default value for Ackee settings.
+   */
+  initialValue: AckeeOptions;
+};
+
+/**
+ * AckeeSelect component
+ *
+ * Render a select to set Ackee settings.
+ */
+const AckeeSelect: VFC<AckeeSelectProps> = ({ initialValue, ...props }) => {
+  const intl = useIntl();
+  const [value, setValue] = useState<AckeeOptions>(initialValue);
+
+  const ackeeLabel = intl.formatMessage({
+    defaultMessage: 'Tracking:',
+    description: 'AckeeSelect: select label',
+    id: '2pmylc',
+  });
+  const tooltipTitle = intl.formatMessage({
+    defaultMessage: 'Ackee tracking (analytics)',
+    description: 'AckeeSelect: tooltip title',
+    id: 'F1EQX3',
+  });
+  const tooltipContent = [
+    intl.formatMessage({
+      defaultMessage: 'Partial includes only page url, views and duration.',
+      description: 'AckeeSelect: tooltip message',
+      id: 'skb4W5',
+    }),
+    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',
+      id: 'Ogccx6',
+    }),
+  ];
+  const options: SelectOptions[] = [
+    {
+      id: 'partial',
+      name: intl.formatMessage({
+        defaultMessage: 'Partial',
+        description: 'AckeeSelect: partial option name',
+        id: 'e/8Kyj',
+      }),
+      value: 'partial',
+    },
+    {
+      id: 'full',
+      name: intl.formatMessage({
+        defaultMessage: 'Full',
+        description: 'AckeeSelect: full option name',
+        id: 'PzRpPw',
+      }),
+      value: 'full',
+    },
+  ];
+
+  return (
+    <SelectWithTooltip
+      id="ackee-settings"
+      name="ackee-settings"
+      label={ackeeLabel}
+      labelSize="medium"
+      options={options}
+      title={tooltipTitle}
+      content={tooltipContent}
+      value={value}
+      setValue={setValue as Dispatch<SetStateAction<string>>}
+      {...props}
+    />
+  );
+};
+
+export default AckeeSelect;
-- 
cgit v1.2.3