@capillarytech/creatives-library 8.0.242-alpha.10 → 8.0.242-alpha.11

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/constants/unified.js

@@ -45,13 +45,13 @@ export const GIFT_CARDS = 'GIFT_CARDS';
 export const PROMO_ENGINE = 'PROMO_ENGINE';
 export const LIQUID_SUPPORT = 'ENABLE_LIQUID_SUPPORT';
 export const ENABLE_NEW_MPUSH = 'ENABLE_NEW_MPUSH';
-export const SUPPORT_CK_EDITOR = 'SUPPORT_CK_EDITOR';
 export const CUSTOM_TAG = 'CustomTagMessage';
 export const CUSTOMER_EXTENDED_FIELD = 'Customer extended fields';
 export const EXTENDED_TAG = 'ExtendedTagMessage';
 export const BADGES_UI_ENABLED = 'BADGES_UI_ENABLED';
 export const JP_LOCALE_HIDE_FEATURE = 'JP_LOCALE_HIDE_FEATURE';
 export const ENABLE_WECHAT = 'ENABLE_WECHAT';
+export const ENABLE_WEBPUSH = 'ENABLE_WEBPUSH';
 export const ENABLE_CUSTOMER_BARCODE_TAG = 'ENABLE_CUSTOMER_BARCODE_TAG';
 export const EMAIL_UNSUBSCRIBE_TAG_MANDATORY = 'EMAIL_UNSUBSCRIBE_TAG_MANDATORY';
 export const ENABLE_AI_SUGGESTIONS = 'ENABLE_AI_SUGGESTIONS';
@@ -169,7 +169,7 @@ export const JAPANESE_HIDE_DATE_TAGS = [
   "dd.mm.yy",
   "dd Mon",
   "dd/m/yyyy",
-];
+]; 
 
 export const LIQUID_SUPPORTED_CHANNELS = [EMAIL, SMS, MOBILE_PUSH, INAPP];
 

package/initialReducer.js

@@ -15,7 +15,6 @@ import galleryReducer from './v2Containers/Assets/Gallery/reducer';
 import CapCollapsibleLeftNavigationReducer from '@capillarytech/cap-ui-library/CapCollapsibleLeftNavigation/reducer';
 import { AIRA_REDUCER_DOMAIN, askAiraReducer } from '@capillarytech/cap-ui-library/CapAskAira';
 import previewAndTestReducer from './v2Components/TestAndPreviewSlidebox/reducer';
