@capillarytech/creatives-library 8.0.273 → 8.0.274

package/package.json

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

package/utils/imageUrlUpload.js

@@ -1,6 +1,6 @@
 /**
  * Utility functions for uploading images from URLs
- *
+ * 
  * NOTE: CORS-limited; will be replaced with backend implementation.
  * Flow currently hidden (not removed) from frontend.
  */
@@ -13,14 +13,14 @@ import {
 
 /**
  * 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');
   }
@@ -42,7 +42,7 @@ export const fetchImageFromUrl = async (url) => {
 /**
  * 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
@@ -51,7 +51,7 @@ export const fetchImageFromUrl = async (url) => {
  * @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',
@@ -73,14 +73,14 @@ export const uploadImageFromUrlHelper = async (
   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,
@@ -89,7 +89,7 @@ export const uploadImageFromUrlHelper = async (
     }
 
     const blob = await response.blob();
-
+    
     if (blob.size > maxSize) {
       return {
         success: false,
@@ -101,7 +101,7 @@ export const uploadImageFromUrlHelper = async (
     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}`;
@@ -111,16 +111,16 @@ export const uploadImageFromUrlHelper = async (
           height: img.height,
           error: false,
         };
-
+        
         uploadAssetFn(file, 'image', fileParams);
         URL.revokeObjectURL(objectUrl);
-
+        
         resolve({
           success: true,
           error: '',
         });
       };
-
+      
       img.onerror = () => {
         URL.revokeObjectURL(objectUrl);
         resolve({
@@ -128,7 +128,7 @@ export const uploadImageFromUrlHelper = async (
           error: formatMessage(messages.imageLoadError),
         });
       };
-
+      
       img.src = objectUrl;
     });
   } catch (error) {
@@ -138,3 +138,4 @@ export const uploadImageFromUrlHelper = async (
     };
   }
 };
+

package/v2Containers/Email/index.js

@@ -26,7 +26,7 @@ import * as globalActions from '../Cap/actions';
 import './_email.scss';
 import {getMessageObject} from '../../utils/messageUtils';
 import EmailPreview from '../../v2Components/EmailPreview';
-import { getDecodedFileName ,hasLiquidSupportFeature} from '../../utils/common';
+import { getDecodedFileName, hasLiquidSupportFeature, hasSupportCKEditor } from '../../utils/common';
 import Pagination from '../../v2Components/Pagination';
 import * as creativesContainerActions from '../CreativesContainer/actions';
 import withCreatives from '../../hoc/withCreatives';
@@ -325,6 +325,7 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     }
     if (nextProps.metaEntities && nextProps.metaEntities.layouts && nextProps.metaEntities.layouts.length > 0 && _.isEmpty(this.state.schema)) {
       const newSchema = this.injectEvents(nextProps.metaEntities.layouts[0].definition);
+      this.applyTabOptionIconVisibility(newSchema);
 
       this.setState({schema: newSchema, loadingStatus: this.state.loadingStatus + 1});
       if (this.props.location.query.module !== 'library' || (this.props.location.query.module === 'library' && this.props.getDefaultTags)) {
@@ -1752,6 +1753,16 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
                 newTabPopoverSection.cols[0].style.display = isDragDrop ? "" : "none";
               }
             });
+            // Hide tab-option-icon (switch editor trigger) when SUPPORT_CK_EDITOR is disabled
+            if (containerInputFieldCol.value && containerInputFieldCol.value.sections) {
+              _.forEach(containerInputFieldCol.value.sections[0].inputFields, (valueInputField) => {
+                _.forEach(valueInputField.cols, (valueCol) => {
+                  if (valueCol.id === 'tab-option-icon') {
+                    valueCol.colStyle = { ...valueCol.colStyle, display: hasSupportCKEditor() ? 'flex' : 'none' };
+                  }
+                });
+              });
+            }
           }
         });
       }
@@ -1760,6 +1771,28 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
     this.setState({schema, isSchemaChanged: true});
   }
 
+  /**
+   * Hides the tab-option-icon (switch editor trigger) in schema when SUPPORT_CK_EDITOR is disabled,
+   * so users cannot switch editor if the feature is not enabled.
+   */
+  applyTabOptionIconVisibility = (schema) => {
+    if (!schema || !schema.containers) return;
+    _.forEach(schema.containers, (container) => {
+      if (!container.isActive || !container.tabBarExtraContent?.sections?.[0]?.inputFields?.[0]?.cols) return;
+      _.forEach(container.tabBarExtraContent.sections[0].inputFields[0].cols, (col) => {
+        if (col.id === 'tab-options-popover' && col.value?.sections?.[0]?.inputFields) {
+          _.forEach(col.value.sections[0].inputFields, (inputField) => {
+            _.forEach(inputField.cols, (c) => {
+              if (c.id === 'tab-option-icon') {
+                c.colStyle = { ...(c.colStyle || {}), display: hasSupportCKEditor() ? 'flex' : 'none' };
+              }
+            });
+          });
+        }
+      });
+    });
+  };
+
   showInsertImageButton = (passedSchema) => {
     const schema = passedSchema || _.cloneDeep(this.state.schema);
     _.forEach(schema.containers, (container) => {