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,12 @@ 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)
+}
+
 export interface BulkTranscriptionModalProps {
   fieldXpath: string
   assetUid: string
@@ -102,18 +109,47 @@ export function BulkTranscriptionModal(props: BulkTranscriptionModalProps) {
   const advancedFeatures = advancedFeaturesData?.status === 200 ? advancedFeaturesData.data : []
   const suggestedLanguages = getSuggestedLanguages(advancedFeatures)
 
+  const { sourceRowPath } = getSupplementalPathParts(props.fieldXpath)
+
+  const {
+    duration: totalSelectedAudioDuration,
+    isLoading: isTotalSelectedAudioDurationLoading,
+    isError: isTotalSelectedAudioDurationError,
+  } = useCalculateAudioDuration({
+    selectedSubmissions: props.selectedSubmissions,
+    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 +159,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 +219,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 +288,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

@@ -103,11 +103,17 @@ export function BulkTranslationModal(props: BulkTranslationModalProps) {
   const suggestedLanguages = getSuggestedLanguages(advancedFeatures)
 
   // Use bulk processing alerts hook
+  const nearLimitRequiredCharacters = props.selectedSubmissions.reduce((sum, sub) => {
+    const supplementalValue = getSupplementalDetailsContent(sub, props.fieldXpath) || ''
+    return sum + supplementalValue.length
+  }, 0)
+
   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,
   })

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

@@ -42,7 +42,7 @@ 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 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,
@@ -69,9 +70,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)),