Add content protection checkbox to Settings window

ts/components/Preferences.tsx

@@ -96,6 +96,7 @@ export type PropsDataType = {
   hasAutoLaunch: boolean;
   hasCallNotifications: boolean;
   hasCallRingtoneNotification: boolean;
+  hasContentProtection: boolean;
   hasCountMutedConversations: boolean;
   hasHideMenuBar?: boolean;
   hasIncomingCallNotifications: boolean;
@@ -145,6 +146,8 @@ export type PropsDataType = {
   isSystemTraySupported: boolean;
   isMinimizeToAndStartInSystemTraySupported: boolean;
   isInternalUser: boolean;
+  isContentProtectionNeeded: boolean;
+  isContentProtectionSupported: boolean;
 
   availableCameras: Array<
     Pick<MediaDeviceInfo, 'deviceId' | 'groupId' | 'kind' | 'label'>
@@ -189,6 +192,7 @@ type PropsFunctionType = {
   onAutoLaunchChange: CheckboxChangeHandlerType;
   onCallNotificationsChange: CheckboxChangeHandlerType;
   onCallRingtoneNotificationChange: CheckboxChangeHandlerType;
+  onContentProtectionChange: CheckboxChangeHandlerType;
   onCountMutedConversationsChange: CheckboxChangeHandlerType;
   onEmojiSkinToneDefaultChange: (emojiSkinTone: EmojiSkinTone) => void;
   onHasStoriesDisabledChanged: SelectChangeHandlerType<boolean>;
@@ -297,6 +301,7 @@ export function Preferences({
   hasAutoLaunch,
   hasCallNotifications,
   hasCallRingtoneNotification,
+  hasContentProtection,
   hasCountMutedConversations,
   hasHideMenuBar,
   hasIncomingCallNotifications,
@@ -326,6 +331,8 @@ export function Preferences({
   isSystemTraySupported,
   isMinimizeToAndStartInSystemTraySupported,
   isInternalUser,
+  isContentProtectionNeeded,
+  isContentProtectionSupported,
   lastSyncTime,
   makeSyncRequest,
   notificationContent,
@@ -336,6 +343,7 @@ export function Preferences({
   onAutoLaunchChange,
   onCallNotificationsChange,
   onCallRingtoneNotificationChange,
+  onContentProtectionChange,
   onCountMutedConversationsChange,
   onEmojiSkinToneDefaultChange,
   onHasStoriesDisabledChanged,
@@ -392,6 +400,8 @@ export function Preferences({
 
   const [confirmDelete, setConfirmDelete] = useState(false);
   const [confirmStoriesOff, setConfirmStoriesOff] = useState(false);
+  const [confirmContentProtection, setConfirmContentProtection] =
+    useState(false);
   const [page, setPage] = useState<Page>(initialPage);
   const [showSyncFailed, setShowSyncFailed] = useState(false);
   const [nowSyncing, setNowSyncing] = useState(false);
@@ -460,6 +470,17 @@ export function Preferences({
     [onSelectedMicrophoneChange, availableMicrophones]
   );
 
+  const handleContentProtectionChange = useCallback(
+    (value: boolean) => {
+      if (value === true || !isContentProtectionNeeded) {
+        onContentProtectionChange(value);
+      } else {
+        setConfirmContentProtection(true);
+      }
+    },
+    [onContentProtectionChange, isContentProtectionNeeded]
+  );
+
   const settingsPaneRef = useRef<HTMLDivElement | null>(null);
   useEffect(() => {
     const settingsPane = settingsPaneRef.current;
@@ -1365,6 +1386,41 @@ export function Preferences({
             }
           />
         </SettingsRow>
+        {isContentProtectionSupported && (
+          <SettingsRow title={i18n('icu:Preferences__Privacy__Application')}>
+            <Checkbox
+              checked={hasContentProtection}
+              description={i18n(
+                'icu:Preferences__content-protection--description'
+              )}
+              label={i18n('icu:Preferences__content-protection--label')}
+              moduleClassName="Preferences__checkbox"
+              name="contentProtection"
+              onChange={handleContentProtectionChange}
+            />
+          </SettingsRow>
+        )}
+        {confirmContentProtection ? (
+          <ConfirmationDialog
+            dialogName="Preference.confirmContentProtection"
+            actions={[
+              {
+                action: () => onContentProtectionChange(false),
+                style: 'negative',
+                text: i18n(
+                  'icu:Preferences__content-protection__modal--disable'
+                ),
+              },
+            ]}
+            i18n={i18n}
+            onClose={() => {
+              setConfirmContentProtection(false);
+            }}
+            title={i18n('icu:Preferences__content-protection__modal--title')}
+          >
+            {i18n('icu:Preferences__content-protection__modal--body')}
+          </ConfirmationDialog>
+        ) : null}
         <SettingsRow title={i18n('icu:Stories__title')}>
           <Control
             left={