tango-app-api-trax 3.9.39 → 3.9.40

package/src/utils/visitChecklistPdf.utils.js

@@ -146,6 +146,54 @@ function flattenImageRefs( arr ) {
       .filter( Boolean );
 }
 
+/**
+ * Builds the ordered media list (reference → uploaded → validation) for a SINGLE
+ * answer entry, deduped within that entry. Used to render each answer's images
+ * inline next to its own text/label, instead of pooling every answer's images
+ * into one question-level grid (which decoupled labels from their images).
+ * @param {Object} ua a single entry produced by buildQuestionAnswerEntries
+ * @return {Array} list of { type, label, url, detectionStatus } for this entry, in render order
+ */
+function buildEntryMediaItems( ua = {} ) {
+  const items = [];
+  const seen = new Set();
+
+  const push = ( type, label, url, detectionStatus = '' ) => {
+    if ( !url || typeof url !== 'string' ) return;
+    if ( seen.has( url ) ) return;
+    seen.add( url );
+    items.push( { type, label, url, detectionStatus } );
+  };
+
+  // Each uploaded/validation image shows its OWN runAI verdict (per-image, never
+  // aggregated). References are not AI-checked, so they carry no badge.
+  const statusByUrl = buildAnswerImageStatus( ua );
+  const statusFor = ( url ) => statusByUrl.get( url ) || '';
+
+  if ( ua.hasReferenceImage ) {
+    if ( Array.isArray( ua.multiReferenceImage ) && ua.multiReferenceImage.length ) {
+      ua.multiReferenceImage.forEach( ( url ) => push( 'reference', 'Reference Image', url ) );
+    } else if ( ua.referenceImage ) {
+      push( 'reference', 'Reference Image', ua.referenceImage );
+    }
+  }
+
+  if ( ua.answerType === 'image' && ua.answer ) {
+    push( 'uploaded', 'Uploaded Image', ua.answer, statusFor( ua.answer ) );
+  }
+
+  if ( ua.validation ) {
+    if ( ua.validationDisplayType === 'image' && ua.validationAnswer ) {
+      push( 'validation', 'Validation Image', ua.validationAnswer, statusFor( ua.validationAnswer ) );
+    }
+    if ( ua.validationDisplayType === 'multiImage' && Array.isArray( ua.validationImage ) ) {
+      ua.validationImage.forEach( ( url ) => push( 'validation', 'Validation Image', url, statusFor( url ) ) );
+    }
+  }
+
+  return items;
+}
+
 function buildQuestionAnswerEntries( question ) {
   const rawUserAnswers = getSourceUserAnswers( question );
   const uniqueUserAnswers = [];
@@ -180,21 +228,278 @@ function buildQuestionAnswerEntries( question ) {
       }
     }
     const validationImage = flattenImageRefs( userAnswer?.validationImage );
