feat(bulkProcessing): near limit alert DEV-1399

jsapp/js/components/submissions/BulkProcessingModals/BulkTranscriptionModal/BulkTranscriptionModal.tsx

@@ -1,6 +1,6 @@
 import { Anchor, Group, Stack, Text } from '@mantine/core'
 import { useQueryClient } from '@tanstack/react-query'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ACCOUNT_ROUTES } from '#/account/routes.constants'
 import type { ServerError } from '#/api/ServerError'
@@ -18,6 +18,7 @@ import {
 import Alert from '#/components/common/alert'
 import RegionSelector from '#/components/languages/RegionSelector'
 import { getSuggestedLanguages } from '#/components/processing/common/utils'
+import { getSupplementalPathParts } from '#/components/processing/processingUtils'
 import type { SubmissionResponse } from '#/dataInterface'
 import envStore from '#/envStore'
 import { useCalculateAudioDuration } from '#/hooks/useCalculateAudioDuration.hook'
@@ -32,6 +33,18 @@ import { useBulkProcessingAlerts } from '../alerts/useBulkProcessingAlerts'
 
 const GOOGLE_TRANSCRIPTION_LANGUAGE_SUPPORT_URL = 'transcription-translation.html#language-list'
 
+function getAlreadyTranscribedMessage(count: number, duration: string): string {
+  return t('##count## audio files totaling ##duration## already transcribed and will be ignored')
+    .replace('##count##', String(count))
+    .replace('##duration##', duration)
+}
+
+function isAlreadyTranscribedSubmission(submission: SubmissionResponse, sourceRowPath: string): boolean {
+  const transcript = submission._supplementalDetails?.[sourceRowPath]?.transcript
+
+  return Boolean(transcript?.value || transcript?.pendingReview)
+}
+
 export interface BulkTranscriptionModalProps {
   fieldXpath: string
   assetUid: string
@@ -102,18 +115,55 @@ export function BulkTranscriptionModal(props: BulkTranscriptionModalProps) {
   const advancedFeatures = advancedFeaturesData?.status === 200 ? advancedFeaturesData.data : []
   const suggestedLanguages = getSuggestedLanguages(advancedFeatures)
 
+  const { sourceRowPath } = getSupplementalPathParts(props.fieldXpath)
+
+  // Keep the quota estimate aligned with the rows that will actually be sent.
+  // The alert hook filters already-transcribed submissions later, so we mirror
+  // that exclusion here instead of counting every selected row up front.
+  const transcribableSubmissions = useMemo(
+    () => props.selectedSubmissions.filter((submission) => !isAlreadyTranscribedSubmission(submission, sourceRowPath)),
+    [props.selectedSubmissions, sourceRowPath],
+  )
+
+  const {
+    duration: totalSelectedAudioDuration,
+    isLoading: isTotalSelectedAudioDurationLoading,
+    isError: isTotalSelectedAudioDurationError,
+  } = useCalculateAudioDuration({
+    selectedSubmissions: transcribableSubmissions,
+    fieldId: sourceRowPath,
+    assetUid: props.assetUid,
+  })
+
+  const nearLimitRequiredSeconds =
+    isTotalSelectedAudioDurationLoading || isTotalSelectedAudioDurationError ? undefined : totalSelectedAudioDuration
+
   const { activeAlerts, hasErrors, hasBlockingError, eligibleSubmissions } = useBulkProcessingAlerts({
     actionType: 'transcript',
     selectedSubmissions: props.selectedSubmissions,
     selectedLanguage: selectedLanguage || undefined,
     selectedRegion: selectedRegion || undefined,
     fieldXpath: props.fieldXpath,
+    nearLimitRequiredAmount: nearLimitRequiredSeconds,
     serviceUsageData: serviceUsageData || undefined,
     activeBulkActions: props.activeBulkActions,
   })
 
   const eligibleSubmissionUuids = eligibleSubmissions.map((s) => s._uuid)
 
+  const alreadyTranscribedSubmissionUuids = useMemo(
+    () => activeAlerts.find((alert) => alert.id === 'already-transcribed')?.filteredSubmissionUuids ?? [],
+    [activeAlerts],
+  )
+
+  const alreadyTranscribedSubmissions = useMemo(() => {
+    if (alreadyTranscribedSubmissionUuids.length === 0) {
+      return []
+    }
+    const uuids = new Set(alreadyTranscribedSubmissionUuids)
+    return props.selectedSubmissions.filter((submission) => uuids.has(submission._uuid))
+  }, [alreadyTranscribedSubmissionUuids, props.selectedSubmissions])
+
   const {
     duration: audioDuration,
     isLoading: isAudioDurationLoading,
@@ -123,10 +173,50 @@ export function BulkTranscriptionModal(props: BulkTranscriptionModalProps) {
     errorMessage: audioDurationErrorMesssage,
   } = useCalculateAudioDuration({
     selectedSubmissions: eligibleSubmissions,
-    fieldId: props.fieldXpath,
+    fieldId: sourceRowPath,
     assetUid: props.assetUid,
   })
 
+  const {
+    duration: alreadyTranscribedDuration,
+    isLoading: isAlreadyTranscribedDurationLoading,
+    isError: isAlreadyTranscribedDurationError,
+  } = useCalculateAudioDuration({
+    selectedSubmissions: alreadyTranscribedSubmissions,
+    fieldId: sourceRowPath,
+    assetUid: props.assetUid,
+  })
+
+  // Keep useBulkProcessingAlerts generic, then enrich just the transcription-specific
+  // "already transcribed" warning with duration text calculated in this modal.
+  // All other alerts are rendered exactly as returned by the hook.
+  const activeAlertsWithResolvedMinutes = useMemo(() => {
+    const duration =
+      isAlreadyTranscribedDurationLoading || isAlreadyTranscribedDurationError
+        ? '…'
+        : formatTimeFromSeconds(alreadyTranscribedDuration)
+
+    return activeAlerts.map((alert) => {
+      if (alert.id !== 'already-transcribed') {
+        return alert
+      }
+
+      const computedValues = {
+        ...alert.computedValues,
+        duration,
+      }
+
+      return {
+        ...alert,
+        computedValues,
+        message: getAlreadyTranscribedMessage(
+          Number(alert.computedValues.count ?? 0),
+          String(computedValues.duration ?? 0),
+        ),
+      }
+    })
+  }, [activeAlerts, alreadyTranscribedDuration, isAlreadyTranscribedDurationError, isAlreadyTranscribedDurationLoading])
+
   const handleLanguageChange = (language: LanguageCode | null) => {
     setSelectedLanguage(language)
     setSelectedRegion(null)
@@ -143,7 +233,7 @@ export function BulkTranscriptionModal(props: BulkTranscriptionModalProps) {
       uidAsset: props.assetUid,
       data: {
         action_id: ActionIdEnum.automatic_google_transcription,
-        question_xpath: props.fieldXpath,
+        question_xpath: sourceRowPath,
         submission_uuids: eligibleSubmissionUuids,
         params: {
           language: selectedLanguage!,
@@ -212,10 +302,10 @@ export function BulkTranscriptionModal(props: BulkTranscriptionModalProps) {
             />
           </Group>
 
-          <BulkProcessingAlerts activeAlerts={activeAlerts} />
+          <BulkProcessingAlerts activeAlerts={activeAlertsWithResolvedMinutes} />
 
           {/* Legacy alert - will be removed once evaluators are implemented */}
-          {hasExceededLimit && activeAlerts.length === 0 && (
+          {hasExceededLimit && activeAlertsWithResolvedMinutes.length === 0 && (
             <Alert type='warning' iconName='information' mt={12} mb={12}>
               {t("You've reached your automatic transcription limit. Please purchase an add‑on to continue.")}
             </Alert>

jsapp/js/components/submissions/BulkProcessingModals/BulkTranslationModal/BulkTranslationModal.tsx

@@ -1,6 +1,6 @@
 import { Anchor, Group, Stack, Text } from '@mantine/core'
 import { useQueryClient } from '@tanstack/react-query'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { ACCOUNT_ROUTES } from '#/account/routes.constants'
 import type { ServerError } from '#/api/ServerError'
@@ -102,12 +102,37 @@ export function BulkTranslationModal(props: BulkTranslationModalProps) {
   const advancedFeatures = advancedFeaturesData?.status === 200 ? advancedFeaturesData.data : []
   const suggestedLanguages = getSuggestedLanguages(advancedFeatures)
 
+  const { sourceRowPath } = getSupplementalPathParts(props.fieldXpath)
+
   // Use bulk processing alerts hook
+  // Near-limit should reflect only the submissions that still need translation.
+  // Rows that already have a translation in the selected language will be filtered
+  // out by the alert pipeline, so we exclude them here as well to keep the limit check aligned.
+  const nearLimitRequiredCharacters = useMemo(() => {
+    if (!selectedLanguage) {
+      return undefined
+    }
+
+    return props.selectedSubmissions.reduce((sum, sub) => {
+      const supplementalDetails = sub._supplementalDetails?.[sourceRowPath]
+      const translation = supplementalDetails?.translation?.[selectedLanguage]
+
+      if (translation?.value) {
+        // This row is already translated in the chosen language and won't consume MT quota.
+        return sum
+      }
+
+      const supplementalValue = getSupplementalDetailsContent(sub, props.fieldXpath) || ''
+      return sum + supplementalValue.length
+    }, 0)
+  }, [props.selectedSubmissions, props.fieldXpath, selectedLanguage, sourceRowPath])
+
   const { activeAlerts, hasErrors, hasBlockingError, eligibleSubmissions } = useBulkProcessingAlerts({
     actionType: 'translation',
     selectedSubmissions: props.selectedSubmissions,
     selectedLanguage: selectedLanguage || undefined,
     fieldXpath: props.fieldXpath,
+    nearLimitRequiredAmount: nearLimitRequiredCharacters,
     serviceUsageData: serviceUsageData || undefined,
     activeBulkActions: props.activeBulkActions,
   })
@@ -123,10 +148,6 @@ export function BulkTranslationModal(props: BulkTranslationModalProps) {
   const eligibleSubmissionUuids = eligibleSubmissions.map((submission) => submission._uuid)
 
   const handleStartTranslation = () => {
-    // Extract the source row path from the transcript column path
-    // e.g., "_supplementalDetails/q1/transcript_en" -> "q1"
-    const { sourceRowPath } = getSupplementalPathParts(props.fieldXpath)
-
     // Use eligibleSubmissionUuids from the alerts hook to filter out submissions
     // that have been flagged by warning evaluators (e.g., already translated, no source)
     createBulkTranslation({

jsapp/js/components/submissions/BulkProcessingModals/alerts/BulkProcessingAlerts.stories.tsx

@@ -41,8 +41,8 @@ function createMockAlert(
 
 // Mock alerts
 const mockErrorAlert = createMockAlert('reached-limit', {})
-const mockNearLimitAlert = createMockAlert('near-limit', { remainingMinutes: 5 })
-const mockWarningAlreadyTranscribed = createMockAlert('already-transcribed', { count: 3, minutes: 15 })
+const mockNearLimitAlert = createMockAlert('near-limit', { remainingSeconds: 5 })
+const mockWarningAlreadyTranscribed = createMockAlert('already-transcribed', { count: 3, duration: '15 minutes' })
 const mockWarningNoSource = createMockAlert('no-source', { count: 2 })
 const mockWarningConflicting = createMockAlert('conflicting-job', {})
 const mockErrorNoEligible = createMockAlert('no-eligible-submissions', { totalCount: 5, filteredCount: 5 })

jsapp/js/components/submissions/BulkProcessingModals/alerts/alertDefinitions.ts

@@ -1,3 +1,4 @@
+import { formatTimeFromSeconds } from '#/utils'
 import {
   evaluateAlreadyTranscribed,
   evaluateAlreadyTranslated,
@@ -35,11 +36,13 @@ export function getAlertDefinitions(actionType: BulkActionType): AlertDefinition
       type: 'error',
       evaluator: evaluateNearLimit,
       messageTemplate: (values) => {
-        const remaining = isTranscription ? (values.remainingMinutes ?? '0') : (values.remainingCharacters ?? '0')
+        const remaining = isTranscription
+          ? formatTimeFromSeconds(Number(values.remainingSeconds ?? 0))
+          : (values.remainingCharacters ?? '0')
         return isTranscription
           ? t(
-              '##remainingMinutes## minutes of automated transcription left, that is not enough to process all selected submissions. Please select fewer files, purchase an add-on, or upgrade your plan.',
-            ).replace('##remainingMinutes##', String(remaining))
+              '##remainingDuration## of automated transcription left, that is not enough to process all selected submissions. Please select fewer files, purchase an add-on, or upgrade your plan.',
+            ).replace('##remainingDuration##', String(remaining))
           : t(
               '##remainingCharacters## characters of automated translation left, that is not enough to process all selected submissions. Please select fewer files, purchase an add-on, or upgrade your plan.',
             ).replace('##remainingCharacters##', String(remaining))
@@ -69,9 +72,9 @@ export function getAlertDefinitions(actionType: BulkActionType): AlertDefinition
       evaluator: isTranscription ? evaluateAlreadyTranscribed : evaluateAlreadyTranslated,
       messageTemplate: (values) =>
         isTranscription
-          ? t('##count## audio files totaling ##minutes## minutes already transcribed and will be ignored')
+          ? t('##count## audio files totaling ##duration## already transcribed and will be ignored')
               .replace('##count##', String(values.count ?? 0))
-              .replace('##minutes##', String(values.minutes ?? 0))
+              .replace('##duration##', String(values.duration ?? formatTimeFromSeconds(0)))
           : t('##count## transcripts totaling ##characters## characters already translated and will be ignored')
               .replace('##count##', String(values.count ?? 0))
               .replace('##characters##', String(values.characters ?? 0)),