init

Bin

2025-12-16 9e0b2ba2c317b1a86212f24cbae3195ad1f3dbfa

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
117
118
119
120
121
122
import { useCallback, useMemo, useRef, useState } from "react";
import { Checkbox, Spinner } from "@humansignal/ui";
import { useAuth } from "@humansignal/core/providers/AuthProvider";
import { ff, useAPI } from "@humansignal/core";
 
/**
 * FIXME: This is legacy imports. We're not supposed to use such statements
 * each one of these eventually has to be migrated to core/ui
 */
import { useConfig } from "apps/labelstudio/src/providers/ConfigProvider";
 
type NotificationCheckboxProps = {
  id: string;
  label: string;
  checked: boolean;
  onToggle: (e: React.ChangeEvent<HTMLInputElement>, id: string, setLoading: (isLoading: boolean) => void) => void;
};
 
const NotificationCheckbox = ({ id, label, checked, onToggle }: NotificationCheckboxProps) => {
  const [isLoading, setIsLoading] = useState(false);
 
  return (
    <div className="flex items-center gap-2">
      <Checkbox checked={checked} disabled={isLoading} onChange={(e) => onToggle(e, id, setIsLoading)}>
        {label}
      </Checkbox>
      {isLoading && <Spinner className="h-full" />}
    </div>
  );
};
 
export const EmailPreferences = () => {
  const isEnterpriseEmailNotificationsEnabled =
    ff.isActive(ff.FF_ENTERPRISE_EMAIL_NOTIFICATIONS) && window.APP_SETTINGS?.billing?.enterprise;
  const config = useConfig();
  const { user, refetch } = useAuth();
  const api = useAPI();
  const [isAllowNewsLetter, setIsAllowNewsLetter] = useState(config.user.allow_newsletters);
  const [emailNotificationSettings, setEmailNotificationSettings] = useState(
    user?.lse_fields?.email_notification_settings ?? {},
  );
  const emailNotificationSettingsRef = useRef(emailNotificationSettings);
 
  const toggleHandler = useCallback(
    async (e: any, name: string, setIsLoading: (isLoading: boolean) => void, callApiBody: any) => {
      if (name === "allow_newsletters") {
        setIsAllowNewsLetter(e.target.checked);
      }
      setIsLoading(true);
      const response = await api.callApi("updateUser", {
        params: {
          pk: user?.id,
        },
        body: callApiBody,
      });
      // @ts-ignore
      if (response?.lse_fields?.email_notification_settings) {
        // @ts-ignore
        setEmailNotificationSettings(response.lse_fields.email_notification_settings);
        // @ts-ignore
        emailNotificationSettingsRef.current = response.lse_fields.email_notification_settings;
        refetch();
      }
      setIsLoading(false);
    },
    [user],
  );
 
  const message = useMemo(() => {
    return window.APP_SETTINGS?.whitelabel_is_active
      ? "Subscribe for news and tips"
      : "Subscribe to HumanSignal news and tips from Heidi";
  }, []);
 
  return (
    <div id="email-preferences" className="flex flex-col gap-4">
      <NotificationCheckbox
        id="allow_newsletters"
        label={message}
        checked={isAllowNewsLetter}
        onToggle={(e, id, setIsLoading) =>
          toggleHandler(e, id, setIsLoading, {
            allow_newsletters: e.target.checked ? 1 : 0,
          })
        }
      />
 
      {isEnterpriseEmailNotificationsEnabled && (
        <>
          {Object.entries(emailNotificationSettings).map(([id, { value, label }]: [string, any]) => {
            const notificationToggleHandler = (
              e: React.ChangeEvent<HTMLInputElement>,
              id: string,
              setIsLoading: (isLoading: boolean) => void,
            ) => {
              const newEmailNotificationSettings: Record<string, any> = {};
              Object.entries(emailNotificationSettingsRef.current).forEach(([key, { value }]: [string, any]) => {
                if (key === id) {
                  newEmailNotificationSettings[key] = e.target.checked;
                } else {
                  newEmailNotificationSettings[key] = value;
                }
              });
              toggleHandler(e, id, setIsLoading, {
                email_notification_settings: newEmailNotificationSettings,
              });
            };
            return (
              <NotificationCheckbox
                key={id}
                id={id}
                label={label}
                checked={value}
                onToggle={notificationToggleHandler}
              />
            );
          })}
        </>
      )}
    </div>
  );
};