@capillarytech/creatives-library 9.1.1 → 9.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "9.1.1",
+  "version": "9.1.2",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

package/utils/cdnTransformation.js

@@ -34,15 +34,20 @@ const HTTPS_STR = "https://"
 const ALLOWED_EXTENSIONS_STR = ".*(?:jpg|png|jpeg|gif)$"
 const ANY_STR = ".*"
 
+/**
+ * Floor and ceiling for the EMAIL quality (config value and size-based override alike). The value itself comes from CDN_IMG_QUALITY_CFG.EMAIL.
+ */
+export const EMAIL_MIN_QUALITY = 80;
+export const EMAIL_MAX_QUALITY = 100;
+
 /**
  * CHANNEL_CONFIGS maintains the transformation details for each channel (and optionally subchannel ex. FACEBOOK/LINE)
  * In case of SUBCHANNELS, they are nested inside CHANNEL.
+ * EMAIL has no width/height: images keep their uploaded resolution (resizing to the <img> attributes looked pixelated on retina screens).
  */
 const CHANNEL_CONFIGS = {
   EMAIL: {
     transformations: {
-      width: SPECIFIED,
-      height: SPECIFIED,
       format: FORMAT_TYPES.AUTO,
       quality: QUALITY_TYPE.DECREASE,
     },
@@ -137,10 +142,19 @@ const getClusterSpecificS3CdnConfigFromUrl = (url) => {
 }
 
 /**
- * 
- * @param {string} url : required 
- * @param {number} height : optional | required when height needs to be manually specified for channels such as email.
- * @param {number} width : optional | required when width needs to be manually specified for channels such as email.
+ * Clamps an email image quality into [EMAIL_MIN_QUALITY, EMAIL_MAX_QUALITY].
+ * Non-numeric input is returned as-is so the caller's existing fallbacks still apply.
+ */
+export const clampEmailQuality = (quality) => {
+  if (!isNumber(quality) || Number.isNaN(quality)) return quality;
+  return Math.min(EMAIL_MAX_QUALITY, Math.max(EMAIL_MIN_QUALITY, quality));
+};
+
+/**
+ *
+ * @param {string} url : required
+ * @param {number} height : optional | used only by channels whose CHANNEL_CONFIGS has height: SPECIFIED. Ignored for EMAIL (never resized).
+ * @param {number} width : optional | used only by channels whose CHANNEL_CONFIGS has width: SPECIFIED. Ignored for EMAIL (never resized).
  * @param {string} channelName : required 
  * @param {string} channelSubType : optional | required when channel has multiple subtypes
  * 
@@ -194,7 +208,15 @@ export const getCdnUrl = ({
     //remove all leading and trailing forward slash with empty string, if leading/trailing forward slash is present in node env by mistake then url will not be correct hence removing them.
     CREATIVES_S3_BUCKET_PATH = CREATIVES_S3_BUCKET_PATH?.replace(/^\/|\/$/g, '');
 
-    const QUALITY = CREATIVES_CDN_QUALITY_CONFIG?.[channelName] || CREATIVES_CDN_QUALITY_CONFIG?.DEFAULT;
+    const isEmail = channelName === EMAIL;
+    let QUALITY = CREATIVES_CDN_QUALITY_CONFIG?.[channelName] || CREATIVES_CDN_QUALITY_CONFIG?.DEFAULT;
+    let overrideQuality = emailOverrideQuality;
+    //Email only: never go below EMAIL_MIN_QUALITY, whichever source the quality came from.
+    if (isEmail) {
+      QUALITY = clampEmailQuality(QUALITY);
+      overrideQuality = clampEmailQuality(overrideQuality);
+    }
+    //assetKey is everything after the bucket path, so an already transformed cdn url is rebuilt from scratch (old options dropped).
     const [_, assetKey] = url.split(CREATIVES_S3_BUCKET_PATH);
   
     const regexWithExtension = new RegExp(HTTPS_STR + ANY_STR + CREATIVES_S3_BUCKET_PATH + ANY_STR + ALLOWED_EXTENSIONS_STR)
@@ -255,10 +277,10 @@ export const getCdnUrl = ({
             case "quality":
               if (transformationParamVal === QUALITY_TYPE?.DECREASE && QUALITY && typeof QUALITY === "number") {
                 if (
-                  emailOverrideQuality &&
-                  typeof emailOverrideQuality === "number"
+                  overrideQuality &&
+                  typeof overrideQuality === "number"
                 ) {
-                  cdnUrl += `${transformationParam}=${emailOverrideQuality},`;
+                  cdnUrl += `${transformationParam}=${overrideQuality},`;
                 } else {
                   cdnUrl += `${transformationParam}=${QUALITY},`;
                 }
@@ -343,20 +365,40 @@ export const updateImagesInHtml = async (htmlContents) => {
  * @param {*} contents
  * @returns
  * Transforms the email template's html by images replacing the s3 url / cdn url with cdn url.
+ * Covers versions.base and every versions.history entry for every selected language (the api uploads history[0] per language),
+ * transforming each language node once even when base and history[0] are the same object.
  */
 export function transformEmailTemplates(contents){
   const contentsCopy = cloneDeep(contents);
   try {
     const base = contentsCopy?.versions?.base;
+    const history = contentsCopy?.versions?.history;
     const languages = base?.selectedLanguages;
+    const versionNodes = [base].concat(Array.isArray(history) ? history : []).filter(Boolean);
+    const transformedLangNodes = new Set();
+    const resultByHtml = new Map(); //identical html in base and history is transformed once (one file-size lookup)
     let promises = [];
-    languages?.forEach((lang) => {
-      const htmlContents = base?.[lang]?.["template-content"];
-      promises.push(
-        updateImagesInHtml(htmlContents).then(newHtmlContents=>{
-          base[lang]["template-content"] = newHtmlContents;
-        })
-      )
+    versionNodes.forEach((versionNode) => {
+      const nodeLanguages = versionNode?.selectedLanguages || languages;
+      nodeLanguages?.forEach((lang) => {
+        const langNode = versionNode?.[lang];
+        if (!langNode || typeof langNode !== "object") {
+          //malformed input (listed language without a node): caller returns the contents untouched, as before.
+          throw new Error("transformEmailTemplates: missing language node " + lang);
+        }
+        if (transformedLangNodes.has(langNode)) return;
+        transformedLangNodes.add(langNode);
+        const htmlContents = langNode?.["template-content"];
+        if (typeof htmlContents !== "string") return;
+        if (!resultByHtml.has(htmlContents)) {
+          resultByHtml.set(htmlContents, updateImagesInHtml(htmlContents));
+        }
+        promises.push(
+          resultByHtml.get(htmlContents).then(newHtmlContents=>{
+            langNode["template-content"] = newHtmlContents;
+          })
+        )
+      });
     });
     return Promise.all(promises).then(_=>contentsCopy).catch(e=>{
       Bugsnag.leaveBreadcrumb(
@@ -648,9 +690,10 @@ export function checkValidUrl(url){
 }
 
 /**
- * 
+ *
  * @param {string} url | Accepts cdn url
  * @returns quality param value by extracting it from the url
+ * No longer used by the email flow (an old cdn url's quality must not survive a re-save); kept exported for backward compatibility.
  */
 export function getCdnEmailImageQuality(url) {
   try {
@@ -697,11 +740,14 @@ export function getS3EmailImageQualityMapping(
     return {};
 
   const urlToImageQualityMapping = {};
+  //exact key match (not substring, so a.jpg never matches a.jpg.jpeg); s3, plain cdn and old cdn urls of one file share the key.
+  const urlKeys = (s3UrlList || []).map((url) => [url, getKeyFromS3Url(url)]);
   forOwn(urlKeysToFileSizeMapping, function (val, key, obj) {
-    const s3Url = s3UrlList?.find((url) => url?.includes(key));
-    if (s3Url) {
-      urlToImageQualityMapping[s3Url] = getEmailImageOverrideQuality(val);
-    }
+    urlKeys.forEach(([s3Url, urlKey]) => {
+      if (urlKey === key) {
+        urlToImageQualityMapping[s3Url] = getEmailImageOverrideQuality(val);
+      }
+    });
   });
   return urlToImageQualityMapping;
 }
@@ -761,33 +807,29 @@ export function getEmailImageOverrideQuality(fileSize) {
  * @param {array} urlList ex ['1.jpg','2.jpg'] // these can be any urls (s3, cdn or others).
  * This function accepts list of urls(can be s3, cdn or other).
  * This function returns quality corresponding to the url.
- * 
- * If it is cdn url. It extracts quality from cdn url.
- * If it is s3 url:
- *  a. If image is selected from gallery or image is manuall uploaded(not zip upload), 
+ *
+ * For both s3 and cdn urls (a cdn url's old `quality=` is never reused):
+ *  a. If image is selected from gallery or image is manuall uploaded(not zip upload),
  *     then we have file size information in window object. We deterermine quality from it.
- *  b. If not in a, we append the s3 url into nonSelectedS3Urls
- * 
+ *  b. If not in a, we append the url into nonSelectedS3Urls
+ *
  * If we have elements in nonSelectedS3Urls array. We make an api call to get file size details and then determine quality.
- * 
+ * getKeyFromS3Url works on cdn urls too, so an already transformed cdn url resolves to the same file key as its s3 url.
+ *
  * We return the quality mapping, key being url and value being quality
- * 
+ *
  */
 export async function getUrlsToQualityMapping(urlList){
   if(!urlList?.length) return {};
 
   const urlQualityMapping = {};
 
-  const nonSelectedS3Urls = []; //we do not know file sizes of these s3 urls yet.
+  const nonSelectedS3Urls = []; //we do not know file sizes of these s3/cdn urls yet.
 
   urlList?.forEach(url=>{
     const {isS3Url, isCdnUrl} = checkValidUrl(url);
 
-    if (isCdnUrl){
-      urlQualityMapping[url] = getCdnEmailImageQuality(url);
-      return;
-    }
-    if(isS3Url){
+    if(isS3Url || isCdnUrl){
       const s3FileQuality = getS3EmailImageQuality(url);
       if(s3FileQuality){
         urlQualityMapping[url] = s3FileQuality;

package/utils/tests/__snapshots__/cdnTransformation.test.js.snap

@@ -119,7 +119,7 @@ img.fullwidthOnMobile {
 <body class=\\"clean-body\\" style=\\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\\">
 <p><!--[if IE]><div class=\\"ie-browser\\"><![endif]-->hello world</p>
 
-<p><img alt=\\"Capillary Image\\" height=\\"171\\" src=\\"https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=257,height=171,format=auto,quality=75,/intouch_creative_assets/b4b63b22-8a81-41ee-a8df-6db967fc.jpg\\" width=\\"257\\"></p>
+<p><img alt=\\"Capillary Image\\" height=\\"171\\" src=\\"https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/b4b63b22-8a81-41ee-a8df-6db967fc.jpg\\" width=\\"257\\"></p>
 
 <table bgcolor=\\"#FFFFFF\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"nl-container\\" role=\\"presentation\\" style=\\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\\" valign=\\"top\\">
 	<tbody>
@@ -263,7 +263,7 @@ img.fullwidthOnMobile {
 <body class=\\"clean-body\\" style=\\"margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;\\">
 <p><!--[if IE]><div class=\\"ie-browser\\"><![endif]-->hello world</p>
 
-<p><img alt=\\"Capillary Image\\" height=\\"171\\" src=\\"https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/b4b63b22-8a81-41ee-a8df-6db967fc.jpg\\" width=\\"257\\" /></p>
+<p><img alt=\\"Capillary Image\\" height=\\"171\\" src=\\"https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/b4b63b22-8a81-41ee-a8df-6db967fc.jpg\\" width=\\"257\\"></p>
 
 <table bgcolor=\\"#FFFFFF\\" cellpadding=\\"0\\" cellspacing=\\"0\\" class=\\"nl-container\\" role=\\"presentation\\" style=\\"background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%\\" valign=\\"top\\">
 	<tbody>

package/utils/tests/cdnTransformation.mockdata.js

@@ -226,7 +226,7 @@ img.fullwidthOnMobile {
 	</style>
 </head>
 <body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;">
-<p><img alt="Capillary Image" height="184" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=328,height=184,format=auto,quality=75,/intouch_creative_assets/d5679e9b-1ff4-4e7c-8f77-30160048.png" width="328"></p>
+<p><img alt="Capillary Image" height="184" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/d5679e9b-1ff4-4e7c-8f77-30160048.png" width="328"></p>
 <!--[if IE]><div class="ie-browser"><![endif]-->
 
 <p>Hello world</p>
@@ -564,7 +564,7 @@ img.fullwidthOnMobile {
 	</style>
 </head>
 <body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;">
-<p><img alt="Capillary Image" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=75,/intouch_creative_assets/8d1498ab-099d-4145-ad15-edd77f7.jpeg"></p>
+<p><img alt="Capillary Image" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=80,/intouch_creative_assets/8d1498ab-099d-4145-ad15-edd77f7.jpeg"></p>
 
 <p><img alt="Capillary Image" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=90,/intouch_creative_assets/546a3d95-48be-4955-a07c-c4775da.jpeg"></p>
 <!--[if IE]><div class="ie-browser"><![endif]-->
@@ -691,9 +691,9 @@ img.fullwidthOnMobile {
 	</style>
 </head>
 <body class="clean-body" style="margin: 0; padding: 0; -webkit-text-size-adjust: 100%; background-color: #FFFFFF;">
-<p><img alt="Capillary Image" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=75,/intouch_creative_assets/8d1498ab-099d-4145-ad15-edd77f7.jpeg"></p>
+<p><img alt="Capillary Image" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/8d1498ab-099d-4145-ad15-edd77f7.jpeg"></p>
 
-<p><img alt="Capillary Image" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=75,/intouch_creative_assets/546a3d95-48be-4955-a07c-c4775da.jpeg"></p>
+<p><img alt="Capillary Image" src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/546a3d95-48be-4955-a07c-c4775da.jpeg"></p>
 <!--[if IE]><div class="ie-browser"><![endif]-->
 
 <table bgcolor="#FFFFFF" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="background-color:#ffffff; border-collapse:collapse; border-spacing:0; margin:0 auto; min-width:320px; mso-table-lspace:0pt; mso-table-rspace:0pt; table-layout:fixed; vertical-align:top; width:100%" valign="top">
@@ -744,7 +744,7 @@ export const emailRawTransformed2 = `<!DOCTYPE html>
 <body>
     <p>test for 3 urls, two are s3 and one is cdn url. Among two s3 url, one s3 url is in window object(since that was manually selected from gallery)</p>
     <img src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/394c053f-309b-49fc-ba74-6e700b1.jpeg">
-    <img src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=75,/intouch_creative_assets/f98ce0c0-53f8-4fbd-b4e3-05953dda.jpg">
+    <img src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/f98ce0c0-53f8-4fbd-b4e3-05953dda.jpg">
     <img src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg">
 </body>
 </html>`
@@ -760,7 +760,7 @@ export const emailRawTransformed3 = `<!DOCTYPE html>
 <body>
     <p>test for 3 urls, two are s3 and one is cdn url. Among two s3 url, one s3 url is in window object(since that was manually selected from gallery)</p>
     <img src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/394c053f-309b-49fc-ba74-6e700b1.jpeg">
-    <img src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=75,/intouch_creative_assets/f98ce0c0-53f8-4fbd-b4e3-05953dda.jpg">
+    <img src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/f98ce0c0-53f8-4fbd-b4e3-05953dda.jpg">
     <img src="https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg">
 </body>
 </html>`

package/utils/tests/cdnTransformation.test.js

@@ -15,7 +15,7 @@ beforeEach(() => {
       CREATIVES_S3_BUCKET_PATH: "intouch_creative_assets",
       CREATIVES_CDN_BASE_URL: "https://storage.crm.n.content-cdn.io",
       CREATIVES_CDN_QUALITY_CONFIG:
-        '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}',
+        '{"EMAIL":85,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}',
       S3_CDN_MAP: '{"crm-nightly-new-fileservice.s3.amazonaws.com":{"cdn_host":"storage.crm.n.content-cdn.io","bucket_path":"intouch_creative_assets"}, "crm-prod-new-fileservice.s3.amazonaws.com": { "cdn_host": "storage.crm.p.content-cdn.io", "bucket_path": "fileservice.p/intouch_creative_assets" }}',
     };
     return {
@@ -40,7 +40,7 @@ beforeEach(() => {
 afterEach(() => {
   localStorage.setItem(
     "CREATIVES_CDN_QUALITY_CONFIG",
-    '{"EMAIL":75,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}'
+    '{"EMAIL":85,"RCS":75,"VIBER":75,"WHATSAPP":75,"MOBILE_PUSH":75,"FACEBOOK":75,"LINE":75,"DEFAULT":75}'
   );
   localStorage.setItem(
     "CREATIVES_S3_BUCKET_PATH", "intouch_creative_assets"
@@ -83,11 +83,11 @@ describe("cdnTransformationTests", () => {
         url: TEST_S3_URL,
         channelName: "EMAIL",
       });
-      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 
-    it("Should replace s3 url with cdn url for email when h/w are provided", () => {
+    it("Should replace s3 url with cdn url for email when h/w are provided (h/w are ignored for email)", () => {
       const TEST_S3_URL = `https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
       const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
         url: TEST_S3_URL,
@@ -95,7 +95,7 @@ describe("cdnTransformationTests", () => {
         height: 100,
         width: 200,
       });
-      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 
@@ -108,7 +108,7 @@ describe("cdnTransformationTests", () => {
         height: 100,
         width: 200,
       });
-      const EXPECTED_CDN_URL = `https://storage.crm.p.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/fileservice.p/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const EXPECTED_CDN_URL = `https://storage.crm.p.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/fileservice.p/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 
@@ -121,7 +121,7 @@ describe("cdnTransformationTests", () => {
         height: 100,
         width: 200,
       });
-      const EXPECTED_CDN_URL = `https://storage.crm.p.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/fileservice.p/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const EXPECTED_CDN_URL = `https://storage.crm.p.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/fileservice.p/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 
@@ -133,7 +133,7 @@ describe("cdnTransformationTests", () => {
         height: 100,
         width: 200,
       });
-      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/intouch_creative_assets/02557e68-6b7b-4d0e-ba6f-efcf8972.gif`;
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/02557e68-6b7b-4d0e-ba6f-efcf8972.gif`;
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
     
@@ -149,15 +149,15 @@ describe("cdnTransformationTests", () => {
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 
-    it("should replace cdn url with new cdn url for email incase h/w etc changed", () => {
-      const TEST_S3_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+    it("should rebuild an already transformed cdn url for email, dropping old width/height/quality", () => {
+      const TEST_S3_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=65,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
       const GENERATED_CDN_URL = cdnUtils.getCdnUrl({
         url: TEST_S3_URL,
         channelName: "EMAIL",
         height: 400,
         width: 500,
       });
-      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=500,height=400,format=auto,quality=75,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
 
@@ -205,7 +205,7 @@ describe("cdnTransformationTests", () => {
         height: 100,
         width: 200,
       });
-      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=200,height=100,format=auto,quality=100,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
+      const EXPECTED_CDN_URL = `https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=100,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg`;
 
       expect(GENERATED_CDN_URL).toEqual(EXPECTED_CDN_URL);
     });
@@ -246,6 +246,8 @@ describe("cdnTransformationTests", () => {
         "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/394c053f-309b-49fc-ba74-6e700b1.jpeg": 76800, //this image has quality 85 since file size less than 80kb
       };
       
+      //The msw handler does not intercept this call (same as before this change), so f98ce0c0 and the cdn url 2c9233ed fall back to the config quality 85.
+      //The cdn url is looked up by file key like an s3 url; its own quality= is not reused.
       const htmlContentsInput = mockdata.emailRawInput2;
       const htmlContentsOutput = await cdnUtils.updateImagesInHtml(htmlContentsInput);
       const expected = mockdata.emailRawTransformed2;
@@ -278,6 +280,57 @@ describe("cdnTransformationTests", () => {
         await cdnUtils.transformEmailTemplates(emailTemplateInput);
       expect(emailTemplateOutput).toMatchSnapshot();
     });
+    it("should transform every version node: base and every history entry, all selected languages, old cdn urls included", async () => {
+      const OLD_EN = "https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=600,height=auto,format=auto,quality=65,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg";
+      const S3_ES = "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/02557e68-6b7b-4d0e-ba6f-efcf8972.gif";
+      const NEW_EN = "https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg";
+      const NEW_ES = "https://storage.crm.n.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/02557e68-6b7b-4d0e-ba6f-efcf8972.gif";
+      const makeNode = () => ({
+        selectedLanguages: ["en", "es"],
+        activeTab: "en",
+        en: { "template-content": `<img src="${OLD_EN}" width="600" height="auto">` },
+        es: { "template-content": `<img src="${S3_ES}">` },
+      });
+      const input = { type: "EMAIL", versions: { base: makeNode(), history: [makeNode(), makeNode()] } };
+
+      const output = await cdnUtils.transformEmailTemplates(input);
+
+      [output.versions.base, output.versions.history[0], output.versions.history[1]].forEach((node) => {
+        expect(node.en["template-content"]).toEqual(`<img src="${NEW_EN}" width="600" height="auto">`);
+        expect(node.es["template-content"]).toEqual(`<img src="${NEW_ES}">`);
+      });
+      // input is not mutated
+      expect(input.versions.history[0].en["template-content"]).toContain("quality=65");
+    });
+
+    it("should transform a language node once when base and history[0] are the same object, and skip nodes without html", async () => {
+      const S3 = "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg";
+      const shared = { selectedLanguages: ["en", "fr"], activeTab: "en", en: { "template-content": `<img src="${S3}">` }, fr: { is_drag_drop: false } };
+      const input = { versions: { base: shared, history: [shared] } };
+      const parseSpy = jest.spyOn(nodeHtmlParser, "parse");
+
+      const output = await cdnUtils.transformEmailTemplates(input);
+
+      expect(output.versions.base).toBe(output.versions.history[0]); // shared reference survives cloneDeep
+      expect(output.versions.base.en["template-content"]).toContain("cdn-cgi/image/format=auto,quality=85,/");
+      expect(output.versions.base.fr).toEqual({ is_drag_drop: false }); // no "template-content" key added
+      expect(parseSpy).toHaveBeenCalledTimes(1);
+    });
+
+    it("should transform identical html held by distinct base and history nodes once", async () => {
+      const S3 = "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg";
+      const makeNode = () => ({ selectedLanguages: ["en"], activeTab: "en", en: { "template-content": `<img src="${S3}" width="600">` } });
+      const input = { versions: { base: makeNode(), history: [makeNode()] } };
+      const parseSpy = jest.spyOn(nodeHtmlParser, "parse");
+
+      const output = await cdnUtils.transformEmailTemplates(input);
+
+      expect(output.versions.base).not.toBe(output.versions.history[0]);
+      expect(output.versions.history[0].en["template-content"]).toEqual(output.versions.base.en["template-content"]);
+      expect(output.versions.base.en["template-content"]).toContain("cdn-cgi/image/format=auto,quality=85,/");
+      expect(parseSpy).toHaveBeenCalledTimes(1);
+    });
+
     it("should return original contents transform email template throws an error inside. This might be due to improper input or unexpected error.", async () => {
       const emailTemplateInputWithError = mockdata.emailTemplateRawWithError;
       const emailTemplateOutput =
@@ -304,19 +357,22 @@ describe("cdnTransformationTests", () => {
       const emailTemplateInput = mockdata.emailTemplateOverrideInput1;
       const emailTemplateOutput =
         await cdnUtils.updateImagesInHtml(emailTemplateInput);
-      expect(emailTemplateOutput).toEqual(mockdata.emailTemplateOverrideOutput1); //first image has q=75 since less than 400KB, second image has q=90 since less than 30kB
+      expect(emailTemplateOutput).toEqual(mockdata.emailTemplateOverrideOutput1); //first image maps to q=75 (less than 400KB) and is clamped to the email minimum 80, second image has q=90 since less than 30kB
 
     });
 
 
-    it("should reuse the same previous quality from cdn url when overrideEmailQuality is set true", async () => {
+    it("should NOT reuse the previous quality from a cdn url when overrideEmailQuality is set true", async () => {
       localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");      
       localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING", "[[30, 90], [80, 85], [150, 80], [400, 75], [600, 70], [1200, 65], [102400, 60]]");
       
+      //Input already carries quality=80 and quality=90. File sizes are unknown (no window entry, file size api not mocked),
+      //so the current email rule applies: the config quality (85) for both images, not the quality found in the url.
       const emailTemplateInput = mockdata.emailTemplateOverrideOutput1;
       const emailTemplateOutput =
         await cdnUtils.updateImagesInHtml(emailTemplateInput);
-      expect(emailTemplateOutput).toEqual(mockdata.emailTemplateOverrideOutput1); // Both input and output should be exactly same.
+      expect(emailTemplateOutput).toEqual(mockdata.emailTemplateOverrideOutputWithWindowDeleted1);
+      expect(emailTemplateOutput).not.toEqual(emailTemplateInput);
     });
 
     it("should transform email template with qualtyCfg if window objects CREATIVES_S3_ASSET_FILESIZES is somehow deleted", async () => {
@@ -328,7 +384,7 @@ describe("cdnTransformationTests", () => {
       const emailTemplateInput = mockdata.emailTemplateOverrideInput1;
       const emailTemplateOutput =
         await cdnUtils.updateImagesInHtml(emailTemplateInput);
-      expect(emailTemplateOutput).toEqual(mockdata.emailTemplateOverrideOutputWithWindowDeleted1); //first image has q=75 since less than 400KB, second image has q=90 since less than 30kB
+      expect(emailTemplateOutput).toEqual(mockdata.emailTemplateOverrideOutputWithWindowDeleted1); //file sizes unknown, both images get the config email quality (85)
 
     });
   });
@@ -825,4 +881,248 @@ describe("cdnTransformationTests", () => {
     });
 
   })
+
+  /**
+   * Email images are never resized, the email quality is clamped to [80, 100],
+   * and old transformed cdn urls are rebuilt from the file key with the current settings.
+   * Covers the eucrm, incrm, seacrm and asiacrm S3_CDN_MAP shapes (path-style buckets included).
+   */
+  describe("EMAIL channel: no resizing, clamped quality, old cdn urls rebuilt", () => {
+    const PROD_S3_CDN_MAP = {
+      "crm-nightly-new-fileservice.s3.amazonaws.com": { cdn_host: "storage.crm.n.content-cdn.io", bucket_path: "intouch_creative_assets" },
+      "asiacrm-fileservicepgxdbptutk.s3.ap-south-1.amazonaws.com": { cdn_host: "storage.crm.asia.content-cdn.io", bucket_path: "intouch_creative_assets" },
+      "s3-eu-west-1.amazonaws.com": { cdn_host: "storage.crm.eu.content-cdn.io", bucket_path: "fs.capillary.eu/intouch_creative_assets" },
+      "s3.amazonaws.com": { cdn_host: "storage.crm.in.content-cdn.io", bucket_path: "fileservice.in/intouch_creative_assets" },
+      "s3-ap-southeast-1.amazonaws.com": { cdn_host: "storage.crm.sg.content-cdn.io", bucket_path: "fs.capillary.sg/intouch_creative_assets" },
+    };
+
+    // For every cluster: the s3 url, the plain cdn url and an old transformed cdn url of ONE file must all become `expected`.
+    const CLUSTER_CASES = [
+      {
+        cluster: "eucrm",
+        s3: "https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/26c03d91-ab03-42a9-904c-1840f093.png",
+        plainCdn: "https://storage.crm.eu.content-cdn.io/fs.capillary.eu/intouch_creative_assets/26c03d91-ab03-42a9-904c-1840f093.png",
+        oldCdn: "https://storage.crm.eu.content-cdn.io/cdn-cgi/image/width=600,height=auto,format=auto,quality=65,/fs.capillary.eu/intouch_creative_assets/26c03d91-ab03-42a9-904c-1840f093.png",
+        expected: "https://storage.crm.eu.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/fs.capillary.eu/intouch_creative_assets/26c03d91-ab03-42a9-904c-1840f093.png",
+      },
+      {
+        cluster: "incrm",
+        s3: "https://s3.amazonaws.com/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png",
+        plainCdn: "https://storage.crm.in.content-cdn.io/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png",
+        oldCdn: "https://storage.crm.in.content-cdn.io/cdn-cgi/image/width=371,height=82,format=auto,quality=90,/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png",
+        expected: "https://storage.crm.in.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/fileservice.in/intouch_creative_assets/60221e2020ba572f6787.png",
+      },
+      {
+        cluster: "seacrm",
+        s3: "https://s3-ap-southeast-1.amazonaws.com/fs.capillary.sg/intouch_creative_assets/7e3f2abd-6862-4f2d-8537-7deca610.png",
+        plainCdn: "https://storage.crm.sg.content-cdn.io/fs.capillary.sg/intouch_creative_assets/7e3f2abd-6862-4f2d-8537-7deca610.png",
+        oldCdn: "https://storage.crm.sg.content-cdn.io/cdn-cgi/image/quality=75,/fs.capillary.sg/intouch_creative_assets/7e3f2abd-6862-4f2d-8537-7deca610.png",
+        expected: "https://storage.crm.sg.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/fs.capillary.sg/intouch_creative_assets/7e3f2abd-6862-4f2d-8537-7deca610.png",
+      },
+      {
+        cluster: "asiacrm",
+        s3: "https://asiacrm-fileservicepgxdbptutk.s3.ap-south-1.amazonaws.com/intouch_creative_assets/8d1498ab-099d-4145-ad15-edd77f7.jpeg",
+        plainCdn: "https://storage.crm.asia.content-cdn.io/intouch_creative_assets/8d1498ab-099d-4145-ad15-edd77f7.jpeg",
+        oldCdn: "https://storage.crm.asia.content-cdn.io/cdn-cgi/image/width=1080,height=1080,format=auto,quality=60,/intouch_creative_assets/8d1498ab-099d-4145-ad15-edd77f7.jpeg",
+        expected: "https://storage.crm.asia.content-cdn.io/cdn-cgi/image/format=auto,quality=85,/intouch_creative_assets/8d1498ab-099d-4145-ad15-edd77f7.jpeg",
+      },
+    ];
+
+    const setQualityConfig = (cfg) => localStorage.setItem("CREATIVES_CDN_QUALITY_CONFIG", JSON.stringify(cfg));
+    // What updateImagesInHtml passes for a typical <img width="600" height="auto">.
+    const toEmailUrl = (url, width = 600, height = "auto") => cdnUtils.getCdnUrl({
+      url,
+      channelName: "EMAIL",
+      width,
+      height,
+    });
+    const EU = CLUSTER_CASES[0];
+    const EXTERNAL_URL_1 = "https://example.com/newsletter/banner.jpg";
+    const EXTERNAL_URL_2 = "https://d1oco4z2z1fhwp.cloudfront.net/templates/x.png";
+    const EMAIL_HTML = [
+      "<!DOCTYPE html><html><body>",
+      `<img src="${EU.oldCdn}" width="600" height="auto">`,
+      `<img src="${EU.s3}" width="300" height="200">`,
+      `<img src="${EU.plainCdn}">`,
+      `<img src="${EXTERNAL_URL_1}" width="100" height="50">`,
+      `<img src="${EXTERNAL_URL_2}">`,
+      "</body></html>",
+    ].join("");
+
+    beforeEach(() => {
+      localStorage.setItem("S3_CDN_MAP", JSON.stringify(PROD_S3_CDN_MAP));
+      setQualityConfig({
+        EMAIL: 85, RCS: 75, VIBER: 75, WHATSAPP: 75, MOBILE_PUSH: 75, FACEBOOK: 75, LINE: 75, DEFAULT: 75,
+      });
+    });
+
+    describe("getCdnUrl()", () => {
+      it("never adds width/height to email urls even when they are passed; format=auto and the config quality are present", () => {
+        const url = toEmailUrl(EU.s3);
+        expect(url).toEqual(EU.expected);
+        expect(url).not.toContain("width=");
+        expect(url).not.toContain("height=");
+        expect(url).toContain("format=auto,");
+        expect(url).toContain("quality=85,");
+
+        const urlWithNumericHw = toEmailUrl(EU.s3, 1200, 1258);
+        expect(urlWithNumericHw).toEqual(EU.expected);
+      });
+
+      it("clamps the email config quality into [80, 100]: 60->80, 85->85, 120->100", () => {
+        [[60, 80], [85, 85], [120, 100], [80, 80], [100, 100]].forEach(([configured, served]) => {
+          setQualityConfig({ EMAIL: configured, DEFAULT: 75 });
+          expect(cdnUtils.getCdnUrl({ url: EU.s3, channelName: "EMAIL" }))
+            .toEqual(EU.expected.replace("quality=85,", `quality=${served},`));
+        });
+      });
+
+      it("clamps emailOverrideQuality for email: 65->80, 90->90, 150->100", () => {
+        [[65, 80], [90, 90], [150, 100]].forEach(([override, served]) => {
+          expect(cdnUtils.getCdnUrl({ url: EU.s3, channelName: "EMAIL", emailOverrideQuality: override }))
+            .toEqual(EU.expected.replace("quality=85,", `quality=${served},`));
+        });
+      });
+
+      it("exposes the clamp helper and the bounds", () => {
+        expect(cdnUtils.EMAIL_MIN_QUALITY).toEqual(80);
+        expect(cdnUtils.EMAIL_MAX_QUALITY).toEqual(100);
+        expect(cdnUtils.clampEmailQuality(10)).toEqual(80);
+        expect(cdnUtils.clampEmailQuality(80)).toEqual(80);
+        expect(cdnUtils.clampEmailQuality(90)).toEqual(90);
+        expect(cdnUtils.clampEmailQuality(999)).toEqual(100);
+        expect(cdnUtils.clampEmailQuality(null)).toEqual(null);
+        expect(cdnUtils.clampEmailQuality("a")).toEqual("a");
+      });
+
+      it("does not clamp or resize other channels: a non-email channel configured at 70 still produces 70 with its own h/w", () => {
+        setQualityConfig({
+          EMAIL: 85, RCS: 70, VIBER: 70, WHATSAPP: 70, DEFAULT: 70,
+        });
+        const S3_URL = "https://crm-nightly-new-fileservice.s3.amazonaws.com/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg";
+        expect(cdnUtils.getCdnUrl({ url: S3_URL, channelName: "RCS" }))
+          .toEqual("https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=1440,height=720,quality=70,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg");
+        expect(cdnUtils.getCdnUrl({ url: S3_URL, channelName: "VIBER" }))
+          .toEqual("https://storage.crm.n.content-cdn.io/cdn-cgi/image/width=300,height=400,quality=70,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg");
+        expect(cdnUtils.getCdnUrl({ url: S3_URL, channelName: "WHATSAPP" }))
+          .toEqual("https://storage.crm.n.content-cdn.io/cdn-cgi/image/quality=70,/intouch_creative_assets/2c9233ed-0959-4aff-b749-9171b5c8.jpg");
+      });
+
+      it("gives the identical email url for the s3 url, the plain cdn url and an old transformed cdn url (incl. height=auto), for every cluster map shape", () => {
+        CLUSTER_CASES.forEach((c) => {
+          expect([c.cluster, toEmailUrl(c.s3)]).toEqual([c.cluster, c.expected]);
+          expect([c.cluster, toEmailUrl(c.plainCdn)]).toEqual([c.cluster, c.expected]);
+          expect([c.cluster, toEmailUrl(c.oldCdn)]).toEqual([c.cluster, c.expected]);
+        });
+      });
+
+      it("leaves external (non S3_CDN_MAP) urls unchanged", () => {
+        expect(toEmailUrl(EXTERNAL_URL_1, 100, 50)).toEqual(EXTERNAL_URL_1);
+        expect(cdnUtils.getCdnUrl({ url: EXTERNAL_URL_2, channelName: "EMAIL" })).toEqual(EXTERNAL_URL_2);
+      });
+    });
+
+    describe("updateImagesInHtml()", () => {
+      const expectRebuiltHtml = (html, quality) => {
+        const root = nodeHtmlParser.parse(html);
+        const srcs = root.querySelectorAll("img").map((img) => img.getAttribute("src"));
+        const expected = EU.expected.replace("quality=85,", `quality=${quality},`);
+        expect(srcs).toEqual([expected, expected, expected, EXTERNAL_URL_1, EXTERNAL_URL_2]);
+        srcs.slice(0, 3).forEach((src) => {
+          expect(src).not.toContain("width=");
+          expect(src).not.toContain("height=");
+          expect(src).not.toContain("quality=65");
+        });
+        // The <img> width/height attributes themselves are untouched; only src changes.
+        expect(html).toContain(`<img src="${expected}" width="600" height="auto">`);
+        expect(html).toContain(`<img src="${EXTERNAL_URL_1}" width="100" height="50">`);
+      };
+
+      it("OVERRIDE_IMAGE_QUALITY off: rebuilds an old width=600,height=auto,quality=65 url with no width/height and the config quality; s3 and plain cdn urls give the identical url; external urls unchanged; idempotent", async () => {
+        localStorage.removeItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY");
+        localStorage.removeItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING");
+
+        const once = await cdnUtils.updateImagesInHtml(EMAIL_HTML);
+        expectRebuiltHtml(once, 85);
+
+        const twice = await cdnUtils.updateImagesInHtml(once);
+        expect(twice).toEqual(once);
+      });
+
+      // POST /assets/files/metadata answer for the eucrm banner: 948.6 KB (the api returns KB) keyed by s3 key.
+      // 948.6 KB falls in the [1200, 65] band of IMAGE_QUALITY_MAPPING, which the email clamp raises to 80.
+      const FILE_SIZE_API_RESPONSE = {
+        success: true,
+        status: { isError: false, code: 200, message: "success" },
+        response: { "26c03d91-ab03-42a9-904c-1840f093.png": 948.6 },
+      };
+
+      it("OVERRIDE_IMAGE_QUALITY on: the old quality=65 is NOT reused; all three url forms resolve via the file size lookup and are clamped to 80; external urls unchanged; idempotent", async () => {
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING", "[[30, 90], [80, 85], [150, 80], [400, 75], [600, 70], [1200, 65], [102400, 60]]");
+        const apiSpy = jest.spyOn(Api, "getS3UrlFileSizes").mockResolvedValue(FILE_SIZE_API_RESPONSE);
+
+        const once = await cdnUtils.updateImagesInHtml(EMAIL_HTML);
+        // 948.6 KB -> band 65 -> clamped to the email minimum 80 (never 65 from the old url, never below 80).
+        expectRebuiltHtml(once, 80);
+        // The old cdn url and the plain cdn url are looked up by the same file key as the s3 url, never by the quality= they carry.
+        expect(apiSpy).toHaveBeenCalledTimes(1);
+        expect(apiSpy.mock.calls[0][0].keys).toEqual([
+          "26c03d91-ab03-42a9-904c-1840f093.png",
+          "26c03d91-ab03-42a9-904c-1840f093.png",
+          "26c03d91-ab03-42a9-904c-1840f093.png",
+        ]);
+        apiSpy.mockResolvedValue(FILE_SIZE_API_RESPONSE);
+
+        const twice = await cdnUtils.updateImagesInHtml(once);
+        expect(twice).toEqual(once);
+      });
+
+      it("OVERRIDE_IMAGE_QUALITY on but the file size api fails: falls back to the config quality for every url form", async () => {
+        jest.spyOn(Api, "getS3UrlFileSizes").mockRejectedValue(new Error("network"));
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING", "[[30, 90], [80, 85], [150, 80], [400, 75], [600, 70], [1200, 65], [102400, 60]]");
+        const once = await cdnUtils.updateImagesInHtml(EMAIL_HTML);
+        expectRebuiltHtml(once, 85);
+      });
+
+      it("OVERRIDE_IMAGE_QUALITY on with the file size known from the window object (gallery/upload path): clamped to 80 for the s3 url and identical for the cdn forms", async () => {
+        jest.spyOn(Api, "getS3UrlFileSizes").mockResolvedValue(FILE_SIZE_API_RESPONSE);
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING", "[[30, 90], [80, 85], [150, 80], [400, 75], [600, 70], [1200, 65], [102400, 60]]");
+        window[cdnUtils.CREATIVES_S3_ASSET_FILESIZES] = { [EU.s3]: 971372 };
+
+        const once = await cdnUtils.updateImagesInHtml(EMAIL_HTML);
+        expectRebuiltHtml(once, 80);
+      });
+
+      it("OVERRIDE_IMAGE_QUALITY on: file sizes are matched by exact key, so a.jpg never takes a.jpg.jpeg's size", async () => {
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING", "[[30, 90], [80, 85], [150, 80], [400, 75], [600, 70], [1200, 65], [102400, 60]]");
+        const SHORT = "https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/a.jpg";
+        const LONG = "https://s3-eu-west-1.amazonaws.com/fs.capillary.eu/intouch_creative_assets/a.jpg.jpeg";
+        jest.spyOn(Api, "getS3UrlFileSizes").mockResolvedValue({
+          success: true,
+          status: { isError: false, code: 200, message: "success" },
+          response: { "a.jpg.jpeg": 20, "a.jpg": 948.6 }, // 20 KB -> 90, 948.6 KB -> 65 -> clamped 80
+        });
+
+        const once = await cdnUtils.updateImagesInHtml(`<img src="${LONG}"><img src="${SHORT}">`);
+
+        expect(once).toEqual(
+          `<img src="https://storage.crm.eu.content-cdn.io/cdn-cgi/image/format=auto,quality=90,/fs.capillary.eu/intouch_creative_assets/a.jpg.jpeg">`
+          + `<img src="https://storage.crm.eu.content-cdn.io/cdn-cgi/image/format=auto,quality=80,/fs.capillary.eu/intouch_creative_assets/a.jpg">`
+        );
+      });
+
+      it("OVERRIDE_IMAGE_QUALITY on: a file size that maps above 80 keeps that quality (clamp is a floor, not a constant)", async () => {
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");
+        localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING", "[[30, 90], [80, 85], [150, 80], [400, 75], [600, 70], [1200, 65], [102400, 60]]");
+        window[cdnUtils.CREATIVES_S3_ASSET_FILESIZES] = { [EU.s3]: 20 * 1024 }; // 20 KB -> 90
+
+        const once = await cdnUtils.updateImagesInHtml(`<img src="${EU.s3}" width="600" height="auto">`);
+        expect(once).toEqual(`<img src="${EU.expected.replace("quality=85,", "quality=90,")}" width="600" height="auto">`);
+      });
+    });
+  });
 });

package/v2Components/CommonTestAndPreview/sagas.js

@@ -177,7 +177,8 @@ export function* getBulkCustomerDetails({fetchedUserIds}) {
       (item) => {
         const profile = get(item, 'entity.profiles[0]', {});
         if (isEmpty(profile)) {
-          throw new Error(item?.errors?.[0]?.message || ERROR_MESSAGES.PROFILE_IS_EMPTY);
+          // Skip customers without a profile (e.g. PII-deleted) instead of failing the whole list.
+          return null;
         }
         const mobileIdentifier = profile?.identifiers?.find(
           (identifier) => identifier.type === IDENTIFIER_TYPE_MOBILE,
@@ -193,7 +194,7 @@ export function* getBulkCustomerDetails({fetchedUserIds}) {
           email: emailIdentifier?.value,
         };
       },
-    );
+    ).filter(Boolean);
     yield put({
       type: GET_TEST_CUSTOMERS_SUCCESS,
       payload: { customers: transformedData },

package/v2Components/CommonTestAndPreview/tests/sagas.test.js

@@ -957,6 +957,61 @@ describe('CommonTestAndPreview Sagas', () => {
     });
   });
 
+  describe('getBulkCustomerDetails', () => {
+    const validItem = {
+      entity: {
+        id: 101,
+        profiles: [{
+          firstName: 'Jane',
+          lastName: 'Doe',
+          identifiers: [
+            { type: 'mobile', value: '919999999999' },
+            { type: 'email', value: 'jane@example.com' },
+          ],
+        }],
+      },
+    };
+
+    it('should map bulk customer profiles to test customers', () => {
+      const generator = getBulkCustomerDetails({ fetchedUserIds: [101] });
+
+      expect(generator.next().value).toEqual(
+        call(Api.getBulkCustomerDetails, { userIds: [101] })
+      );
+      expect(generator.next({ result: { data: [validItem] } }).value).toEqual(
+        put({
+          type: GET_TEST_CUSTOMERS_SUCCESS,
+          payload: {
+            customers: [{
+              userId: 101, name: 'Jane Doe', mobile: '919999999999', email: 'jane@example.com',
+            }],
+          },
+        })
+      );
+    });
+
+    it('should skip customers with an empty profile instead of failing the whole list', () => {
+      const emptyProfileItem = {
+        entity: { id: 102, profiles: [] },
+        errors: [{ message: 'Customer is deleted after PII delete request', code: 8109, status: false }],
+        success: false,
+      };
+      const generator = getBulkCustomerDetails({ fetchedUserIds: [101, 102] });
+
+      generator.next();
+      expect(generator.next({ result: { data: [emptyProfileItem, validItem] } }).value).toEqual(
+        put({
+          type: GET_TEST_CUSTOMERS_SUCCESS,
+          payload: {
+            customers: [{
+              userId: 101, name: 'Jane Doe', mobile: '919999999999', email: 'jane@example.com',
+            }],
+          },
+        })
+      );
+    });
+  });
+
   describe('fetchTestGroupsSaga', () => {
     it('should fetch test groups successfully', () => {
       const response = {