@capillarytech/creatives-library 8.0.261 → 8.0.262-alpha.1

package/package.json

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

package/v2Components/ErrorInfoNote/index.js

@@ -95,7 +95,7 @@ const cleanErrorMessage = (message, lineMatch, charMatch, ruleMatch) => {
  */
 const getSeverityIcon = (severity) => {
   if (severity === SEVERITY.WARNING) {
-    return <CapIcon type="alert-warning" className="error-info-note__icon error-info-note__icon--warning" />;
+    return <CapIcon type="warning" className="error-info-note__icon error-info-note__icon--warning" />;
   }
   return <CapIcon type="warning-circle" className="error-info-note__icon error-info-note__icon--error" />;
 };

package/v2Components/ErrorInfoNote/style.scss

@@ -189,10 +189,6 @@
     &--error {
       color: $CAP_RED;
     }
-
-    &--warning {
-      color: $CAP_YELLOW;
-    }
   }
 
   &__item-content {

package/v2Components/HtmlEditor/components/ValidationPanel/_validationPanel.scss

@@ -198,10 +198,6 @@
       color: #1890ff;
     }
 
-    &--warning {
-      color: #faad14;
-    }
-
     &--security {
       color: #ff4d4f;
     }

package/v2Components/HtmlEditor/components/ValidationPanel/index.js

