@capillarytech/creatives-library 8.0.156 → 8.0.158

package/config/app.js

@@ -20,7 +20,7 @@ const config = {
     accountConfig: (strs, accountId) => `${window.location.origin}/org/config/AccountAdd?q=a&channelId=2&accountId=${accountId}&edit=1`,
   },
   development: {
-    api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/creatives',
+    api_endpoint: 'http://localhost:2022/arya/api/v1/creatives',
     campaigns_api_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/campaigns',
     campaigns_api_org_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/iris/v2/org/campaign',
     auth_endpoint: 'https://crm-nightly-new.cc.capillarytech.com/arya/api/v1/auth',

package/index.js

@@ -103,7 +103,13 @@ import Rcs from './v2Containers/Rcs';
 import rcsReducer from './v2Containers/Rcs/reducer';
 import rcsSaga from './v2Containers/Rcs/sagas';
 
-//API Imports 
+// Utils
+import {
+  convertMediaTagsToUrls,
+  convertUrlsToMediaTags,
+} from './utils/transformTemplateConfig';
+
+//API Imports
 import { updateMetaConfig } from './services/api';
 
 export {default as Ebill} from './v2Containers/Ebill';
@@ -184,5 +190,7 @@ export { CapContainer,
   RcsContainer,
   ZaloContainer,
   InAppContainer,
+  convertMediaTagsToUrls,
+  convertUrlsToMediaTags,
   updateMetaConfig,
 };

package/package.json

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

package/services/api.js

@@ -329,6 +329,11 @@ export const getTemplateDetails = async ({id, channel}) => {
   return { ...compressedTemplatesData, response: decompressData};
 };
 
+export const getMediaDetails = async ({ id }) => {
+  const url = `${API_ENDPOINT}/media/${id}`;
+  return request(url, getAPICallObject('GET'));
+};
+
 export const getAllTemplates = async ({channel, queryParams = {}}) => {
   const url = getUrlWithQueryParams({
     url: `${API_ENDPOINT}/templates/v1/${channel}?`,

package/services/tests/api.test.js

@@ -24,6 +24,7 @@ import {
   createTestMessageMeta,
   updateTestMessageMeta,
   updateMetaConfig,
+  getMediaDetails,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -823,3 +824,28 @@ describe('updateMetaConfig', () => {
     });
   });
 });
+
+describe('getMediaDetails', () => {
+  it('should return correct response on success', async () => {
+    global.fetch.mockReturnValue(Promise.resolve({
+      status: 200,
+      json: () => Promise.resolve({
+        status: 200,
+        response: 'test media details',
+      }),
+    }));
+    const result = await getMediaDetails({ id: 'testId' });
+    expect(result).toEqual({
+      status: 200,
+      response: 'test media details',
+    });
+  });
+
+  it('should handle fetch failure', async () => {
+    global.fetch.mockRejectedValue({ error: 'Network error' });
+    const result = await getMediaDetails({ id: 'testId' });
+    expect(result).toEqual({
+      error: 'Network error',
+    });
+  });
+});

package/utils/tests/transformTemplateConfig.test.js

@@ -0,0 +1,290 @@
+
+import {
+  transformTemplateConfigWithMediaDetails,
+  convertMediaTagsToUrls,
+  convertUrlsToMediaTags,
+  TRANSFORM_DIRECTION,
+  MEDIA_CONTENT_TYPE,
+} from '../transformTemplateConfig';
+import { getMediaDetails } from '../../services/api';
+import { WHATSAPP } from '../../v2Containers/Whatsapp/constants';
+
+jest.mock('../../services/api', () => ({
+  getMediaDetails: jest.fn(),
+}));
+
+const mockUrlToIdMapping = {
+  'http://example.com/image1.png': 'id1',
+  'http://example.com/video.mp4': 'id2',
+};
+
+const mockIdToUrlMapping = {
+  id1: 'http://example.com/image1.png',
+  id2: 'http://example.com/video.mp4',
+};
+
+describe('transformTemplateConfig', () => {
+  beforeEach(() => {
+    getMediaDetails.mockClear();
+    // eslint-disable-next-line no-console
+    console.warn = jest.fn();
+    // eslint-disable-next-line no-console
+    console.error = jest.fn();
+    // eslint-disable-next-line no-console
+    console.log = jest.fn();
+  });
+
+  describe('transformTemplateConfigWithMediaDetails', () => {
+    it('should return original config for non-whatsapp channel', async () => {
+      const templateConfig = { cards: [{ media: { url: 'some_url' } }] };
+      const result = await transformTemplateConfigWithMediaDetails(
+        templateConfig,
+        'SMS',
+        'media123',
+      );
+      expect(result).toEqual(templateConfig);
+      expect(getMediaDetails).not.toHaveBeenCalled();
+    });
+
+    it('should return original config if no cards are present', async () => {
+      const templateConfig = { cards: [] };
+      const result = await transformTemplateConfigWithMediaDetails(
+        templateConfig,
+        WHATSAPP,
+        'media123',
+      );
+      expect(result).toEqual(templateConfig);
+    });
+
+    it('should return original config and warn if mediaDetailsId is missing', async () => {
+      const templateConfig = { cards: [{ media: { url: 'some_url' } }] };
+      const result = await transformTemplateConfigWithMediaDetails(
+        templateConfig,
+        WHATSAPP,
+        null,
+      );
+      expect(result).toEqual(templateConfig);
+      // eslint-disable-next-line no-console
+      expect(console.warn).toHaveBeenCalledWith(
+        'mediaDetailsId is required for transformTemplateConfigWithMediaDetails',
+      );
+    });
+
+    it('should handle forward transformation (URL to Tag)', async () => {
+      getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+      const templateConfig = {
+        cards: [
+          { media: { url: 'http://example.com/image1.png' } },
+          { media: { url: 'http://example.com/video.mp4' } },
+        ],
+      };
+
+      const result = await transformTemplateConfigWithMediaDetails(
+        templateConfig,
+        WHATSAPP,
+        'media123',
+      );
+
+      expect(result.cards[0].media.url).toBe('{{media_content(id1)}}');
+      expect(result.cards[1].media.url).toBe('{{media_content(id2)}}');
+    });
+
+    it('should handle reverse transformation (Tag to URL)', async () => {
+      getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+      const templateConfig = {
+        cards: [
+          { media: { url: '{{media_content(id1)}}' } },
+          { media: { url: '{{media_content(id2)}}' } },
+        ],
+      };
+
+      const result = await transformTemplateConfigWithMediaDetails(
+        templateConfig,
+        WHATSAPP,
+        'media123',
+      );
+
+      expect(result.cards[0].media.url).toBe(mockIdToUrlMapping.id1);
+      expect(result.cards[1].media.url).toBe(mockIdToUrlMapping.id2);
+    });
+
+    it('should handle smart transformation for mixed content', async () => {
+      getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+      const templateConfig = {
+        cards: [
+          { media: { url: 'http://example.com/image1.png' } }, // URL
+          { media: { url: '{{media_content(id2)}}' } }, // Tag
+        ],
+      };
+
+      const result = await transformTemplateConfigWithMediaDetails(
+        templateConfig,
+        WHATSAPP,
+        'media123',
+      );
+
+      expect(result.cards[0].media.url).toBe('{{media_content(id1)}}');
+      expect(result.cards[1].media.url).toBe(mockIdToUrlMapping.id2);
+    });
+
+    it('should force forward transformation', async () => {
+        getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+        const templateConfig = {
+          cards: [{ media: { url: 'http://example.com/image1.png' } }],
+        };
+
+        const result = await transformTemplateConfigWithMediaDetails(
+          templateConfig,
+          WHATSAPP,
+          'media123',
+          { forceDirection: TRANSFORM_DIRECTION.FORWARD },
+        );
+
+        expect(result.cards[0].media.url).toBe('{{media_content(id1)}}');
+    });
+
+    it('should force reverse transformation', async () => {
+        getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+        const templateConfig = {
+          cards: [{ media: { url: '{{media_content(id1)}}' } }],
+        };
+
+        const result = await transformTemplateConfigWithMediaDetails(
+          templateConfig,
+          WHATSAPP,
+          'media123',
+          { forceDirection: TRANSFORM_DIRECTION.REVERSE },
+        );
+
+        expect(result.cards[0].media.url).toBe(mockIdToUrlMapping.id1);
+    });
+
+    it('should handle API failure gracefully', async () => {
+        const error = new Error('API Error');
+        getMediaDetails.mockRejectedValue(error);
+        const templateConfig = {
+            cards: [{ media: { url: 'http://example.com/image1.png' } }],
+        };
+
+        const result = await transformTemplateConfigWithMediaDetails(
+            templateConfig,
+            WHATSAPP,
+            'media123',
+        );
+
+        // Fallback logic does not transform
+        expect(result.cards[0].media.url).toBe('http://example.com/image1.png');
+        // eslint-disable-next-line no-console
+        expect(console.error).toHaveBeenCalledWith(
+            'Failed to fetch media details for transformation:',
+            error,
+        );
+    });
+
+    it('should warn when no media mapping is found for a URL', async () => {
+        getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+        const templateConfig = {
+          cards: [{ media: { url: 'http://example.com/unmapped.jpg' } }],
+        };
+
+        await transformTemplateConfigWithMediaDetails(
+          templateConfig,
+          WHATSAPP,
+          'media123',
+        );
+
+        // eslint-disable-next-line no-console
+        expect(console.warn).toHaveBeenCalledWith(
+          'No media detail ID found for URL: http://example.com/unmapped.jpg',
+        );
+    });
+
+    it('should warn when no URL is found for a media ID', async () => {
+        getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+        const templateConfig = {
+          cards: [{ media: { url: '{{media_content(unmapped_id)}}' } }],
+        };
+
+        await transformTemplateConfigWithMediaDetails(
+          templateConfig,
+          WHATSAPP,
+          'media123',
+        );
+
+        // eslint-disable-next-line no-console
+        expect(console.warn).toHaveBeenCalledWith(
+          'No URL found for media ID: unmapped_id',
+        );
+    });
+
+    it('should handle cards with non-string media url gracefully', async () => {
+      getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+      const templateConfig = {
+        cards: [
+          { media: { url: 123 } },
+        ],
+      };
+      const result = await transformTemplateConfigWithMediaDetails(templateConfig, WHATSAPP, 'media123');
+      expect(result.cards[0].media.url).toBe(123);
+      expect(console.warn).toHaveBeenCalledWith('No media detail ID found for URL: 123');
+    });
+
+    it('should use fallback to extract media id when API fails for forced forward transform', async () => {
+      getMediaDetails.mockRejectedValue(new Error('API Error'));
+      const templateConfig = {
+        cards: [{ media: { url: '{{media_content(fallback_id)}}' } }],
+      };
+      const result = await transformTemplateConfigWithMediaDetails(
+        templateConfig,
+        WHATSAPP,
+        'media123',
+        { forceDirection: TRANSFORM_DIRECTION.FORWARD },
+      );
+      expect(result.cards[0].media.url).toBe('{{media_content(fallback_id)}}');
+      expect(console.error).toHaveBeenCalledWith(
+        'Failed to fetch media details for transformation:',
+        expect.any(Error),
+      );
+    });
+
+    it('should return original config if media details mapping is empty', async () => {
+      getMediaDetails.mockResolvedValue({ response: {} });
+      const templateConfig = {
+        cards: [{ media: { url: 'http://example.com/image1.png' } }],
+      };
+      const result = await transformTemplateConfigWithMediaDetails(
+        templateConfig,
+        WHATSAPP,
+        'media123',
+      );
+      expect(result).toEqual(templateConfig);
+      expect(console.warn).toHaveBeenCalledWith('No media details mapping found in API response');
+    });
+  });
+
+  describe('convenience wrappers', () => {
+    it('convertUrlsToMediaTags should force forward direction', async () => {
+        getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+        const templateConfig = {
+          cards: [{ media: { url: 'http://example.com/image1.png' } }],
+        };
+
+        const result = await convertUrlsToMediaTags(templateConfig, WHATSAPP, 'media123');
+
+        expect(getMediaDetails).toHaveBeenCalledWith({ id: 'media123' });
+        expect(result.cards[0].media.url).toBe('{{media_content(id1)}}');
+    });
+
+    it('convertMediaTagsToUrls should force reverse direction', async () => {
+        getMediaDetails.mockResolvedValue({ response: mockUrlToIdMapping });
+        const templateConfig = {
+          cards: [{ media: { url: '{{media_content(id1)}}' } }],
+        };
+
+        const result = await convertMediaTagsToUrls(templateConfig, WHATSAPP, 'media123');
+
+        expect(getMediaDetails).toHaveBeenCalledWith({ id: 'media123' });
+        expect(result.cards[0].media.url).toBe(mockIdToUrlMapping.id1);
+    });
+  });
+});

package/utils/transformTemplateConfig.js

@@ -0,0 +1,253 @@
+import cloneDeep from 'lodash/cloneDeep';
+import { getMediaDetails } from '../services/api';
+import { WHATSAPP } from '../v2Containers/Whatsapp/constants';
+
+// Enum-like constants to avoid magic strings
+export const MEDIA_CONTENT_TYPE = {
+  MIXED: 'mixed',
+  TAGS: 'tags',
+  URLS: 'urls',
+  NONE: 'none',
+};
+
+export const TRANSFORM_DIRECTION = {
+  FORWARD: 'forward',
+  REVERSE: 'reverse',
+  SMART: 'smart',
+};
+
+/**
+ * Helper function to extract media ID from URL patterns
+ * @param {string} url - The media URL to extract ID from
+ * @returns {string|null} - Extracted media ID or null if not found
+ */
+function extractMediaIdFromUrl(url) {
+  if (!url || typeof url !== 'string') {
+    return null;
+  }
+
+
+  // Already contains media_content pattern - extract the ID
+  const mediaContentMatch = url.match(/\{\{media_content\(([^)]+)\)\}\}/);
+  if (mediaContentMatch) {
+    return mediaContentMatch[1];
+  }
+
+  return null;
+}
+
+/**
+ * Helper function to detect if template config contains media_content tags or URLs
+ * @param {object} templateConfig The template configuration to analyze
+ * @returns {string} MEDIA_CONTENT_TYPE.TAGS if contains media_content tags, MEDIA_CONTENT_TYPE.URLS if contains URLs, MEDIA_CONTENT_TYPE.MIXED if both, MEDIA_CONTENT_TYPE.NONE if neither
+ */
+function detectMediaContentType(templateConfig) {
+  if (!templateConfig?.cards?.length) {
+    return MEDIA_CONTENT_TYPE.NONE;
+  }
+
+  let hasUrls = false;
+  let hasTags = false;
+
+  templateConfig.cards.forEach(card => {
+    if (card?.media?.url) {
+      const url = card.media.url;
+      if (extractMediaIdFromTag(url)) {
+        hasTags = true;
+      } else if (extractMediaIdFromUrl(url)) {
+        hasUrls = true;
+      } else {
+        // Regular URL that doesn't contain extractable media ID
+        hasUrls = true;
+      }
+    }
+  });
+
+  if (hasUrls && hasTags) return MEDIA_CONTENT_TYPE.MIXED;
+  if (hasTags) return MEDIA_CONTENT_TYPE.TAGS;
+  if (hasUrls) return MEDIA_CONTENT_TYPE.URLS;
+  return MEDIA_CONTENT_TYPE.NONE;
+}
+
+/**
+ * Smart bidirectional transformation function that automatically detects and applies the correct transformation.
+ * This is the recommended function to use when you have a media details ID.
+ *
+ * AUTOMATIC DETECTION:
+ * - If template contains URLs → converts to {{media_content(id)}} tags
+ * - If template contains {{media_content(id)}} tags → converts to URLs
+ * - If template contains mixed content → applies appropriate transformation per card
+ *
+ * @param {object} templateConfig The template configuration to transform.
+ * @param {string} channel The channel for which to transform the config.
+ * @param {string} mediaDetailsId The ID to use when calling getMediaDetails API.
+ * @param {object} options Additional options for the transformation.
+ * @param {string} options.forceDirection Force transformation direction: 'forward' (URLs→tags) or 'reverse' (tags→URLs).
+ * @returns {Promise<object>} Promise that resolves to the transformed template configuration.
+ */
+export async function transformTemplateConfigWithMediaDetails(templateConfig, channel, mediaDetailsId, options = {}) {
+  if (channel !== WHATSAPP || !templateConfig?.cards?.length) {
+    return templateConfig;
+  }
+
+  if (!mediaDetailsId) {
+    console.warn('mediaDetailsId is required for transformTemplateConfigWithMediaDetails');
+    return templateConfig;
+  }
+
+  const { forceDirection = null } = options;
+
+  // Detect what type of content we have
+  const contentType = detectMediaContentType(templateConfig);
+
+  if (contentType === MEDIA_CONTENT_TYPE.NONE) {
+    console.log('No media content detected, returning original config');
+    return templateConfig;
+  }
+
+  // Determine transformation direction
+  let transformDirection;
+  if (forceDirection) {
+    transformDirection = forceDirection;
+    console.log(`Forced transformation direction: ${transformDirection}`);
+  } else {
+    // Auto-detect based on content
+    if (contentType === MEDIA_CONTENT_TYPE.URLS) {
+      transformDirection = TRANSFORM_DIRECTION.FORWARD; // URLs → tags
+      console.log('Detected URLs, applying forward transformation (URLs → tags)');
+    } else if (contentType === MEDIA_CONTENT_TYPE.TAGS) {
+      transformDirection = TRANSFORM_DIRECTION.REVERSE; // tags → URLs
+      console.log('Detected media_content tags, applying reverse transformation (tags → URLs)');
+    } else if (contentType === MEDIA_CONTENT_TYPE.MIXED) {
+      transformDirection = TRANSFORM_DIRECTION.SMART; // Handle mixed content intelligently
+      console.log('Detected mixed content, applying smart transformation');
+    }
+  }
+
+  const newConfig = cloneDeep(templateConfig);
+  try {
+    console.log(`Fetching media details for ${transformDirection} transformation, ID: ${mediaDetailsId}`);
+
+    // Fetch media details mapping from API
+    const response = await getMediaDetails({ id: mediaDetailsId })
+
+    // Extract the URL-to-ID mapping from the API response
+    const urlToIdMapping = response?.response || {};
+
+    if (Object.keys(urlToIdMapping).length === 0) {
+      console.warn('No media details mapping found in API response');
+      return newConfig;
+    }
+
+    // Create reverse mapping: ID -> URL (for reverse transformations)
+    const idToUrlMapping = {};
+    Object.entries(urlToIdMapping).forEach(([url, mediaId]) => {
+      idToUrlMapping[mediaId] = url;
+    });
+
+    console.log(`Processing ${Object.keys(urlToIdMapping).length} media mappings`);
+
+    // Apply transformations based on direction
+    newConfig?.cards?.forEach(card => {
+      if (card?.media && card?.media?.url) {
+        const currentUrl = card.media.url;
+
+        if (transformDirection === TRANSFORM_DIRECTION.FORWARD ||
+           (transformDirection === TRANSFORM_DIRECTION.SMART && !extractMediaIdFromTag(currentUrl))) {
+          // Forward transformation: URL → tag
+          const mediaDetailId = urlToIdMapping[currentUrl];
+          if (mediaDetailId) {
+            console.log(`Forward: ${currentUrl} → {{media_content(${mediaDetailId})}}`);
+            card.media.url = `{{media_content(${mediaDetailId})}}`;
+          } else {
+            console.warn(`No media detail ID found for URL: ${currentUrl}`);
+          }
+        } else if (transformDirection === TRANSFORM_DIRECTION.REVERSE ||
+                  (transformDirection === TRANSFORM_DIRECTION.SMART && extractMediaIdFromTag(currentUrl))) {
+          // Reverse transformation: tag → URL
+          const mediaId = extractMediaIdFromTag(currentUrl);
+          if (mediaId) {
+            const actualUrl = idToUrlMapping[mediaId];
+            if (actualUrl) {
+              console.log(`Reverse: {{media_content(${mediaId})}} → ${actualUrl}`);
+              card.media.url = actualUrl;
+            } else {
+              console.warn(`No URL found for media ID: ${mediaId}`);
+            }
+          }
+        }
+      }
+    });
+
+    return newConfig;
+
+  } catch (error) {
+    console.error('Failed to fetch media details for transformation:', error);
+
+    // Fallback: try to extract/convert what we can without API
+    console.log('Falling back to URL extraction method');
+    newConfig.cards.forEach(card => {
+      if (card.media && card.media.url) {
+        if (transformDirection === TRANSFORM_DIRECTION.FORWARD) {
+          const extractedId = extractMediaIdFromUrl(card.media.url);
+          if (extractedId) {
+            card.media.url = `{{media_content(${extractedId})}}`;
+          }
+        }
+        // For reverse transformation, we can't do much without the API mapping
+      }
+    });
+
+    // cleanup the newConfig
+    delete newConfig.accessToken;
+
+    return newConfig;
+  }
+}
+
+/**
+ * Helper function to extract media ID from media_content tags
+ * @param {string} url - The URL containing media_content tag
+ * @returns {string|null} - Extracted media ID or null if not found
+ */
+function extractMediaIdFromTag(url) {
+  if (!url || typeof url !== 'string') {
+    return null;
+  }
+
+  // Extract media ID from {{media_content(id)}} pattern
+  const tagMatch = url.match(/\{\{media_content\(([^)]+)\)\}\}/);
+  return tagMatch ? tagMatch[1] : null;
+}
+
+/**
+ * Convenience function for reverse transformation: fetches media details and converts tags to URLs in one call.
+ * This function forces reverse transformation direction. For automatic detection, use transformTemplateConfigWithMediaDetails.
+ * @param {object} templateConfig The template configuration containing media_content tags.
+ * @param {string} channel The channel for which to transform the config.
+ * @param {string} mediaDetailsId The ID to use when calling getMediaDetails API.
+ * @param {object} options Additional options for the transformation.
+ * @returns {Promise<object>} Promise that resolves to the template config with actual URLs.
+ */
+export async function convertMediaTagsToUrls(templateConfig, channel, mediaDetailsId, options = {}) {
+  return transformTemplateConfigWithMediaDetails(templateConfig, channel, mediaDetailsId, {
+    ...options,
+    forceDirection: TRANSFORM_DIRECTION.REVERSE
+  });
+}
+
+/**
+ * Convenience function for forward transformation: fetches media details and converts URLs to tags in one call.
+ * This function forces forward transformation direction. For automatic detection, use transformTemplateConfigWithMediaDetails.
+ * @param {object} templateConfig The template configuration containing URLs.
+ * @param {string} channel The channel for which to transform the config.
+ * @param {string} mediaDetailsId The ID to use when calling getMediaDetails API.
+ * @param {object} options Additional options for the transformation.
+ * @returns {Promise<object>} Promise that resolves to the template config with media_content tags.
+ */
+export async function convertUrlsToMediaTags(templateConfig, channel, mediaDetailsId, options = {}) {
+  return transformTemplateConfigWithMediaDetails(templateConfig, channel, mediaDetailsId, {
+    ...options,
+    forceDirection: TRANSFORM_DIRECTION.FORWARD
+  });
+}

