1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
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);
|
