@capillarytech/creatives-library 8.0.359-alpha.0 → 8.0.360-alpha.0

package/v2Components/FormBuilder/index.js

@@ -79,6 +79,69 @@ 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);
@@ -352,6 +415,7 @@ 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
@@ -3410,26 +3474,25 @@ 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') {
-              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 && (
+              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 && (
                       <CapAskAira.ContentGenerationBot
                         text={value || ""}
                         setText={this.handleSetText.bind(this, val)}
@@ -3438,12 +3501,48 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                         rootStyle={{
                           bottom: "0.2rem",
                           right: "0.2rem",
-                          left: "auto",                           
+                          left: "auto",
                         }}
                       />
                     )}
-                </CapColumn>
-              );
+                  </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>
+                );
+              }
             }
             break;
 
@@ -3684,37 +3783,48 @@ 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'}}>
-                  <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}
-                  />
+                  {isEmailStandaloneSubject ? (
+                    <HighFreqTagInput
+                      {...tagListProps}
+                      onCommit={(newValue) => this.performFormDataUpdate(newValue, val)}
+                    />
+                  ) : (
+                    <CapTagListWithInput
+                      {...tagListProps}
+                      inputOnChange={(e) => this.updateFormData(e.target.value, val)}
+                    />
+                  )}
                 </CapColumn>
               );
             }

package/v2Components/TestAndPreviewSlidebox/index.js

@@ -69,8 +69,8 @@ const TestAndPreviewSlidebox = (props) => {
 
 TestAndPreviewSlidebox.propTypes = {
   // Channel prop - supports all channels
-  channel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH]),
-  currentChannel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH]), // Alternative prop name for backward compatibility
+  channel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.ZALO, CHANNELS.WEBPUSH]),
+  currentChannel: PropTypes.oneOf([CHANNELS.EMAIL, CHANNELS.SMS, CHANNELS.RCS, CHANNELS.WHATSAPP, CHANNELS.INAPP, CHANNELS.MOBILEPUSH, CHANNELS.VIBER, CHANNELS.ZALO, CHANNELS.WEBPUSH]), // Alternative prop name for backward compatibility
   // All original props are passed through
   show: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,

package/v2Containers/App/constants.js

@@ -124,3 +124,6 @@ export const LOYALTY = 'loyalty';
 export const FAILURE = 'FAILURE';
 export const DATE_DISPLAY_FORMAT = 'D MMM YYYY';
 export const TIME_DISPLAY_FORMAT = 'hh:mm A';
+export const EXTERNAL_URL = 'EXTERNAL_URL';
+export const URL = 'URL';
+export const SITE_URL = 'SITE_URL';

package/v2Containers/App/tests/constants.test.js

@@ -0,0 +1,61 @@
+/**
+ * Tests for App container constants
+ *
+ * Covers newly added URL type constants: EXTERNAL_URL, URL, SITE_URL
+ */
+
+import {
+  EXTERNAL_URL,
+  URL,
+  SITE_URL,
+  LOYALTY,
+  FAILURE,
+  DATE_DISPLAY_FORMAT,
+  TIME_DISPLAY_FORMAT,
+} from '../constants';
+
+describe('App constants', () => {
+  describe('URL type constants', () => {
+    it('should export EXTERNAL_URL with correct value', () => {
+      expect(EXTERNAL_URL).toBe('EXTERNAL_URL');
+    });
+
+    it('should export URL with correct value', () => {
+      expect(URL).toBe('URL');
+    });
+
+    it('should export SITE_URL with correct value', () => {
+      expect(SITE_URL).toBe('SITE_URL');
+    });
+
+    it('should have distinct values for all three URL constants', () => {
+      expect(EXTERNAL_URL).not.toBe(URL);
+      expect(EXTERNAL_URL).not.toBe(SITE_URL);
+      expect(URL).not.toBe(SITE_URL);
+    });
+
+    it('should be strings', () => {
+      expect(typeof EXTERNAL_URL).toBe('string');
+      expect(typeof URL).toBe('string');
+      expect(typeof SITE_URL).toBe('string');
+    });
+  });
+
+  describe('Other existing constants still exported correctly', () => {
+    it('should export LOYALTY', () => {
+      expect(LOYALTY).toBe('loyalty');
+    });
+
+    it('should export FAILURE', () => {
+      expect(FAILURE).toBe('FAILURE');
+    });
+
+    it('should export DATE_DISPLAY_FORMAT', () => {
+      expect(DATE_DISPLAY_FORMAT).toBe('D MMM YYYY');
+    });
+
+    it('should export TIME_DISPLAY_FORMAT', () => {
+      expect(TIME_DISPLAY_FORMAT).toBe('hh:mm A');
+    });
+  });
+});

package/v2Containers/CreativesContainer/index.js

@@ -1,4 +1,48 @@
 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,
@@ -1753,30 +1797,22 @@ export class Creatives extends React.Component {
       } />
   )
 