@@ -84,7 +84,7 @@ const ValidationPanel = ({
   };
 
   // Get icon for issue type
-  // Blocking errors use error-icon, warnings use alert-warning
+  // Blocking errors use error-icon, warnings use warning
   const getIssueIcon = (issue) => {
     const { source, severity } = issue || {};
     if (source === 'security') {
@@ -100,7 +100,7 @@ const ValidationPanel = ({
     if (severity === SEVERITY.INFO) {
       return <CapIcon type="info" className="validation-issue__icon validation-issue__icon--info" />;
     }
-    return <CapIcon type="alert-warning" className="validation-issue__icon validation-issue__icon--warning" />;
+    return <CapIcon type="warning" className="validation-issue__icon validation-issue__icon--warning" />;
   };
 
   // Get source icon

package/v2Components/HtmlEditor/components/ValidationTabs/_validationTabs.scss

@@ -24,7 +24,6 @@
     .cap-tab-v2 {
       .ant-tabs-bar {
         padding: 0.5rem 0.5rem;
-        background-color: $CAP_COLOR_05;
       }
       .ant-tabs-nav {
         margin-bottom: 0;
@@ -43,7 +42,6 @@
         font-weight: 400;
         line-height: 1;
         letter-spacing: 0;
-        background-color: $CAP_COLOR_05;
         border-radius: 0.25rem;
         border-bottom: none; // Remove bottom border
         
@@ -53,7 +51,6 @@
         
         &:hover {
           color: $CAP_COLOR_05;
-          background-color: $CAP_COLOR_05;
         }
 
         &.ant-tabs-tab-active {
@@ -90,7 +87,6 @@
     align-items: center;
     flex-shrink: 0;
     padding-top: 0.5rem;
-    background-color: $CAP_COLOR_05;
   }
 
   &__close {
@@ -107,11 +103,6 @@
     color: $CAP_G03;
     transition: all 0.2s ease;
 
-    // &:hover {
-    //   background-color: rgba($CAP_COLOR_05, 0.1);
-    //   color: $CAP_COLOR_05;
-    // }
-
     .cap-icon-v2 {
       font-size: 0.875rem;
     }
@@ -157,11 +148,18 @@
       .validation-tabs__icon--error {
         color: $CAP_RED;
       }
+      .validation-tabs__item-location,
+      .validation-tabs__item-message {
+        color: $CAP_RED;
+      }
     }
 
     &--warning {
-      .validation-tabs__icon--warning {
-        color: $CAP_YELLOW;
+      .validation-tabs__item-message {
+        color: $CAP_G01;
+      }
+      .validation-tabs__item-location {
+        color: $CAP_G03;
       }
     }
   }
@@ -170,7 +168,6 @@
     flex-shrink: 0;
     display: flex;
     align-items: center;
-    padding-top: 0.125rem;
   }
 
   &__icon {
@@ -179,10 +176,6 @@
     &--error {
       color: $CAP_RED;
     }
-
-    &--warning {
-      color: $CAP_YELLOW;
-    }
   }
 
   &__item-content {
@@ -239,7 +232,6 @@
       .ant-tabs-tab {
         margin-right: 1rem;
         font-size: 0.8125rem;
-        background-color: $CAP_COLOR_05;
       }
     }
 

package/v2Components/HtmlEditor/components/ValidationTabs/index.js

@@ -85,14 +85,14 @@ const isBlockingError = (issue) => {
 
 /**
  * Get icon based on whether issue is blocking error or warning
- * Blocking errors use error-icon, warnings use alert-warning
+ * Blocking errors use error-icon, warnings use warning
  */
 const getSeverityIcon = (issue) => {
   if (isBlockingError(issue)) {
     return <CapIcon type="error-icon" className="validation-tabs__icon validation-tabs__icon--error" />;
   }
   // All other issues (warnings, non-blocking) use warning icon
-  return <CapIcon type="alert-warning" className="validation-tabs__icon validation-tabs__icon--warning" />;
+  return <CapIcon type="warning" className="validation-tabs__icon validation-tabs__icon--warning" />;
 };
 
 /**

package/v2Components/HtmlEditor/utils/validationConstants.js

@@ -19,7 +19,6 @@ export const LABEL_ISSUE_PATTERNS = [
   'tag must be paired',
   'open tag match failed',
   'closed tag match failed',
-  'unclosed',
   'missing required',
   'tag-pair',
   'attr-value-not-empty',

package/v2Containers/CreativesContainer/index.js

@@ -1828,21 +1828,24 @@ export class Creatives extends React.Component {
   // Check if Continue button should be disabled (for new flow only)
   isContinueButtonDisabled = () => {
     const { currentChannel, emailCreateMode, templateNameExists } = this.state;
-    const { isFullMode } = this.props;
+    const { isFullMode, EmailLayout } = this.props;
     const supportCKEditor = commonUtil.hasSupportCKEditor();
     if (supportCKEditor) {
       return false;
     }
     if (currentChannel.toUpperCase() === constants.EMAIL) {
+      // Upload mode: enable when a file has been uploaded (EmailLayout set by ZIP or HTML upload)
+      // Other modes: enable when an editor type is selected (html_editor, drag_drop, editor)
+      const isUploadComplete = emailCreateMode === 'upload' && !isEmpty(EmailLayout);
       const isEditorSelected = !!emailCreateMode && emailCreateMode !== 'upload';
-      // In full mode: require both template name AND editor selection
-      // In library mode: require only editor selection (template name not needed)
+      const canContinue = isUploadComplete || isEditorSelected;
+      // In full mode: require both template name AND (upload complete or editor selected)
+      // In library mode: require only upload complete or editor selection
       if (isFullMode) {
         const isTemplateNameValid = templateNameExists;
-        return !(isTemplateNameValid && isEditorSelected);
+        return !(isTemplateNameValid && canContinue);
       }
-      // Library mode: only editor selection is required
-      return !isEditorSelected;
+      return !canContinue;
     }
     return true;
   }

package/v2Containers/EmailWrapper/components/EmailHTMLEditor.js

@@ -899,8 +899,13 @@ const EmailHTMLEditor = (props) => {
 
               // Handle success response
               if (createResponse && createResponse.templateId) {
-                const successMessage = formatMessage(emailMessages.emailCreateSuccess);
-                CapNotification.success({ message: successMessage, key: 'create-template-success' });
+                const successMessage = formatMessage(
+                  isEditModeForSave ? emailMessages.emailEditSuccess : emailMessages.emailCreateSuccess
+                );
+                CapNotification.success({
+                  message: successMessage,
+                  key: isEditModeForSave ? 'edit-template-success' : 'create-template-success',
+                });
 
                 const module = location?.query?.module || 'default';
                 const type = location?.query?.type;