-import inAppReducer from './v2Containers/InApp/reducer';
 
 export const initialReducer = {
   language: languageProviderReducer,
@@ -34,5 +33,4 @@ export const initialReducer = {
   gallery: galleryReducer,
   navigationConfig: CapCollapsibleLeftNavigationReducer,
   previewAndTest: previewAndTestReducer,
-  inApp: inAppReducer,
 };

package/package.json

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

package/services/api.js

@@ -287,6 +287,11 @@ export const createMobilePushTemplateV2 = (template) => {
   return request(url, getAPICallObject('POST', template));
 };
 
+export const createWebPushTemplate = (template) => {
+  const url = `${API_ENDPOINT}/templates/WEBPUSH`;
+  return request(url, getAPICallObject('POST', template));
+};
+
 export const duplicateTemplate = ({id, channel}) => {
   const url = `${API_ENDPOINT}/templates/duplicate/${id}/${channel}`;
   return request(url, getAPICallObject('GET'));
@@ -465,11 +470,6 @@ export const getCmsTemplateSettingsV2 = (cmsType, projectId, cmsMode, langId, is
   return API.get(url);
 };
 
-export const getCmsAccounts = (cmsType) => {
-  const url = `${API_ENDPOINT}/cms/accounts?type=${cmsType}`;
-  return API.get(url);
-};
-
 export const getCmsTemplateData = (cmsType, projectId, langId) => {
   const url = `${API_ENDPOINT}/cms/getContent?type=${cmsType}&projectId=${projectId}&langId=${langId}`;
   return API.get(url);
@@ -725,9 +725,4 @@ export const getAssetStatus = (type, assetId) => {
   return request(url, getAPICallObject('GET'));
 };
 
-export const getBeePopupBuilderToken = () => {
-  const url = `${API_ENDPOINT}/common/getInappTokenData`;
-  return request(url, getAPICallObject('GET'));
-};
-
 export {request, getAPICallObject};

package/services/tests/api.test.js

@@ -26,7 +26,6 @@ import {
   updateMetaConfig,
   getMediaDetails,
   getAssetStatus,
-  getBeePopupBuilderToken,
 } from '../api';
 import { mockData } from './mockData';
 import getSchema from '../getSchema';
@@ -974,20 +973,3 @@ describe('getAssetStatus', () => {
     expect(callArgs[0]).toContain('/assets/video/asset-456/status');
   });
 });
-
-describe('getBeePopupBuilderToken', () => {
-  it('should return correct response', async () => {
-    global.fetch.mockReturnValue(Promise.resolve({
-      status: 200,
-      json: () => Promise.resolve({
-        status: 200,
-        response: 'test',
-      }),
-    }));
-    const result = await getBeePopupBuilderToken();
-    expect(result).toEqual({
-      status: 200,
-      response: 'test',
-    });
-  });
-});

package/translations/en.json

@@ -165,7 +165,7 @@
   "creatives.componentsV2.CapDocumentUpload.imageDimenstionDescription": "Dimensions upto: {width}px x {height}px",
   "creatives.componentsV2.CapDocumentUpload.or": "OR",
   "creatives.componentsV2.CapDocumentUpload.uploadComputer": "Select from computer",
-  "creatives.componentsV2.CapDocumentUpload.whatsappDocSize": "Size upto: {size}",
+  "creatives.componentsV2.CapDocumentUpload.whatsappDocSize": "Size up to: {size}",
   "creatives.componentsV2.CapImageUpload.aspectRatio": "Aspect ratio: 1:1",
   "creatives.componentsV2.CapImageUpload.dragAndDrop": "Drag and drop image here",
   "creatives.componentsV2.CapImageUpload.format": "Format: JPEG, JPG, PNG",
@@ -173,13 +173,13 @@
   "creatives.componentsV2.CapImageUpload.imageErrorDesc": "Please upload the image with allowed file extension, size, dimension and aspect ratio",
   "creatives.componentsV2.CapImageUpload.imageGallery": "Gallery",
   "creatives.componentsV2.CapImageUpload.imageReUpload": "Reupload",
-  "creatives.componentsV2.CapImageUpload.imageSize": "Size upto: 2MB",
+  "creatives.componentsV2.CapImageUpload.imageSize": "Size up to: 2MB",
   "creatives.componentsV2.CapImageUpload.or": "OR",
   "creatives.componentsV2.CapImageUpload.uploadComputer": "Select from computer",
   "creatives.componentsV2.CapImageUpload.uploadGallery": "Gallery",
   "creatives.componentsV2.CapImageUpload.uploadImageDescription": "The relevant image that complements the message context.",
   "creatives.componentsV2.CapImageUpload.whatsappAspectRatio": "Max aspect ratio: 1.91:1",
-  "creatives.componentsV2.CapImageUpload.whatsappImageSize": "Size upto: 5MB",
+  "creatives.componentsV2.CapImageUpload.whatsappImageSize": "Size up to: 5MB",
   "creatives.componentsV2.CapTagList.Cancel": "Cancel",
   "creatives.componentsV2.CapTagList.Ok": "Ok",
   "creatives.componentsV2.CapTagList.all": "All",
@@ -2022,6 +2022,7 @@
   "creatives.containersV2.Whatsapp.vietnamese": "Vietnamese",
   "creatives.containersV2.Whatsapp.whatsappCreateNotification": "{name} has been sent for approval",
   "creatives.containersV2.Whatsapp.zulu": "Zulu",
+  "creatives.containersV2.WebPush.addLabels": "Add labels",
   "creatives.containersV2.addLabels": "Add labels",
   "creatives.containersV2.appName": "App Name",
   "creatives.containersV2.applyNow": "Apply now",

package/utils/common.js

@@ -21,8 +21,8 @@ import {
   EMAIL_UNSUBSCRIBE_TAG_MANDATORY,
   BADGES_ISSUE,
   ENABLE_WECHAT,
+  ENABLE_WEBPUSH,
   LIQUID_SUPPORT,
-  SUPPORT_CK_EDITOR,
   ENABLE_NEW_MPUSH
 } from '../constants/unified';
 import { apiMessageFormatHandler } from './commonUtils';
@@ -96,10 +96,6 @@ export const hasLiquidSupportFeature = Auth.hasFeatureAccess.bind(
   LIQUID_SUPPORT,
 );
 
-export const hasSupportCKEditor = Auth.hasFeatureAccess.bind(
-  null,
-  SUPPORT_CK_EDITOR,
-);
 
 export const hasGiftVoucherFeature = Auth.hasFeatureAccess.bind(
   null,
@@ -121,6 +117,11 @@ export const hasWechatFeatureEnabled = Auth.hasFeatureAccess.bind(
   ENABLE_WECHAT,
 );
 
+export const hasWebPushFeatureEnabled = Auth.hasFeatureAccess.bind(
+  null,
+  ENABLE_WEBPUSH,
+);
+
 export const hasCustomerBarcodeFeatureEnabled = Auth.hasFeatureAccess.bind(
   null,
   ENABLE_CUSTOMER_BARCODE_TAG,

package/utils/commonUtils.js

@@ -398,20 +398,7 @@ export const validateMobilePushContent = async (formData, options) => {
 // Helper function to extract content for a platform
 export const extractContent = (platformData) => {
   if (!platformData) return '';
-  const { title, message, ctas, isBEEeditor, beeHtml } = platformData;
-  
-  // For BEE editor, extract content from beeHtml
-  if (isBEEeditor && beeHtml) {
-    // beeHtml can be an object with value property or a string
-    const beeHtmlContent = typeof beeHtml === 'string' ? beeHtml : (beeHtml?.value || '');
-    return [
-      title,
-      beeHtmlContent,
-      ...((ctas?.map((cta) => cta?.text || cta?.actionLink)) || []),
-    ].filter(Boolean).join(' ');
-  }
-  
-  // For regular content
+  const { title, message, ctas } = platformData;
   return [
     title,
     message,

package/utils/imageUrlUpload.js

@@ -0,0 +1,141 @@
+/**
+ * Utility functions for uploading images from URLs
+ * 
+ * NOTE: CORS-limited; will be replaced with backend implementation.
+ * Flow currently hidden (not removed) from frontend.
+ */
+
+import {
+  DEFAULT_ALLOWED_CONTENT_TYPES,
+  MIME_TYPE_TO_EXTENSION,
+  DEFAULT_IMAGE_EXTENSION,
+} from '../v2Components/CapImageUrlUpload/constants';
+
+/**
+ * Fetches an image from a URL
+ * 
+ * @param {string} url - The image URL to fetch
+ * @returns {Promise<Response>} - The fetch response object
+ * @throws {Error} - If the fetch fails (network/CORS error)
+ */
+export const fetchImageFromUrl = async (url) => {
+  const trimmedUrl = url?.trim() || '';
+  
+  if (!trimmedUrl) {
+    throw new Error('URL is required');
+  }
+
+  // CORS-limited: fails for images without proper CORS headers
+  const response = await fetch(trimmedUrl, {
+    method: 'GET',
+    redirect: 'follow',
+    mode: 'cors',
+  });
+
+  if (!response.ok) {
+    throw new Error(`Failed to fetch image: ${response.status} ${response.statusText}`);
+  }
+
+  return response;
+};
+
+/**
+ * Helper function to upload image from URL
+ * Fetches image, validates content type and size, converts to File, and uploads via uploadAsset
+ * 
+ * @param {string} url - The image URL to upload
+ * @param {Function} formatMessage - React Intl formatMessage function
+ * @param {Object} messages - React Intl messages object
+ * @param {Function} uploadAssetFn - Function to upload the asset (file, type, fileParams)
+ * @param {string} fileNamePrefix - Prefix for the generated file name
+ * @param {number} maxSize - Maximum file size in bytes
+ * @param {string[]} allowedContentTypes - Array of allowed MIME types (defaults to DEFAULT_ALLOWED_CONTENT_TYPES)
+ * @returns {Promise<{success: boolean, error: string}>} - Result object with success status and error message
+ * 
+ * @example
+ * const result = await uploadImageFromUrlHelper(
+ *   'https://example.com/image.jpg',
+ *   formatMessage,
+ *   messages,
+ *   uploadAsset,
+ *   'my-image',
+ *   5000000,
+ *   ['image/jpeg', 'image/png']
+ * );
+ */
+export const uploadImageFromUrlHelper = async (
+  url,
+  formatMessage,
+  messages,
+  uploadAssetFn,
+  fileNamePrefix,
+  maxSize,
+  allowedContentTypes = DEFAULT_ALLOWED_CONTENT_TYPES,
+) => {
+  const trimmedUrl = url?.trim() || '';
+  
+  try {
+    const response = await fetchImageFromUrl(trimmedUrl);
+
+    // Validate Content-Type
+    const contentType = response.headers?.get('Content-Type') || '';
+    const normalizedContentType = contentType.split(';')[0].toLowerCase().trim();
+    
+    if (!allowedContentTypes.includes(normalizedContentType)) {
+      return {
+        success: false,
+        error: formatMessage(messages.imageTypeInvalid),
+      };
+    }
+
+    const blob = await response.blob();
+    
+    if (blob.size > maxSize) {
+      return {
+        success: false,
+        error: formatMessage(messages.imageSizeInvalid),
+      };
+    }
+
+    // Load image to get dimensions and verify validity
+    return new Promise((resolve) => {
+      const img = new Image();
+      const objectUrl = URL.createObjectURL(blob);
+      
+      img.onload = () => {
+        const extension = MIME_TYPE_TO_EXTENSION[normalizedContentType] || DEFAULT_IMAGE_EXTENSION;
+        const fileName = `${fileNamePrefix}.${extension}`;
+        const file = new File([blob], fileName, { type: blob.type });
+        const fileParams = {
+          width: img.width,
+          height: img.height,
+          error: false,
+        };
+        
+        uploadAssetFn(file, 'image', fileParams);
+        URL.revokeObjectURL(objectUrl);
+        
+        resolve({
+          success: true,
+          error: '',
+        });
+      };
+      
+      img.onerror = () => {
+        URL.revokeObjectURL(objectUrl);
+        resolve({
+          success: false,
+          error: formatMessage(messages.imageLoadError),
+        });
+      };
+      
+      img.src = objectUrl;
+    });
+  } catch (error) {
+    return {
+      success: false,
+      error: formatMessage(messages.imageLoadError),
+    };
+  }
+};
+

package/utils/tests/commonUtil.test.js

@@ -1376,228 +1376,4 @@ describe("validateCarouselCards", () => {
       expect(result.isValid).toBe(true);
     });
   });
-
-  describe('extractContent BEE Editor Logic (L404-L412)', () => {
-    it('extracts content from beeHtml as string', () => {
-      const platformData = {
-        title: 'Test Title',
-        isBEEeditor: true,
-        beeHtml: '<p>BEE HTML Content</p>',
-        ctas: [
-          { text: 'Click Here', actionLink: 'https://example.com' },
-        ],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toContain('Test Title');
-      expect(result).toContain('<p>BEE HTML Content</p>');
-      expect(result).toContain('Click Here');
-    });
-
-    it('extracts content from beeHtml as object with value property', () => {
-      const platformData = {
-        title: 'Test Title',
-        isBEEeditor: true,
-        beeHtml: { value: '<p>BEE HTML from Object</p>' },
-        ctas: [
-          { text: 'Button Text' },
-        ],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toContain('Test Title');
-      expect(result).toContain('<p>BEE HTML from Object</p>');
-      expect(result).toContain('Button Text');
-    });
-
-    it('handles beeHtml as object without value property', () => {
-      const platformData = {
-        title: 'Test Title',
-        isBEEeditor: true,
-        beeHtml: { someOtherProperty: 'data' },
-        ctas: [],
-      };
-
-      const result = extractContent(platformData);
-
-      // Should extract title and empty beeHtml (since value is undefined)
-      expect(result).toContain('Test Title');
-      expect(result).not.toContain('someOtherProperty');
-    });
-
-    it('extracts ctas with text property', () => {
-      const platformData = {
-        title: 'Title',
-        isBEEeditor: true,
-        beeHtml: '<p>Content</p>',
-        ctas: [
-          { text: 'CTA Text 1' },
-          { text: 'CTA Text 2' },
-        ],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toContain('CTA Text 1');
-      expect(result).toContain('CTA Text 2');
-    });
-
-    it('extracts ctas with actionLink when text is missing', () => {
-      const platformData = {
-        title: 'Title',
-        isBEEeditor: true,
-        beeHtml: '<p>Content</p>',
-        ctas: [
-          { actionLink: 'https://link1.com' },
-          { actionLink: 'https://link2.com' },
-        ],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toContain('https://link1.com');
-      expect(result).toContain('https://link2.com');
-    });
-
-    it('filters out falsy values with filter(Boolean)', () => {
-      const platformData = {
-        title: '',
-        isBEEeditor: true,
-        beeHtml: null,
-        ctas: [
-          { text: null, actionLink: null },
-          { text: 'Valid Text' },
-        ],
-      };
-
-      const result = extractContent(platformData);
-
-      // Should only contain 'Valid Text' after filtering
-      expect(result).toBe('Valid Text');
-    });
-
-    it('handles empty ctas array', () => {
-      const platformData = {
-        title: 'Title Only',
-        isBEEeditor: true,
-        beeHtml: '<p>BEE Content</p>',
-        ctas: [],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toContain('Title Only');
-      expect(result).toContain('<p>BEE Content</p>');
-    });
-
-    it('handles undefined ctas', () => {
-      const platformData = {
-        title: 'Title',
-        isBEEeditor: true,
-        beeHtml: '<p>Content</p>',
-        ctas: undefined,
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toContain('Title');
-      expect(result).toContain('<p>Content</p>');
-    });
-
-    it('joins all content with spaces', () => {
-      const platformData = {
-        title: 'Title',
-        isBEEeditor: true,
-        beeHtml: 'HTML',
-        ctas: [
-          { text: 'CTA1' },
-          { text: 'CTA2' },
-        ],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toBe('Title HTML CTA1 CTA2');
-    });
-
-    it('falls back to regular content when not BEE editor', () => {
-      const platformData = {
-        title: 'Title',
-        message: 'Message',
-        isBEEeditor: false,
-        beeHtml: '<p>Should be ignored</p>',
-        ctas: [
-          { text: 'CTA' },
-        ],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toContain('Title');
-      expect(result).toContain('Message');
-      expect(result).toContain('CTA');
-      expect(result).not.toContain('<p>Should be ignored</p>');
-    });
-
-    it('handles null beeHtml', () => {
-      const platformData = {
-        title: 'Title',
-        isBEEeditor: true,
-        beeHtml: null,
-        ctas: [{ text: 'CTA' }],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toContain('Title');
-      expect(result).toContain('CTA');
-    });
-
-    it('handles undefined beeHtml', () => {
-      const platformData = {
-        title: 'Title',
-        isBEEeditor: true,
-        beeHtml: undefined,
-        ctas: [],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toBe('Title');
-    });
-
-    it('handles complex ctas with both text and actionLink', () => {
-      const platformData = {
-        title: 'Title',
-        isBEEeditor: true,
-        beeHtml: 'Content',
-        ctas: [
-          { text: 'CTA Text', actionLink: 'https://example.com' },
-        ],
-      };
-
-      const result = extractContent(platformData);
-
-      // Should prefer text over actionLink
-      expect(result).toContain('CTA Text');
-      expect(result).toContain('Title');
-      expect(result).toContain('Content');
-    });
-
-    it('handles empty string beeHtml', () => {
-      const platformData = {
-        title: 'Title',
-        isBEEeditor: true,
-        beeHtml: '',
-        ctas: [{ text: 'CTA' }],
-      };
-
-      const result = extractContent(platformData);
-
-      expect(result).toBe('Title CTA');
-    });
-  });
 });
-

package/utils/transformTemplateConfig.js

@@ -101,6 +101,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
   const contentType = detectMediaContentType(templateConfig);
 
   if (contentType === MEDIA_CONTENT_TYPE.NONE) {
+    console.log('No media content detected, returning original config');
     return templateConfig;
   }
 
@@ -108,19 +109,24 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
   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 })
@@ -139,6 +145,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
       idToUrlMapping[mediaId] = url;
     });
 
+    console.log(`Processing ${Object.keys(urlToIdMapping).length} media mappings`);
 
     // Apply transformations based on direction
     newConfig?.cards?.forEach(card => {
@@ -150,6 +157,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
           // 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}`);
@@ -161,6 +169,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
           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}`);
@@ -176,6 +185,7 @@ export async function transformTemplateConfigWithMediaDetails(templateConfig, ch
     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) {