-  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);
-        }}
-      />
-    );
-  }
+  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 });
+        }
+      }}
+    />
+  )
 
   showTemplateName = ({ formData, onFormDataChange }) => { //gets called from email/index after template data is fetched
     const {

package/v2Containers/Templates/index.js

@@ -105,6 +105,9 @@ import {
   VIBER as VIBER_CHANNEL,
   FACEBOOK as FACEBOOK_CHANNEL,
   CREATE,
+  EXTERNAL_URL,
+  URL,
+  SITE_URL,
 } from '../App/constants';
 import {MAX_WHATSAPP_TEMPLATES, WARNING_WHATSAPP_TEMPLATES , ACCOUNT_MAPPING_ON_CHANNEL, noFilteredWhatsappZaloTemplatesTitle, noFilteredWhatsappZaloTemplatesDesc, noApprovedWhatsappZaloTemplatesTitle, noApprovedWhatsappTemplatesDesc, zaloDescIllustration, noApprovedRcsTemplatesTitle, noApprovedRcsTemplatesDesc, ARCHIVE_STATUS_ACTIVE, ARCHIVE_STATUS_ARCHIVED, ARCHIVE_REFRESH_TYPE_ARCHIVE, ARCHIVE_REFRESH_TYPE_UNARCHIVE} from './constants';
 import { COPY_OF, EMBEDDED } from '../../constants/unified';
@@ -1430,6 +1433,73 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         };
       }
 
+      case WEBPUSH: {
+        // WebPush content is stored in creatives format (brandIcon, onClickAction, ctas)
+        // Must be transformed to campaign/test-message format matching getTemplateContent() in WebPush/Create/index.js
+        const webpushContent = get(baseContent, 'content.webpush', {});
+        const {
+          title = '',
+          message = '',
+          brandIcon,
+          iconImageUrl: existingIconImageUrl,
+          onClickAction,
+          cta: existingCta,
+          image,
+          ctas: rawCtas,
+          expandableDetails: existingExpandable,
+        } = webpushContent;
+        const accountId = get(template, 'definition.accountId', null);
+        const templateName = template?.name || '';
+
+        // iconImageUrl stored as brandIcon in creatives format
+        const iconImageUrl = brandIcon || existingIconImageUrl || undefined;
+
+        // cta stored as onClickAction in creatives format (type: URL|SITE_URL, url)
+        // or already as cta in campaign format (type: EXTERNAL_URL|SITE_URL, actionLink)
+        let cta = null;
+        if (onClickAction) {
+          const ctaType = onClickAction.type === URL ? EXTERNAL_URL : (onClickAction.type || SITE_URL);
+          cta = { type: ctaType, actionLink: onClickAction.url || '' };
+        } else if (existingCta) {
+          cta = { type: existingCta.type || EXTERNAL_URL, actionLink: existingCta.actionLink || '' };
+        }
+
+        // expandableDetails: image → media[], ctas[] → mapped ctas
+        let expandableDetails = null;
+        const hasImage = !!image;
+        const hasCtas = Array.isArray(rawCtas) && rawCtas.length > 0;
+        if (hasImage || hasCtas) {
+          expandableDetails = {
+            media: hasImage ? [{ url: image, type: IMAGE }] : [],
+            ctas: hasCtas ? rawCtas.map((ctaItem) => ({
+              type: ctaItem?.type === URL ? EXTERNAL_URL : (ctaItem?.type || EXTERNAL_URL),
+              action: ctaItem?.action || '',
+              title: ctaItem?.actionText || ctaItem?.title || '',
+              actionLink: ctaItem?.actionLink || '',
+            })) : [],
+          };
+        } else if (existingExpandable) {
+          expandableDetails = {
+            media: existingExpandable?.media || [],
+            ctas: existingExpandable?.ctas || [],
+          };
+        }
+
+        return {
+          channel: WEBPUSH,
+          accountId,
+          content: {
+            title,
+            message,
+            ...(iconImageUrl ? { iconImageUrl } : {}),
+            ...(cta ? { cta } : {}),
+            ...(expandableDetails ? { expandableDetails } : {}),
+          },
+          messageSubject: templateName || title,
+          offers: [],
+        };
+      }
+
       default:
         console.warn(`Unsupported channel for content extraction: ${channelUpper}`);
         return null;
@@ -1442,7 +1512,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
    * @returns {Boolean} - True if channel supports Test and Preview
    */
   isTestAndPreviewSupported = () => {
-    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO];
+    const supportedChannels = [EMAIL, SMS, INAPP, MOBILE_PUSH, VIBER, ZALO, WEBPUSH];
     return supportedChannels.includes(this.state.channel.toUpperCase());
   }
 
@@ -2002,7 +2072,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
           // Show preview icon only for channels that don't support Test and Preview
           (() => {
             // Channels that have Test and Preview integrated
-            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO];
+            const testAndPreviewChannels = [EMAIL, SMS, WHATSAPP, RCS, INAPP, MOBILE_PUSH, VIBER, ZALO, WEBPUSH];
             const isTestAndPreviewSupported = testAndPreviewChannels.includes(currentChannel.toUpperCase());
 
             // Don't show preview icon if channel supports Test and Preview

package/v2Containers/Templates/sagas.js

@@ -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

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