refactor(components): extract SettingsForm component form SettingsModal

We could use an array of items and map over it instead of repeating the
Switch component for each settings but with translations, it becomes
quickly unreadable. So I prefer to keep separate components.

1 files changed, 116 insertions, 0 deletions

diff --git a/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.tsx b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.tsx
new file mode 100644
index 0000000..0eee1fc
--- /dev/null
+++ b/src/components/organisms/forms/settings-form/ackee-toggle/ackee-toggle.tsx
@@ -0,0 +1,116 @@
+import { forwardRef, type ForwardRefRenderFunction } from 'react';
+import { useIntl } from 'react-intl';
+import { useAckee, useBoolean } from '../../../../../utils/hooks';
+import { Legend, List, ListItem } from '../../../../atoms';
+import {
+  Switch,
+  type SwitchOption,
+  type SwitchProps,
+  Tooltip,
+  type TooltipProps,
+} from '../../../../molecules';
+import styles from './ackee-toggle.module.scss';
+
+export type AckeeToggleProps = Omit<
+  SwitchProps,
+  'isInline' | 'items' | 'legend' | 'name' | 'onSwitch' | 'value'
+> &
+  Pick<TooltipProps, 'direction'>;
+
+const AckeeToggleWithRef: ForwardRefRenderFunction<
+  HTMLFieldSetElement,
+  AckeeToggleProps
+> = ({ direction, ...props }, ref) => {
+  const intl = useIntl();
+  const [tracking, toggleTracking] = useAckee();
+  const {
+    deactivate: closeTooltip,
+    state: isTooltipOpened,
+    toggle: toggleTooltip,
+  } = useBoolean(false);
+
+  const messages = {
+    legend: intl.formatMessage({
+      defaultMessage: 'Tracking:',
+      description: 'AckeeToggle: select label',
+      id: '0gVlI3',
+    }),
+    options: {
+      full: intl.formatMessage({
+        defaultMessage: 'Full',
+        description: 'AckeeToggle: full option name',
+        id: '5eD6y2',
+      }),
+      partial: intl.formatMessage({
+        defaultMessage: 'Partial',
+        description: 'AckeeToggle: partial option name',
+        id: 'tIZYpD',
+      }),
+    },
+    tooltip: {
+      heading: intl.formatMessage({
+        defaultMessage: 'Ackee tracking (analytics)',
+        description: 'AckeeToggle: tooltip title',
+        id: 'nGss/j',
+      }),
+      contents: {
+        full: intl.formatMessage({
+          defaultMessage:
+            'Full includes all information from partial as well as information about referrer, operating system, device, browser, screen size and language.',
+          description: 'AckeeToggle: tooltip message',
+          id: '7zDlQo',
+        }),
+        partial: intl.formatMessage({
+          defaultMessage: 'Partial includes only page url, views and duration.',
+          description: 'AckeeToggle: tooltip message',
+          id: 'ZB/Aw2',
+        }),
+      },
+    },
+  };
+
+  const options = [
+    { id: 'ackee-full' as const, label: messages.options.full, value: 'full' },
+    {
+      id: 'ackee-partial' as const,
+      label: messages.options.partial,
+      value: 'partial',
+    },
+  ] satisfies [SwitchOption, SwitchOption];
+
+  return (
+    <Switch
+      {...props}
+      isInline
+      items={options}
+      legend={<Legend>{messages.legend}</Legend>}
+      // eslint-disable-next-line react/jsx-no-literals
+      name="ackee"
+      onSwitch={toggleTracking}
+      ref={ref}
+      tooltip={
+        <Tooltip
+          className={styles.tooltip}
+          direction={direction}
+          heading={messages.tooltip.heading}
+          isOpen={isTooltipOpened}
+          onClickOutside={closeTooltip}
+          onToggle={toggleTooltip}
+        >
+          <List>
+            <ListItem>{messages.tooltip.contents.full}</ListItem>
+            <ListItem>{messages.tooltip.contents.partial}</ListItem>
+          </List>
+        </Tooltip>
+      }
+      value={tracking}
+    />
+  );
+};
+
+/**
+ * AckeeToggle component
+ *
+ * Render a Toggle component to set tracking.
+ */
+export const AckeeToggle = forwardRef(AckeeToggleWithRef);