From 3aca67335414204e87714b10449eb8d174e41ab8 Mon Sep 17 00:00:00 2001
From: Oliver Lazoroski <oliver.lazoroski@gmail.com>
Date: Wed, 12 Aug 2026 14:23:23 +0200
Subject: [PATCH] fix(react-dogfood): correct closed captions capability checks

The closed captions toggle checked START_CLOSED_CAPTIONS_CALL and
STOP_CLOSED_CAPTIONS_CALL together. useHasPermissions requires all
listed capabilities, so a user holding only one of the two grants got a
permanently disabled button and could never start captions.

Check the two grants independently and pick the one matching the current
captioning state. Also gate on transcription.closed_caption_mode, and
hide the button entirely when captions are disabled for the call or the
user holds neither grant.
---
 .../react-dogfood/components/ClosedCaptions.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/sample-apps/react/react-dogfood/components/ClosedCaptions.tsx b/sample-apps/react/react-dogfood/components/ClosedCaptions.tsx
index d55acfc987..342fef4a22 100644
--- a/sample-apps/react/react-dogfood/components/ClosedCaptions.tsx
+++ b/sample-apps/react/react-dogfood/components/ClosedCaptions.tsx
@@ -4,6 +4,7 @@ import {
   CompositeButton,
   Icon,
   OwnCapability,
+  TranscriptionSettingsResponseClosedCaptionModeEnum,
   useCall,
   useCallStateHooks,
   useI18n,
@@ -13,13 +14,19 @@ import {
 export const ToggleClosedCaptionsButton = () => {
   const call = useCall();
   const { t } = useI18n();
-  const { useIsCallCaptioningInProgress, useHasPermissions } =
+  const { useCallSettings, useIsCallCaptioningInProgress, useHasPermissions } =
     useCallStateHooks();
+  const settings = useCallSettings();
   const isCaptioned = useIsCallCaptioningInProgress();
-  const canToggle = useHasPermissions(
-    OwnCapability.START_CLOSED_CAPTIONS_CALL,
-    OwnCapability.STOP_CLOSED_CAPTIONS_CALL,
-  );
+  const canStart = useHasPermissions(OwnCapability.START_CLOSED_CAPTIONS_CALL);
+  const canStop = useHasPermissions(OwnCapability.STOP_CLOSED_CAPTIONS_CALL);
+  const canToggle = isCaptioned ? canStop : canStart;
+  const isClosedCaptionsEnabled =
+    settings?.transcription.closed_caption_mode !==
+    TranscriptionSettingsResponseClosedCaptionModeEnum.DISABLED;
+
+  if (!isClosedCaptionsEnabled || (!canStart && !canStop)) return null;
+
   return (
     <WithTooltip title={t('Toggle closed captions')}>
       <CompositeButton