package/utils/whatsappMediaUtils.js

@@ -0,0 +1,44 @@
+/**
+ * Utility functions for handling WhatsApp media URL transformations
+ */
+
+/**
+ * Extracts creative ID from media URL pattern
+ * @param {string} mediaUrl - URL with pattern {{media_content(<creativeId>_<mediaDetailId>)}}
+ * @returns {string|null} - Extracted creative ID or null if not found
+ */
+export const extractCreativeIdFromMediaUrl = (mediaUrl) => {
+  if (!mediaUrl || typeof mediaUrl !== 'string') {
+    return null;
+  }
+
+  // Extract creativeId from pattern: {{media_content(<creativeId>_<mediaDetailId>)}}
+  const match = mediaUrl.match(/\{\{media_content\(([^_]+)_[^)]+\)\}\}/);
+  return match ? match[1] : null;
+};
+
+/**
+ * Creates URL mapping from API response format to template pattern format
+ * @param {Object} mediaDetails - API response with format {url: "mediaDetailId_creativeId"}
+ * @returns {Object} - Mapping object {creativeId_mediaDetailId: url}
+ */
+export const createMediaUrlMapping = (mediaDetails) => {
+  const mediaUrlMap = {};
+
+  if (!mediaDetails || typeof mediaDetails !== 'object') {
+    return mediaUrlMap;
+  }
+
+  Object.keys(mediaDetails).forEach(url => {
+    const value = mediaDetails[url];
+    // API response format: "mediaDetailId_creativeId"
+    // We need to reverse it to match our pattern: "creativeId_mediaDetailId"
+    if (typeof value === 'string' && value.includes('_')) {
+      const [mediaDetailId, creativeId] = value.split('_');
+      const templatePattern = `${mediaDetailId}_${creativeId}`;
+      mediaUrlMap[templatePattern] = url;
+    }
+  });
+
+  return mediaUrlMap;
+};

