npm - @capillarytech/creatives-library - Versions diffs - 8.0.353 → 8.0.354 - Mend

@capillarytech/creatives-library 8.0.353 → 8.0.354

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/index.html +1 -0
package/package.json +1 -1
package/utils/cdnTransformation.js +63 -3
package/utils/tests/cdnTransformation.test.js +111 -0
package/v2Components/FormBuilder/index.js +52 -162
package/v2Containers/CreativesContainer/index.js +24 -60
package/v2Containers/Templates/sagas.js +6 -1
package/v2Containers/Templates/tests/sagas.test.js +23 -6

package/index.html CHANGED Viewed

@@ -23,6 +23,7 @@
     <!-- End Google Tag Manager -->
     <script>try{Typekit.load({ async: true });}catch(e){console.log(e)}</script>
     <title>Capillary - Creatives</title>
+    <script>try{window.APP_ENV=__ENV_OBJECT__;}catch(e){window.APP_ENV={};}</script>
   </head>
   <body>
     <noscript>

package/package.json CHANGED Viewed

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

package/utils/cdnTransformation.js CHANGED Viewed

@@ -422,14 +422,74 @@ export function removeAllCdnLocalStorageItems() {
 }
 /**
- *
- * @param {*} configsResponse
+ * Safe JSON.parse — returns fallback if value is empty or malformed.
+ * Used to parse the JSON-string env vars (qualityCfg, mapping, s3CdnMap) injected via window.APP_ENV.
+ */
+function safeJsonParse(value, fallback) {
+  if (!value) return fallback;
+  try {
+    return JSON.parse(value);
+  } catch (e) {
+    return fallback;
+  }
+}
+/**
+ * Reads CDN config from window.APP_ENV (injected at container startup by entrypoint.sh)
+ * and populates localStorage via saveCdnConfigs — same shape as the legacy API response.
+ *
+ * Returns true if env config was found and applied, false otherwise (saga falls back to API).
+ *
+ * In deployed containers, window.APP_ENV is populated → no API call. In local dev
+ * (`npm start`), window.APP_ENV is empty → returns false → saga falls back to the API
+ * (legacy path, retained for the rollout window).
+ *
+ * Closes the VAPT info-disclosure surface (CAP-183204) by eliminating the
+ * /getCdnTransformationConfig API response in production.
+ */
+export function initCdnConfigFromEnv() {
+  try {
+    const env = (typeof window !== 'undefined' && window.APP_ENV) || {};
+    // All four fields are required to construct a CDN URL. If any is missing,
+    // partial config would silently make every getCdnUrl call fall through to the
+    // raw S3 URL. Return false so the saga falls back to the API (which may still
+    // have the values during the cluster-by-cluster rollout window).
+    if (!env.CDN_HOSTNAME
+        || !env.CDN_IMG_TRANSFORMATION_URL_SUFFIX
+        || !env.CREATIVE_ASSETS_BUCKET_PATH
+        || !env.S3_CDN_MAP) {
+      return false;
+    }
+    saveCdnConfigs({
+      hostname: env.CDN_HOSTNAME,
+      transformationUrlSuffix: env.CDN_IMG_TRANSFORMATION_URL_SUFFIX,
+      bucketPath: env.CREATIVE_ASSETS_BUCKET_PATH,
+      qualityCfg: safeJsonParse(env.CDN_IMG_QUALITY_CFG, {}),
+      overrideEmailQuality: env.OVERRIDE_IMAGE_QUALITY === 'true',
+      overrideEmailQualityMapping: safeJsonParse(env.IMAGE_QUALITY_MAPPING, []),
+      s3CdnMap: safeJsonParse(env.S3_CDN_MAP, {}),
+    });
+    return true;
+  } catch (e) {
+    Bugsnag.leaveBreadcrumb('initCdnConfigFromEnv failed to apply window.APP_ENV');
+    Bugsnag.notify(e, (event) => {
+      event.severity = 'error';
+    });
+    return false;
+  }
+}
+/**
+ *
+ * @param {*} configsResponse
  * This util function saves the getCdnConfigs response into the local storage.
  * The following response items are mapped into the following keys in local storage:
  * hostname -> CREATIVES_CDN_BASE_URL
  * qualityCfg ->CREATIVES_CDN_QUALITY_CONFIG
  * transformationUrlSuffix -> CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX
- *
+ *
  * 1. If configsReponse is empty. All above mentioned keys are deleted from localstorage.
  * 2. If any one of the above keys is missing. The respective keys are deleted from localstorage.
  * 3. Else it is saved into the localstorage.

package/utils/tests/cdnTransformation.test.js CHANGED Viewed

@@ -546,6 +546,117 @@ describe("cdnTransformationTests", () => {
     });
   });
+  describe("initCdnConfigFromEnv()", () => {
+    afterEach(() => {
+      delete window.APP_ENV;
+    });
+    it("returns false when window.APP_ENV is undefined", () => {
+      delete window.APP_ENV;
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    const completeEnv = {
+      CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+      CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+      CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+      OVERRIDE_IMAGE_QUALITY: "false",
+      CDN_IMG_QUALITY_CFG: "{}",
+      IMAGE_QUALITY_MAPPING: "[]",
+      S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+    };
+    it.each([
+      ["CDN_HOSTNAME"],
+      ["CDN_IMG_TRANSFORMATION_URL_SUFFIX"],
+      ["CREATIVE_ASSETS_BUCKET_PATH"],
+      ["S3_CDN_MAP"],
+    ])("returns false when required field %s is missing", (missingKey) => {
+      window.APP_ENV = { ...completeEnv };
+      delete window.APP_ENV[missingKey];
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it.each([
+      ["CDN_HOSTNAME"],
+      ["CDN_IMG_TRANSFORMATION_URL_SUFFIX"],
+      ["CREATIVE_ASSETS_BUCKET_PATH"],
+      ["S3_CDN_MAP"],
+    ])("returns false when required field %s is empty string", (emptyKey) => {
+      window.APP_ENV = { ...completeEnv, [emptyKey]: "" };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+    });
+    it("populates localStorage and returns true for a complete env", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "true",
+        CDN_IMG_QUALITY_CFG: '{"EMAIL":65,"DEFAULT":70}',
+        IMAGE_QUALITY_MAPPING: '[[30,90],[80,85]]',
+        S3_CDN_MAP: '{"host.s3.amazonaws.com":{"cdn_host":"cdn.example.com","bucket_path":"x"}}',
+      };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(true);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe("https://storage.crm.n.content-cdn.io");
+      expect(localStorage.getItem("CREATIVES_CDN_TRANSFORMATION_URL_SUFFIX")).toBe("cdn-cgi/image");
+      expect(localStorage.getItem("CREATIVES_S3_BUCKET_PATH")).toBe("intouch_creative_assets");
+      expect(localStorage.getItem("CREATIVES_CDN_QUALITY_CONFIG")).toBe('{"EMAIL":65,"DEFAULT":70}');
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY")).toBe("true");
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY_MAPPING")).toBe("[[30,90],[80,85]]");
+      expect(JSON.parse(localStorage.getItem("S3_CDN_MAP"))).toEqual({
+        "host.s3.amazonaws.com": { cdn_host: "cdn.example.com", bucket_path: "x" },
+      });
+    });
+    it("uses fallback values for malformed JSON env vars instead of throwing", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "false",
+        CDN_IMG_QUALITY_CFG: "not-valid-json{{",
+        IMAGE_QUALITY_MAPPING: "also-broken",
+        S3_CDN_MAP: "}{",
+      };
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(true);
+      expect(localStorage.getItem("CREATIVES_CDN_BASE_URL")).toBe("https://storage.crm.n.content-cdn.io");
+    });
+    it("treats OVERRIDE_IMAGE_QUALITY values other than the string \"true\" as false", () => {
+      window.APP_ENV = {
+        CDN_HOSTNAME: "https://storage.crm.n.content-cdn.io",
+        CDN_IMG_TRANSFORMATION_URL_SUFFIX: "cdn-cgi/image",
+        CREATIVE_ASSETS_BUCKET_PATH: "intouch_creative_assets",
+        OVERRIDE_IMAGE_QUALITY: "no",
+        CDN_IMG_QUALITY_CFG: "{}",
+        IMAGE_QUALITY_MAPPING: "[]",
+        S3_CDN_MAP: "{}",
+      };
+      cdnUtils.initCdnConfigFromEnv();
+      expect(localStorage.getItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY")).toBe(undefined);
+    });
+    it("returns false and notifies Bugsnag when window.APP_ENV access throws", () => {
+      // Force the `window.APP_ENV` read inside initCdnConfigFromEnv to throw,
+      // which exercises the function's outer catch block.
+      Object.defineProperty(window, "APP_ENV", {
+        get() { throw new Error("APP_ENV access boom"); },
+        configurable: true,
+      });
+      const breadcrumbSpy = jest.spyOn(Bugsnag, "leaveBreadcrumb");
+      expect(cdnUtils.initCdnConfigFromEnv()).toBe(false);
+      expect(breadcrumbSpy).toHaveBeenCalledWith(
+        "initCdnConfigFromEnv failed to apply window.APP_ENV"
+      );
+      expect(bugsnagSpy).toHaveBeenCalled();
+    });
+  });
   describe("getEmailImageOverrideQuality()",()=>{
     it("Should return quality of last element in array if file size is greater than max provided in array",()=>{
       localStorage.setItem("CREATIVES_CDN_OVERRIDE_DEFAULT_EMAIL_QUALITY", "true");

package/v2Components/FormBuilder/index.js CHANGED Viewed

@@ -79,69 +79,6 @@ const errorMessageForTags = {
   TAG_BRACKET_COUNT_MISMATCH_ERROR: 'tagBracketCountMismatchError'
 };
-// Isolated input for EMAIL template-name: only this tiny component re-renders on each keystroke.
-// formData is updated only on blur (onCommit), eliminating all re-renders during typing.
-class HighFreqInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { localValue: props.value || '' };
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.value !== this.props.value && this.state.localValue !== this.props.value) {
-      this.setState({ localValue: this.props.value || '' });
-    }
-  }
-  handleChange = (e) => {
-    this.setState({ localValue: e.target.value });
-  };
-  handleBlur = (e) => {
-    this.props.onCommit(this.state.localValue);
-    if (this.props.onBlur) this.props.onBlur(e);
-  };
-  render() {
-    const { value: _v, onCommit: _oc, onBlur: _ob, ...rest } = this.props;
-    return <CapInput {...rest} value={this.state.localValue} onChange={this.handleChange} onBlur={this.handleBlur} />;
-  }
-}
-// Isolated wrapper for EMAIL template-subject: blur-only commit, same as HighFreqInput.
-class HighFreqTagInput extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { localInputValue: props.inputValue || '' };
-  }
-  componentDidUpdate(prevProps) {
-    if (prevProps.inputValue !== this.props.inputValue && this.state.localInputValue !== this.props.inputValue) {
-      this.setState({ localInputValue: this.props.inputValue || '' });
-    }
-  }
-  handleInputChange = (e) => {
-    this.setState({ localInputValue: e.target.value });
-  };
-  handleBlur = () => {
-    this.props.onCommit(this.state.localInputValue);
-  };
-  render() {
-    const { inputValue: _iv, onCommit: _oc, inputOnChange: _ic, ...rest } = this.props;
-    return (
-      <CapTagListWithInput
-        {...rest}
-        inputValue={this.state.localInputValue}
-        inputOnChange={this.handleInputChange}
-        inputProps={{ ...(this.props.inputProps || {}), onBlur: this.handleBlur }}
-      />
-    );
-  }
-}
 class FormBuilder extends React.Component { // eslint-disable-line react/prefer-stateless-function
   constructor(props) {
     super(props);
@@ -415,7 +352,6 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       this.setState({tabCount: nextProps.tabCount});
     }
     if (nextProps.startValidation && nextProps.startValidation !== false && this.props.startValidation !== nextProps.startValidation) {
-      if (this.debouncedUpdateFormData) this.debouncedUpdateFormData.flush();
       this.setState({checkValidation: true});
       this.validateForm(null, null, true, true, () => {
         //triggering the saveFormData or onSubmit when validation sets isFormValid to TRUE
@@ -3474,25 +3410,26 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               ? formatMessage(messages.personalizationTagsErrorMessage)
               : (errorType === TAG_BRACKET_COUNT_MISMATCH_ERROR ? formatMessage(globalMessages.unbalanacedCurlyBraces) : (val.errorMessage && ifError ? val.errorMessage : ''));
             if (styling === 'semantic') {
-              const isEmailStandaloneHighFreq = val.standalone && this.props.schema?.channel?.toUpperCase() === EMAIL;
-              if (isEmailStandaloneHighFreq) {
-                columns.push(
-                  <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
-                    <HighFreqInput
-                      id={val.id}
-                      errorMessage={errorMessageText}
-                      label={val.label}
-                      inductiveText={val.inductiveText}
-                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
-                      style={val.style ? val.style : {}}
-                      placeholder={val.placeholder}
-                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
-                      onBlur={(e) => this.handleFieldBlur(e, val)}
-                      value={value || ""}
-                      disabled={val.disabled}
-                      size={val.size || "default"}
-                    />
-                    {!aiContentBotDisabled && (
+              columns.push(
+              <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
+                  <CapInput
+                    id={val.id}
+                    errorMessage={errorMessageText}
+                    label={val.label}
+                    inductiveText={val.inductiveText}
+                    className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
+                    // fluid={val.fluid}
+                    style={val.style ? val.style : {}}
+                    placeholder={val.placeholder}
+                    onChange={(e) => this.updateFormData(e.target.value, val)}
+                    onBlur={(e) => this.handleFieldBlur(e, val)}
+                    value={value || ""}
+                    defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
+                    disabled={val.disabled}
+                    size={val.size || "default"}
+                  />
+                  {this.props.schema?.channel === EMAIL &&
+                    !aiContentBotDisabled && (
                       <CapAskAira.ContentGenerationBot
                         text={value || ""}
                         setText={this.handleSetText.bind(this, val)}
@@ -3501,48 +3438,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                         rootStyle={{
                           bottom: "0.2rem",
                           right: "0.2rem",
-                          left: "auto",
+                          left: "auto",
                         }}
                       />
                     )}
-                  </CapColumn>
-                );
-              } else {
-                columns.push(
-                <CapColumn key={val.id} span={val.width} offset={val.offset} style={val.style || {}}>
-                    <CapInput
-                      id={val.id}
-                      errorMessage={errorMessageText}
-                      label={val.label}
-                      inductiveText={val.inductiveText}
-                      className={`input-primary chart-name-input${ifError ? ' error' : ''}`}
-                      // fluid={val.fluid}
-                      style={val.style ? val.style : {}}
-                      placeholder={val.placeholder}
-                      onChange={(e) => this.updateFormData(e.target.value, val)}
-                      onBlur={(e) => this.handleFieldBlur(e, val)}
-                      value={value || ""}
-                      defaultValue={isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][val.id] : this.state.formData[val.id]}
-                      disabled={val.disabled}
-                      size={val.size || "default"}
-                    />
-                    {this.props.schema?.channel === EMAIL &&
-                      !aiContentBotDisabled && (
-                        <CapAskAira.ContentGenerationBot
-                          text={value || ""}
-                          setText={this.handleSetText.bind(this, val)}
-                          iconPlacement="float-br"
-                          iconSize="1.6rem"
-                          rootStyle={{
-                            bottom: "0.2rem",
-                            right: "0.2rem",
-                            left: "auto",
-                          }}
-                        />
-                      )}
-                  </CapColumn>
-                );
-              }
+                </CapColumn>
+              );
             }
             break;
@@ -3783,48 +3684,37 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isBEEAppEnableForCapTagList === false ||
               channelForCapTagList !== 'EMAIL'
             ) {
-              const isEmailStandaloneSubject = val.standalone && channelForCapTagList === EMAIL && val.id === 'template-subject';
-              const tagListProps = {
-                key: `input-${val.id}`,
-                inputId: val.id,
-                inputValue: this.state.formData[val.id] || '',
-                inputPlaceholder: val.placeholder || '',
-                inputErrorMessage: val.errorMessage && ifError ? val.errorMessage : '',
-                inputRequired: val.required || false,
-                inputDisabled: val.disabled || false,
-                headingText: val.label || '',
-                headingStyle: val.headingStyle || { marginTop: '3%', marginRight: '79%' },
-                headingType: "h4",
-                onTagSelect: (data) => this.callChildEvent(data, val, 'onTagSelect'),
-                onContextChange: this.props.onContextChange,
-                location: this.props.location,
-                tags: this.props.tags ? this.props.tags : [],
-                injectedTags: this.props.injectedTags ? this.props.injectedTags : {},
-                className: val.className ? val.className : '',
-                userLocale: this.state.translationLang,
-                selectedOfferDetails: this.props.selectedOfferDetails,
-                eventContextTags: this.props?.eventContextTags,
-                waitEventContextTags: this.props?.waitEventContextTags,
-                moduleFilterEnabled: moduleFilterEnabledForCapTagList,
-                containerStyle: val.style || {},
-                inputProps: val.inputProps || {},
-                showInput: val.showInput !== false,
-                showTagList: val.showTagList !== false,
-                restrictPersonalization: this.props.restrictPersonalization,
-              };
               columns.push(
                 <CapColumn key={`input-${val.id}`} offset={val.offset} span={val.width ? val.width : ''} style={val.style ? val.style : {marginBottom: '16px'}}>
-                  {isEmailStandaloneSubject ? (
-                    <HighFreqTagInput
-                      {...tagListProps}
-                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
-                    />
-                  ) : (
-                    <CapTagListWithInput
-                      {...tagListProps}
-                      inputOnChange={(e) => this.updateFormData(e.target.value, val)}
-                    />
-                  )}
+                  <CapTagListWithInput
+                    key={`input-${val.id}`}
+                    inputId={val.id}
+                    inputValue={this.state.formData[val.id] || ''}
+                    inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                    inputPlaceholder={val.placeholder || ''}
+                    inputErrorMessage={val.errorMessage && ifError ? val.errorMessage : ''}
+                    inputRequired={val.required || false}
+                    inputDisabled={val.disabled || false}
+                    headingText={val.label || ''}
+                    headingStyle={val.headingStyle || { marginTop: '3%', marginRight: '79%' }}
+                    headingType="h4"
+                    onTagSelect={(data) => this.callChildEvent(data, val, 'onTagSelect')}
+                    onContextChange={this.props.onContextChange}
+                    location={this.props.location}
+                    tags={this.props.tags ? this.props.tags : []}
+                    injectedTags={this.props.injectedTags ? this.props.injectedTags : {}}
+                    className={val.className ? val.className : ''}
+                    userLocale={this.state.translationLang}
+                    selectedOfferDetails={this.props.selectedOfferDetails}
+                    eventContextTags={this.props?.eventContextTags}
+                    waitEventContextTags={this.props?.waitEventContextTags}
+                    moduleFilterEnabled={moduleFilterEnabledForCapTagList}
+                    containerStyle={val.style || {}}
+                    inputProps={val.inputProps || {}}
+                    showInput={val.showInput !== false}
+                    showTagList={val.showTagList !== false}
+                    restrictPersonalization={this.props.restrictPersonalization}
+                  />
                 </CapColumn>
               );
             }

package/v2Containers/CreativesContainer/index.js CHANGED Viewed

@@ -1,48 +1,4 @@
 import React from 'react';
-// Isolated input for the email template name field.
-// Manages its own value in local state so keystrokes only re-render this
-// small component, not the entire CreativesContainer → Email → FormBuilder tree.
-class TemplateNameInputField extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { localValue: props.initialValue || '' };
-  }
-  componentDidUpdate(prevProps) {
-    // Sync from props only when the external value changed AND the user hasn't
-    // diverged from the previous prop value. This handles async data-load in edit
-    // mode without overwriting what the user is actively typing.
-    if (
-      prevProps.initialValue !== this.props.initialValue &&
-      this.state.localValue === (prevProps.initialValue || '')
-    ) {
-      this.setState({ localValue: this.props.initialValue || '' });
-    }
-  }
-  handleChange = (ev) => {
-    const { value } = ev.currentTarget;
-    this.setState({ localValue: value });
-    if (this.props.onChange) this.props.onChange(value);
-  };
-  handleBlur = () => {
-    if (this.props.onBlur) this.props.onBlur(this.state.localValue);
-  };
-  render() {
-    const { onChange: _onChange, initialValue: _initialValue, onBlur: _ob, ...rest } = this.props;
-    return (
-      <CapInput
-        {...rest}
-        value={this.state.localValue}
-        onChange={this.handleChange}
-        onBlur={this.handleBlur}
-      />
-    );
-  }
-}
 import PropTypes from 'prop-types';
 import {
   CAP_SPACE_16, CAP_SPACE_32, CAP_SPACE_56, CAP_SPACE_64,
@@ -1797,22 +1753,30 @@ export class Creatives extends React.Component {
       } />
   )
-  templateNameComponentInput = ({ formData, onFormDataChange, name }) => (
-    <TemplateNameInputField
-      initialValue={name}
-      suffix={<span />}
-      onBlur={(committedValue) => {
-        this.performTemplateNameUpdate(committedValue, formData, onFormDataChange);
-        this.setState({ isEditName: false });
-      }}
-      onChange={(value) => {
-        const isEmptyTemplateName = !value.trim();
-        if (this.state.isTemplateNameEmpty !== isEmptyTemplateName) {
-          this.setState({ isTemplateNameEmpty: isEmptyTemplateName });
-        }
-      }}
-    />
-  )
+  templateNameComponentInput = ({ formData, onFormDataChange, name }) => {
+    // Use local state for immediate UI feedback, fallback to prop value
+    const displayValue = this.state.localTemplateName !== '' ? this.state.localTemplateName : name;
+    return (
+      <CapInput
+        value={displayValue}
+        suffix={<span />}
+        onBlur={() => {
+          this.setState({
+            isEditName: false,
+            localTemplateName: '', // Clear local state on blur
+          }, () => {
+            this.showTemplateName({ formData, onFormDataChange });
+          });
+        }}
+        onChange={(ev) => {
+          const { value } = ev.currentTarget;
+          // Use optimized update for better performance
+          this.updateTemplateNameImmediately(value, formData, onFormDataChange);
+        }}
+      />
+    );
+  }
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const {

package/v2Containers/Templates/sagas.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { CapNotification } from '@capillarytech/cap-ui-library';
 // import { schema, normalize } from 'normalizr';
 import * as Api from '../../services/api';
 import * as types from './constants';
-import { saveCdnConfigs, removeAllCdnLocalStorageItems } from '../../utils/cdnTransformation';
+import { saveCdnConfigs, removeAllCdnLocalStorageItems, initCdnConfigFromEnv } from '../../utils/cdnTransformation';
 import { COPY_OF } from '../../constants/unified';
 import { ZALO_TEMPLATE_INFO_REQUEST } from '../Zalo/constants';
 import { getTemplateInfoById } from '../Zalo/saga';
@@ -107,6 +107,11 @@ export function* getOrgLevelCampaignSettings() {
 export function* getCdnTransformationConfig() {
   try {
+    // VAPT CAP-183204: prefer env vars injected via window.APP_ENV — avoids the
+    // API response that leaked CDN/S3 infrastructure details. Fallback to API
+    // keeps clusters that haven't received the env vars yet working during rollout.
+    if (initCdnConfigFromEnv()) return;
     const res = yield call(Api.getCdnTransformationConfig);
     if (res?.success && res?.status?.code === 200) {
       const cdnConfigs = res?.response;

package/v2Containers/Templates/tests/sagas.test.js CHANGED Viewed

@@ -54,10 +54,25 @@ jest.mock('@capillarytech/cap-ui-library', () => ({
 }));
 describe('getCdnTransformationConfig saga', () => {
-  it("handle valid response from api", () => {
+  afterEach(() => {
+    delete window.APP_ENV;
+  });
+  it("short-circuits to env config and skips the API call when window.APP_ENV is set", async () => {
+    const initSpy = jest.spyOn(cdnUtils, "initCdnConfigFromEnv").mockReturnValue(true);
+    const apiSpy = jest.spyOn(api, "getCdnTransformationConfig");
+    await expectSaga(getCdnTransformationConfig).run();
+    expect(initSpy).toHaveBeenCalled();
+    expect(apiSpy).not.toHaveBeenCalled();
+  });
+  it("handle valid response from api", async () => {
+    jest.spyOn(cdnUtils, "initCdnConfigFromEnv").mockReturnValue(false);
     const saveCdnConfigsSpy = jest.spyOn(cdnUtils, "saveCdnConfigs");
-    expectSaga(getCdnTransformationConfig)
+    await expectSaga(getCdnTransformationConfig)
       .provide([
         [
           call(api.getCdnTransformationConfig),
@@ -68,13 +83,14 @@ describe('getCdnTransformationConfig saga', () => {
     expect(saveCdnConfigsSpy).toHaveBeenCalled();
   });
-    it("handle error response from api", () => {
+    it("handle error response from api", async () => {
+      jest.spyOn(cdnUtils, "initCdnConfigFromEnv").mockReturnValue(false);
       const removeAllCdnLocalStorageItemsSpy = jest.spyOn(
         cdnUtils,
         "removeAllCdnLocalStorageItems"
       );
-      expectSaga(getCdnTransformationConfig)
+      await expectSaga(getCdnTransformationConfig)
         .provide([
           [
             call(api.getCdnTransformationConfig),
@@ -85,7 +101,8 @@ describe('getCdnTransformationConfig saga', () => {
       expect(removeAllCdnLocalStorageItemsSpy).toHaveBeenCalled();
     });
-    it("remove localStorage items when an error is thrown", () => {
+    it("remove localStorage items when an error is thrown", async () => {
+        jest.spyOn(cdnUtils, "initCdnConfigFromEnv").mockReturnValue(false);
         const saveCdnConfigsSpy = jest.spyOn(cdnUtils, "saveCdnConfigs").mockImplementation(()=>{
             throw new Error()
         });
@@ -94,7 +111,7 @@ describe('getCdnTransformationConfig saga', () => {
             "removeAllCdnLocalStorageItems"
           );
-        expectSaga(getCdnTransformationConfig)
+        await expectSaga(getCdnTransformationConfig)
           .provide([
             [
               call(api.getCdnTransformationConfig),