-
-    return {
+    // Videos captured alongside 'Capture Multiple Image with description' validation (no runAI; shown as links).
+    const validationVideo = flattenImageRefs( userAnswer?.validationVideo );
+
+    const referenceImage = userAnswer?.referenceImage || matchedAnswer?.referenceImage || '';
+    // Left column shows a reference image only for non-image/video, non-multipleImage answer types.
+    // When there is no reference image, uploaded/validation media is rendered on the left instead of the right.
+    const hasReferenceImage = question?.answerType !== 'image/video' &&
+      question?.answerType !== 'multipleImage' &&
+      Boolean( referenceImage || multiReferenceImage.length );
+
+    // runAI verdicts for this answer, in source order. Used to tag each uploaded /
+    // validation image with its OWN verdict (by answerImage filename, else by
+    // position) so multi-image answers don't all collapse to one aggregated status.
+    const isPerAnswerType = PER_ANSWER_DETECTION_TYPES.includes( question?.answerType );
+    const runAIValues = getRunAIMatchValues( userAnswer?.runAIData );
+    const imageStatus = buildImageStatusMap( userAnswer?.runAIData );
+
+    // Choice answers (yes/no, multiple choice, dropdown) take this answer's own
+    // verdict directly — never aggregated. Other types keep the aggregate only as
+    // a last-resort fallback.
+    const detectionStatus = isPerAnswerType ?
+      verdictFromValue( runAIValues[0] ) :
+      getDetectionStatus( userAnswer?.runAIData );
+
+    const entry = {
       answer: userAnswer?.answer || '',
       answerType: getMediaDisplayType( question?.answerType, userAnswer ),
-      referenceImage: userAnswer?.referenceImage || matchedAnswer?.referenceImage || '',
+      referenceImage,
+      hasReferenceImage,
       multiReferenceImage,
       remarks: userAnswer?.remarks || '',
       sopFlag: userAnswer?.sopFlag ?? matchedAnswer?.sopFlag ?? false,
+      detectionStatus,
+      imageStatus,
+      runAIValues,
       validation,
       validationType,
       validationAnswer,
       validationImage,
+      validationVideo,
       validationDisplayType: getValidationDisplayType( validationType ),
     };
+
+    // Text-label answers (e.g. "Attach the image of Cat") carry their own
+    // reference/validation images. Group those images with this entry so the
+    // label and its images render together, instead of pooling every answer's
+    // images into one question-level grid. Image/video answers keep flowing
+    // into the pooled grid (handled by buildQuestionMediaItems).
+    entry.answerMedia = entry.answerType === 'text' ? buildEntryMediaItems( entry ) : [];
+
+    // Choice answers with no media show their verdict next to the answer text;
+    // when they carry validation media the badge sits on that media instead.
+    entry.showDetectionStatus = isPerAnswerType && Boolean( detectionStatus ) && !entry.answerMedia.length;
+
+    return entry;
+  } );
+}
+
+
+/**
+ * Flattens a question's user answers into one ordered, deduped image list for the
+ * 2-per-row answer media grid. Order: reference images first, then uploaded images,
+ * then validation images. Videos are shown as links elsewhere, so only images are
+ * collected here. When a question has no reference image, the uploaded images simply
+ * fill the grid from the start (taking the reference slot).
+ * @param {Array} userAnswers entries produced by buildQuestionAnswerEntries
+ * @param {string} [forcedStatus] when set (image / image-video), every uploaded &
+ *   validation image shows this aggregated verdict instead of its own per-image one
+ * @return {Array} list of { type, label, url, detectionStatus } media items in render order
+ */
+function buildQuestionMediaItems( userAnswers = [], forcedStatus = '' ) {
+  const items = [];
+  const seen = new Set();
+
+  const push = ( type, label, url, detectionStatus = '' ) => {
+    if ( !url || typeof url !== 'string' ) return;
+    if ( seen.has( url ) ) return;
+    seen.add( url );
+    items.push( { type, label, url, detectionStatus } );
+  };
+
+  // Entries that render their media inline with the answer (answerMedia) are
+  // excluded here so their images are not duplicated in the pooled grid.
+  const pool = userAnswers.filter( ( ua ) => !( ua.answerMedia && ua.answerMedia.length ) );
+
+  // Resolve each image's status per answer (per-image; forcedStatus aggregates
+  // image / image-video). Built per answer so positional matching stays aligned.
+  const statusByUrl = new Map();
+  pool.forEach( ( ua ) => {
+    buildAnswerImageStatus( ua, forcedStatus ).forEach( ( status, url ) => statusByUrl.set( url, status ) );
+  } );
+  const statusFor = ( url ) => statusByUrl.get( url ) || '';
+
+  // 1. Reference images first (deduped, so a single shared reference shows once).
+  // Skipped for image/video & multipleImage upload questions (hasReferenceImage
+  // is false), which have no comparison reference — only uploaded answers.
+  pool.forEach( ( ua ) => {
+    if ( !ua.hasReferenceImage ) return;
+    if ( Array.isArray( ua.multiReferenceImage ) && ua.multiReferenceImage.length ) {
+      ua.multiReferenceImage.forEach( ( url ) => push( 'reference', 'Reference Image', url ) );
+    } else if ( ua.referenceImage ) {
+      push( 'reference', 'Reference Image', ua.referenceImage );
+    }
+  } );
+
+  // 2. Uploaded images — tagged with each image's own detection status (from runAIData).
+  pool.forEach( ( ua ) => {
+    if ( ua.answerType === 'image' && ua.answer ) {
+      push( 'uploaded', 'Uploaded Image', ua.answer, statusFor( ua.answer ) );
+    }
+  } );
+
+  // 3. Validation images (single 'Capture Image' and multi 'Capture Multiple Image').
+  pool.forEach( ( ua ) => {
+    if ( !ua.validation ) return;
+
+    if ( ua.validationDisplayType === 'image' && ua.validationAnswer ) {
+      push( 'validation', 'Validation Image', ua.validationAnswer, statusFor( ua.validationAnswer ) );
+    }
+
+    if ( ua.validationDisplayType === 'multiImage' && Array.isArray( ua.validationImage ) ) {
+      ua.validationImage.forEach( ( url ) => push( 'validation', 'Validation Image', url, statusFor( url ) ) );
+    }
+  } );
+
+  return items;
+}
+
+
+/**
+ * Extracts every 'Matched/Not Matched' value from a userAnswer's runAIData.
+ * Handles both shapes:
+ *  - [ { answerImage, results: [ { featureName, value } ] } ]  (per-image nested)
+ *  - [ { featureName, value } ]                                (flat)
+ * @param {Array} runAIData
+ * @return {string[]} list of 'True' / 'False' values (in source order)
+ */
+function getRunAIMatchValues( runAIData ) {
+  if ( !Array.isArray( runAIData ) ) return [];
+
+  const values = [];
+
+  runAIData.forEach( ( item ) => {
+    if ( Array.isArray( item?.results ) ) {
+      item.results.forEach( ( res ) => {
+        if ( res?.featureName === 'Matched/Not Matched' ) values.push( res.value );
+      } );
+    } else if ( item?.featureName === 'Matched/Not Matched' ) {
+      values.push( item.value );
+    }
+  } );
+
+  return values;
+}
+
+
+// Answer types whose runAI verdict is aggregated across all uploaded images:
+// if any image is not matched, the whole question reads 'Not Matched'. Every
+// other type shows each image's own verdict.
+const AGGREGATE_DETECTION_TYPES = [ 'image', 'image/video' ];
+
+// Choice answers: each selected answer carries its OWN runAI verdict and shows it
+// directly — never aggregated ('.every') across the question's other answers.
+const PER_ANSWER_DETECTION_TYPES = [ 'yes/no', 'multiplechoicesingle', 'multiplechoicemultiple', 'dropdown' ];
+
+
+/**
+ * Maps a single runAI value to a display status.
+ * @param {string|boolean} value
+ * @return {string} 'Matched' | 'Not Matched' | ''
+ */
+function verdictFromValue( value ) {
+  if ( value === 'True' || value === true ) return 'Matched';
+  if ( value === 'False' || value === false ) return 'Not Matched';
+  return '';
+}
+
+
+/**
+ * The filename of an image URL/path, ignoring any query string. Used to match an
+ * uploaded/validation image against its runAIData entry (whose answerImage may
+ * carry a different prefix / signed-URL query), regardless of CDN resolution.
+ * @param {string} url
+ * @return {string}
+ */
+function imageBasename( url ) {
+  return String( url || '' ).split( '?' )[0].split( '/' ).pop();
+}
+
+
+/**
+ * Builds a per-image detection status map from the nested runAIData shape
+ * ([ { answerImage, results: [ { featureName, value } ] } ]), keyed by the
+ * answerImage's filename. The flat shape has no per-image key, so it yields an
+ * empty map and callers fall back to the answer-level status.
+ * @param {Array} runAIData
+ * @return {Object} { [filename]: 'Matched' | 'Not Matched' }
+ */
+function buildImageStatusMap( runAIData ) {
+  const map = {};
+  if ( !Array.isArray( runAIData ) ) return map;
+
+  runAIData.forEach( ( item ) => {
+    if ( !item || !item.answerImage ) return;
+    const results = Array.isArray( item.results ) ? item.results : [ item ];
+    const values = results
+        .filter( ( r ) => r?.featureName === 'Matched/Not Matched' )
+        .map( ( r ) => r.value );
+    if ( !values.length ) return;
+    const matched = values.every( ( v ) => v === 'True' || v === true );
+    map[imageBasename( item.answerImage )] = matched ? 'Matched' : 'Not Matched';
   } );
+
+  return map;
+}
+
+
+/**
+ * Resolves the detection status for each checked image (uploaded + validation) of a
+ * single answer, returned as a Map of url → 'Matched' | 'Not Matched' | ''.
+ *
+ * Each image gets its OWN verdict — never aggregated across the answer's other images:
+ *   1. matched explicitly by its answerImage filename (nested runAIData), else
+ *   2. matched positionally — the Nth checked image takes the Nth runAI verdict
+ *      (works for the flat runAIData shape and when filenames don't line up).
+ * For image / image-video, forcedStatus (the question-level aggregate) overrides all.
+ * @param {Object} ua a single entry produced by buildQuestionAnswerEntries
+ * @param {string} [forcedStatus] aggregated status applied to every image (image/image-video)
+ * @return {Map<string,string>} url → status
+ */
+function buildAnswerImageStatus( ua = {}, forcedStatus = '' ) {
+  const statusByUrl = new Map();
+  const byName = ua.imageStatus || {};
+  const values = Array.isArray( ua.runAIValues ) ? ua.runAIValues : [];
+  let idx = 0;
+
+  const assign = ( url ) => {
+    if ( !url || typeof url !== 'string' || statusByUrl.has( url ) ) return;
+    let status = forcedStatus;
+    if ( !status ) {
+      const key = imageBasename( url );
+      status = ( key in byName ) ? byName[key] : verdictFromValue( values[idx] );
+      idx++;
+    }
+    statusByUrl.set( url, status );
+  };
+
+  if ( ua.answerType === 'image' && ua.answer ) assign( ua.answer );
+
+  if ( ua.validation ) {
+    if ( ua.validationDisplayType === 'image' && ua.validationAnswer ) assign( ua.validationAnswer );
+    if ( ua.validationDisplayType === 'multiImage' && Array.isArray( ua.validationImage ) ) {
+      ua.validationImage.forEach( assign );
+    }
+  }
+
+  return statusByUrl;
+}
+
+
+/**
+ * Resolves a 'Matched' / 'Not Matched' detection status from runAIData. Handles both
+ * runAIData shapes (per-image nested results, and flat). Any non-match verdict makes
+ * the whole status 'Not Matched'. Returns '' when there is no runAI verdict to report.
+ * @param {Array} runAIData
+ * @return {string} 'Matched' | 'Not Matched' | ''
+ */
+function getDetectionStatus( runAIData ) {
+  const values = getRunAIMatchValues( runAIData );
+  if ( !values.length ) return '';
+  const allMatched = values.every( ( v ) => v === 'True' || v === true );
+  return allMatched ? 'Matched' : 'Not Matched';
 }
 
 
