feat(bulkProcessing): near limit alert DEV-1399

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

@@ -43,6 +43,12 @@ function getAlreadyTranscribedMessage(count: number, duration: string): string {
     .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
@@ -113,18 +119,40 @@ 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 requiredSeconds =
+    isTotalSelectedAudioDurationLoading || isTotalSelectedAudioDurationError ? undefined : totalSelectedAudioDuration
+
   const { activeAlerts, hasErrors, hasBlockingError, eligibleSubmissions } = useBulkProcessingAlerts({
     actionType: 'transcript',
     selectedSubmissions: props.selectedSubmissions,
     selectedLanguage: selectedLanguage || undefined,
     selectedRegion: selectedRegion || undefined,
     fieldXpath: props.fieldXpath,
+    requiredAmount: requiredSeconds,
     serviceUsageData: serviceUsageData || undefined,
     activeBulkActions: props.activeBulkActions,
   })
 
-  const { sourceRowPath } = getSupplementalPathParts(props.fieldXpath)
-
   const eligibleSubmissionUuids = eligibleSubmissions.map((s) => s._uuid)
 
   const alreadyTranscribedSubmissionUuids = useMemo(
@@ -240,7 +268,6 @@ export function BulkTranscriptionModal(props: BulkTranscriptionModalProps) {
 
       {!showWarningModal && (
         <Stack gap='md'>
-          {/* Legacy alert - will be removed once audio duration evaluators are implemented see DEV-1399 */}
           {isAudioDurationError && audioDurationErrorMesssage && (
             <Alert type='warning' iconName='information'>
               {audioDurationErrorMesssage}
@@ -280,13 +307,6 @@ export function BulkTranscriptionModal(props: BulkTranscriptionModalProps) {
 
           <BulkProcessingAlerts activeAlerts={activeAlertsWithResolvedMinutes} />
 
-          {/* Legacy alert - will be removed once evaluators are implemented */}
-          {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>
-          )}
-
           <Text size='xs'>
             {t('Automatic transcription is provided by Google Cloud Platform.')}
             &nbsp;

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'
@@ -16,7 +16,6 @@ import {
   useOrganizationsServiceUsageRetrieve,
 } from '#/api/react-query/user-team-organization-usage'
 import ButtonNew from '#/components/common/ButtonNew'
-import Alert from '#/components/common/alert'
 import LanguageSelector from '#/components/languages/LanguageSelector'
 import type { LanguageCode } from '#/components/languages/languagesStore'
 import { getSuggestedLanguages } from '#/components/processing/common/utils'
@@ -102,12 +101,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 requiredCharacters = 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,
+    requiredAmount: requiredCharacters,
     serviceUsageData: serviceUsageData || undefined,
     activeBulkActions: props.activeBulkActions,
   })
@@ -123,10 +147,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({
@@ -185,13 +205,6 @@ export function BulkTranslationModal(props: BulkTranslationModalProps) {
 
           <BulkProcessingAlerts activeAlerts={activeAlerts} />
 
-          {/* Legacy alert - will be removed once evaluators are implemented */}
-          {hasExceededLimit && activeAlerts.length === 0 && (
-            <Alert type='warning' iconName='information' mt={12} mb={12}>
-              {t("You've reached your automatic translation limit. Please purchase an add‑on to continue.")}
-            </Alert>
-          )}
-
           <Text size='xs'>
             {t('Automatic translation is provided by Google Cloud Platform.')}
             &nbsp;

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

@@ -41,7 +41,7 @@ function createMockAlert(
 
 // Mock alerts
 const mockErrorAlert = createMockAlert('reached-limit', {})
-const mockNearLimitAlert = createMockAlert('near-limit', { remainingMinutes: 5 })
+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', {})

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

@@ -36,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))