package/v2Containers/CreativesContainer/index.js

@@ -81,7 +81,7 @@ const SlideBoxWrapper = styled.div`
 export class Creatives extends React.Component {
   constructor(props) {
     super(props);
-    
+
     const initialSlidBoxContent = this.getSlideBoxContent({ mode: props.creativesMode, templateData: props.templateData, isFullMode: props.isFullMode });
 
     this.state = {
@@ -954,6 +954,7 @@ export class Creatives extends React.Component {
             default:
               break;
           }
+
           templateData = {
             channel,
             accountId,
@@ -961,7 +962,7 @@ export class Creatives extends React.Component {
             accountName: accountDetails?.name || '',
             messageBody: languages[0].content,
             templateConfigs: {
-              id: template?.value?.name,
+              id: template?._id,
               name: template?.value?.name,
               template: templateEditor,
               varMapped,

package/v2Containers/Email/tests/index.test.js

@@ -0,0 +1,35 @@
+import React from "react";
+import { injectIntl } from 'react-intl';
+import '@testing-library/jest-dom';
+import {
+  render,
+} from '../../../utils/test-utils';
+import { EMAILPreviewMockData } from '../mockdata/mockdata';
+import { Email } from "../index";
+
+const initializeComponent = () => {
+  const Component = injectIntl(Email);
+  const resetUploadData = jest.fn();
+  const clearStoreValues = jest.fn();
+  const clearCRUDResponse = jest.fn();
+  const fetchSchemaForEntity = jest.fn();
+
+  return render( <Component
+    {...EMAILPreviewMockData}
+    templatesActions={{resetUploadData}}
+    actions={{
+      clearStoreValues,
+      clearCRUDResponse,
+    }}
+    globalActions={{
+      fetchSchemaForEntity,
+    }}
+    />);
+};
+
+describe('renders a message', () => {
+  it("Test if Email component renders", () => {
+    initializeComponent();
+  });
+});
+