@@ -219,6 +524,8 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
   const flags = [];
 
+  let hasSopFlag = false;
+
 
   ( questionAnswer || [] ).forEach( ( section, sectionIdx ) => {
     let sectionScore = 0;
@@ -240,6 +547,10 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
       const ua = userAnswersWithRef[0];
 
+      if ( !hasSopFlag && userAnswersWithRef.some( ( entry ) => entry.sopFlag === true ) ) {
+        hasSopFlag = true;
+      }
+
 
       const max = q.compliance ? Math.max( ...q?.answers.map( ( o ) => o?.complianceScore ?? Math.max( o?.matchedCount ?? 0, o?.notMatchedCount ?? 0 ) ) ) : 0;
 
@@ -247,14 +558,34 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
       let score = q.compliance ? Math.max( ...q?.userAnswer?.map( ( o ) => o?.complianceScore ?? 0 ) ) : 0;
 
 
-      if ( q.answerType == 'image' && q.compliance && q.userAnswer?.[0]?.runAIData ) {
-        let find = q.userAnswer?.[0]?.runAIData?.find( ( run ) => run?.featureName == 'Matched/Not Matched' );
-        if ( find ) {
-          if ( find?.value == 'True' ) {
-            score = q?.answers?.[0]?.matchedCount;
-          } else {
-            score = q?.answers?.[0]?.notMatchedCount;
-          }
+      if ( q.compliance && ( q.answerType === 'image' || q.answerType === 'image/video' ) ) {
+        // image/video questions mix image + video entries in userAnswer, so only score the images.
+        const imageAnswers = q.answerType === 'image/video' ?
+          ( q.userAnswer || [] ).filter( ( ua ) => ua?.answerType === 'image' ) :
+          ( q.userAnswer || [] );
+
+        const matchValues = imageAnswers.flatMap( ( ua ) => getRunAIMatchValues( ua?.runAIData ) );
+
+        if ( matchValues.length ) {
+          // All images must be matched ('True'); if any one is not, treat as not matched.
+          const allMatched = matchValues.every( ( value ) => value === 'True' );
+          score = allMatched ? ( q?.answers?.[0]?.matchedCount ?? 0 ) : ( q?.answers?.[0]?.notMatchedCount ?? 0 );
+        }
+      }
+
+
+      // image / image-video aggregate their runAI verdict across all uploaded images
+      // (any 'Not Matched' → whole question 'Not Matched'). Every other type keeps
+      // each image's own verdict, so this stays '' for them.
+      let aggregateDetectionStatus = '';
+      if ( AGGREGATE_DETECTION_TYPES.includes( q.answerType ) ) {
+        const aiAnswers = q.answerType === 'image/video' ?
+          ( q.userAnswer || [] ).filter( ( a ) => a?.answerType === 'image' ) :
+          ( q.userAnswer || [] );
+        const matchValues = aiAnswers.flatMap( ( a ) => getRunAIMatchValues( a?.runAIData ) );
+        if ( matchValues.length ) {
+          aggregateDetectionStatus = matchValues.every( ( v ) => v === 'True' || v === true ) ?
+            'Matched' : 'Not Matched';
         }
       }
 
@@ -316,6 +647,8 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
         answerDisplay: isYes ? 'Yes' : ( isNo ? 'No' : ( answerText && answerText.startsWith( 'http' ) ? 'Image' : ( answerText || '—' ) ) ),
 
+        mediaItems: buildQuestionMediaItems( userAnswersWithRef, aggregateDetectionStatus ),
+
         userAnswer: userAnswersWithRef.length ? userAnswersWithRef : [ {
           answer: '',
           answerType: 'text',
@@ -339,15 +672,15 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
 
       sectionName: section.sectionName || `Section ${sectionIdx + 1}`,
 
-      targetScore: sectionMax,
+      targetScore: sectionMax ? sectionMax : '--',
 
-      actualScore: sectionScore,
+      actualScore: sectionMax ? sectionScore : '--',
 
       questionsCount,
 
       passedCount,
 
-      percentage: sectionMax > 0 ? Math.round( ( sectionScore / sectionMax ) * 100 ) : 0,
+      percentage: sectionMax > 0 ? Math.round( ( sectionScore / sectionMax ) * 100 ) : '--',
 
     } );
 
@@ -373,7 +706,7 @@ function mapSectionsFromQuestionAnswer( questionAnswer ) {
   const numQuestions = questionAnswer.reduce( ( sum, s ) => sum + ( s.questions?.length || 0 ), 0 );
 
 
-  return { totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions };
+  return { totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions, hasSopFlag };
 }
 
 
@@ -395,7 +728,7 @@ export function buildVisitChecklistTemplateDataFromProcessed( processedDoc, bran
 
   const {
 
-    totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions,
+    totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions, hasSopFlag,
 
   } = mapSectionsFromQuestionAnswer( questionAnswer );
 
@@ -481,6 +814,9 @@ export function buildVisitChecklistTemplateDataFromProcessed( processedDoc, bran
 
   let referenceId = doc.coverage == 'store' ? doc?.storeName : doc?.userName;
 
+  const userImage = doc.userImage || '';
+  const userSignature = doc.userSignature || '';
+
   return {
 
 
@@ -506,12 +842,22 @@ export function buildVisitChecklistTemplateDataFromProcessed( processedDoc, bran
 
     numFlags: typeof doc.questionFlag === 'number' ? doc.questionFlag : flags.length,
 
-    aiBreached: typeof doc.runAIFlag === 'number' ? doc.runAIFlag : 0,
+    showFlags: hasSopFlag,
+
+    runAIFlag: typeof doc.runAIFlag === 'number' ? doc.runAIFlag : 0,
+
+    showRunAIFlag: ( typeof doc.runAIQuestionCount === 'number' ? doc.runAIQuestionCount : 0 ) > 0,
 
     submittedBy: doc.userName || '--',
 
     country: doc.country || '--',
 
+    userImage,
+
+    userSignature,
+
+    showUserVerification: Boolean( userImage || userSignature ),
+
     hasCompliancePage,
 
     detailPageStart,
@@ -567,7 +913,7 @@ function buildFromViewChecklistApi( getchecklistData, viewchecklistData, brandIn
 
   const {
 
-    totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions,
+    totalScore, maxScore, sectionInsights, questionAnswers, flags, numQuestions, hasSopFlag,
 
   } = mapSectionsFromQuestionAnswer( questionAnswer );
 
@@ -622,6 +968,9 @@ function buildFromViewChecklistApi( getchecklistData, viewchecklistData, brandIn
     } );
   }
 
+  const userImage = checklistAnswer?.userImage || checklistInfo?.userImage || '';
+  const userSignature = checklistAnswer?.userSignature || checklistInfo?.userSignature || '';
+
   return {
 
     brandLogo: brandInfo.brandLogo || '',
@@ -650,12 +999,22 @@ function buildFromViewChecklistApi( getchecklistData, viewchecklistData, brandIn
 
     numFlags: checklistAnswer?.flagCount ?? flags.length,
 
-    aiBreached: checklistAnswer?.aiBreachedCount ?? 0,
+    showFlags: hasSopFlag,
+
+    runAIFlag: checklistAnswer?.runAIFlag ?? checklistInfo?.runAIFlag ?? checklistAnswer?.aiBreachedCount ?? 0,
+
+    showRunAIFlag: ( checklistInfo?.runAIQuestionCount ?? checklistAnswer?.runAIQuestionCount ?? 0 ) > 0,
 
     submittedBy: checklistInfo?.submittedBy || storeProfile?.userName || '--',
 
     country: storeProfile?.Country || '--',
 
+    userImage,
+
+    userSignature,
+
+    showUserVerification: Boolean( userImage || userSignature ),
+
     hasCompliancePage,
 
     detailPageStart,
@@ -782,6 +1141,11 @@ export function createImageCache() {
     }
 
 
+    if ( resolvedData.userImage && resolvedData.userImage.startsWith( 'http' ) ) {
+      urls.add( resolvedData.userImage );
+    }
+
+
     const collectFromSection = ( section ) => {
       section.questions?.forEach( ( q ) => {
         if ( q.questionReferenceImage && q.questionReferenceImage.startsWith( 'http' ) ) urls.add( q.questionReferenceImage );
@@ -805,6 +1169,14 @@ export function createImageCache() {
               if ( typeof u === 'string' && u.startsWith( 'http' ) ) urls.add( u );
             } );
           }
+
+          ua.answerMedia?.forEach( ( m ) => {
+            if ( typeof m.url === 'string' && m.url.startsWith( 'http' ) ) urls.add( m.url );
+          } );
+        } );
+
+        q.mediaItems?.forEach( ( m ) => {
+          if ( typeof m.url === 'string' && m.url.startsWith( 'http' ) ) urls.add( m.url );
         } );
       } );
     };
@@ -842,6 +1214,11 @@ export function createImageCache() {
     }
 
 
+    if ( resolvedData.userImage ) {
+      resolvedData.userImage = cache.get( resolvedData.userImage ) || resolvedData.userImage;
+    }
+
+
     const replaceInSection = ( section ) => {
       section.questions?.forEach( ( q ) => {
         if ( q.questionReferenceImage && cache.has( q.questionReferenceImage ) ) q.questionReferenceImage = cache.get( q.questionReferenceImage );
@@ -863,7 +1240,19 @@ export function createImageCache() {
           if ( ua.validationDisplayType === 'multiImage' && ua.validationImage?.length ) {
             ua.validationImage = ua.validationImage.map( ( u ) => ( cache.has( u ) ? cache.get( u ) : u ) );
           }
+
+          if ( ua.answerMedia?.length ) {
+            ua.answerMedia.forEach( ( m ) => {
+              if ( cache.has( m.url ) ) m.url = cache.get( m.url );
+            } );
+          }
         } );
+
+        if ( q.mediaItems?.length ) {
+          q.mediaItems.forEach( ( m ) => {
+            if ( cache.has( m.url ) ) m.url = cache.get( m.url );
+          } );
+        }
       } );
     };
 
@@ -936,11 +1325,27 @@ export function resolveTemplateUrls( templateData, baseUrl = 'https://d1r0hc2ssk
           ua.validationImage = ua.validationImage.map( ( ele ) => resolveUrl( ele ) );
         }
 
+        if ( ua?.validationVideo?.length ) {
+          ua.validationVideo = ua.validationVideo.map( ( ele ) => resolveUrl( ele ) );
+        }
+
 
         if ( ua.answer && ua.answerType !== 'text' ) {
           ua.answer = resolveUrl( ua.answer );
         }
+
+        if ( ua.answerMedia?.length ) {
+          ua.answerMedia.forEach( ( m ) => {
+            m.url = resolveUrl( m.url );
+          } );
+        }
       } );
+
+      if ( q.mediaItems?.length ) {
+        q.mediaItems.forEach( ( m ) => {
+          m.url = resolveUrl( m.url );
+        } );
+      }
     } );
   };
 
@@ -954,11 +1359,14 @@ export function resolveTemplateUrls( templateData, baseUrl = 'https://d1r0hc2ssk
 
   resolvedData.sections?.forEach( resolveQuestionMedia );
 
-
-  if ( resolvedData.brandLogo && !resolvedData.brandLogo.startsWith( 'http' ) ) {
+  if ( resolvedData?.brandLogo && !resolvedData?.brandLogo?.startsWith( 'http' ) ) {
     resolvedData.brandLogo = resolveUrl( resolvedData.brandLogo );
   }
 
+  if ( resolvedData?.userImage && !resolvedData.userImage.startsWith( 'http' ) && !resolvedData.userImage.startsWith( 'data:' ) ) {
+    resolvedData.userImage = resolveUrl( resolvedData.userImage );
+  }
+
 
   return resolvedData;
 }
@@ -1070,10 +1478,26 @@ export async function generateVisitChecklistPDF( templateData, baseUrl = 'https:
           ua.validationImage = ua.validationImage.map( ( ele ) => resolveUrl( ele ) );
         }
 
+        if ( ua.validationVideo?.length ) {
+          ua.validationVideo = ua.validationVideo.map( ( ele ) => resolveUrl( ele ) );
+        }
+
         if ( ua.answer && ua.answerType !== 'text' ) {
           ua.answer = resolveUrl( ua.answer );
         }
+
+        if ( ua.answerMedia?.length ) {
+          ua.answerMedia.forEach( ( m ) => {
+            m.url = resolveUrl( m.url );
+          } );
+        }
       } );
+
+      if ( q.mediaItems?.length ) {
+        q.mediaItems.forEach( ( m ) => {
+          m.url = resolveUrl( m.url );
+        } );
+      }
     } );
   };
 
@@ -1087,6 +1511,10 @@ export async function generateVisitChecklistPDF( templateData, baseUrl = 'https:
     resolvedData.brandLogo = resolveUrl( resolvedData.brandLogo );
   }
 
+  if ( resolvedData.userImage && !resolvedData.userImage.startsWith( 'http' ) && !resolvedData.userImage.startsWith( 'data:' ) ) {
+    resolvedData.userImage = resolveUrl( resolvedData.userImage );
+  }
+
 
   const html = template( resolvedData );