@capillarytech/creatives-library 8.0.262 → 8.0.264

package/v2Components/ErrorInfoNote/style.scss

@@ -1,256 +1,23 @@
 @import "~@capillarytech/cap-ui-library/styles/_variables.scss";
 
 .error-container {
-  width: 100%;
+  width: max-content;
   margin-bottom: $CAP_SPACE_08;
-  margin-top: -3.143rem;
+  margin-top: $CAP_SPACE_12;
   background-color: $CAP_COLOR_05;
   border-radius: $CAP_SPACE_04;
   padding: $CAP_SPACE_08 $CAP_SPACE_12 $CAP_SPACE_08 $CAP_SPACE_08;
+  gap: $CAP_SPACE_08;
   box-sizing: border-box;
-
-  // New tabbed interface styles
-  &--tabs {
-    padding: 0.5rem 0.75rem;
-  }
-}
-
-// Header with tabs and actions
-.error-info-note {
-  &__header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    width: 100%;
-  }
-
-  &__tabs {
-    flex: 1;
-    
-    // Override Ant Design Tabs styles
-    .ant-tabs-nav {
-      margin-bottom: 0;
-      
-      &::before {
-        border-bottom: none;
-      }
-    }
-
-    .ant-tabs-tab {
-      padding: 0.5rem 0;
-      margin-right: 1.5rem;
-      color: $CAP_G03;
-      font-size: 0.875rem;
-      font-weight: $FONT_WEIGHT_MEDIUM;
-      
-      &:hover {
-        color: $CAP_G01;
-      }
-
-      &.ant-tabs-tab-active {
-        .ant-tabs-tab-btn {
-          color: $CAP_G01;
-          font-weight: 600;
-        }
-      }
-    }
-
-    .ant-tabs-ink-bar {
-      background-color: $CAP_G01;
-      height: 0.125rem;
-    }
-
-    .ant-tabs-content-holder {
-      padding-top: 0.5rem;
-    }
-  }
-
-  &__tab-label {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-  }
-
-  &__tab-count {
-    color: inherit;
-  }
-
-  &__actions {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    flex-shrink: 0;
-    padding-top: 0.5rem;
-  }
-
-  &__liquid-doc {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    color: $CAP_BLUE;
-    font-size: 0.875rem;
-    font-weight: $FONT_WEIGHT_MEDIUM;
-    background: transparent;
-    border: none;
-    cursor: pointer;
-    padding: 0;
-
-    &:hover {
-      color: $CAP_BLUE01;
-    }
-
-    .cap-icon-v2 {
-      margin-left: 0.25rem;
-    }
-  }
-
-  &__close {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.5rem;
-    height: 1.5rem;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    color: $CAP_G03;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: rgba($CAP_G01, 0.1);
-      color: $CAP_G01;
-    }
-
-    .anticon {
-      font-size: 0.875rem;
-    }
-  }
-
-  &__content {
-    max-height: 12.5rem;
-    overflow-y: auto;
-    padding-right: 0.25rem;
-
-    // Custom scrollbar
-    &::-webkit-scrollbar {
-      width: 0.375rem;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background-color: $CAP_G06;
-      border-radius: 0.1875rem;
-
-      &:hover {
-        background-color: $CAP_G04;
-      }
-    }
-  }
-
-  &__item {
-    display: flex;
-    align-items: flex-start;
-    gap: 0.5rem;
-    padding: 0.375rem 0;
-    border-bottom: 1px solid rgba($CAP_G06, 0.3);
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    &--error {
-      .error-info-note__icon--error {
-        color: $CAP_RED;
-      }
-    }
-
-    &--warning {
-      .error-info-note__icon--warning {
-        color: $CAP_YELLOW;
-      }
-    }
-  }
-
-  &__item-icon {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    padding-top: 0.125rem;
-  }
-
-  &__icon {
-    font-size: 0.875rem;
-
-    &--error {
-      color: $CAP_RED;
-    }
-  }
-
-  &__item-content {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: baseline;
-    gap: 0.25rem;
-    font-size: 0.75rem;
-    line-height: 2;
-    color: $CAP_G01;
-  }
-
-  &__item-message {
-    color: $CAP_G01;
-  }
-
-  &__item-location {
-    color: $CAP_G03;
-    white-space: nowrap;
-  }
-
-  &__item-rule {
-    color: $CAP_G04;
-    font-family: monospace;
-    font-size: 0.6875rem;
-  }
-
-  &__item-navigate {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 1.25rem;
-    height: 1.25rem;
-    padding: 0;
-    background: transparent;
-    border: none;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    color: $CAP_G04;
-    transition: all 0.2s ease;
-
-    &:hover {
-      background-color: rgba($CAP_G01, 0.1);
-      color: $CAP_G01;
-    }
-
-    .anticon {
-      font-size: 0.75rem;
-    }
-  }
 }
 
-// Legacy styles (kept for backwards compatibility)
 .error-header {
   width: 100%;
   height: $CAP_SPACE_32;
   display: inline-flex;
   align-items: center;
   justify-content: space-between;
-  font-weight: $FONT_WEIGHT_MEDIUM;
+  font-weight: 500;
 
   .ant-btn.cap-button-v2.flat-btn {
     display: flex;
@@ -293,25 +60,6 @@
   }
 }
 
-// Legacy error list for platform-specific errors
-.error-list-legacy {
-  max-height: 10rem;
-  overflow-y: auto;
-  padding: 0;
-
-  &__item {
-    padding: $CAP_SPACE_04 0;
-  }
-
-  .cap-list-v2-error-item {
-    color: $CAP_G01;
-    font-size: $CAP_SPACE_12;
-    display: flex;
-    margin-left: $CAP_SPACE_04;
-    gap: $CAP_SPACE_04;
-  }
-}
-
 .liquid-divider {
   &.ant-divider.cap-divider-v2 {
     background: $FONT_COLOR_04;
@@ -334,25 +82,5 @@
 
 .error-header-sub-title {
   margin-left: $CAP_SPACE_04;
-  font-weight: $FONT_WEIGHT_MEDIUM;
-}
-
-// Responsive adjustments
-@media (max-width: 768px) {
-  .error-info-note {
-    &__tabs {
-      .ant-tabs-tab {
-        margin-right: 1rem;
-        font-size: 0.8125rem;
-      }
-    }
-
-    &__content {
-      max-height: 10rem;
-    }
-
-    &__item-content {
-      font-size: 0.6875rem;
-    }
-  }
-}
+  font-weight: 500;
+}

package/v2Components/FormBuilder/index.js

@@ -726,7 +726,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
 
         let tagValidationResponse = false;
         if (content) {
-          tagValidationResponse = this.validateTags(content, tags, injectedTags);
+          tagValidationResponse = this.validateTags(content, tags, injectedTags, false, this.props?.isFullMode);
         }
         
         if (tagValidationResponse.valid) {
@@ -764,7 +764,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       if (this.state.formData['message-editor'] !== undefined ) {
         const content = this.state.formData['0']['message-editor'] || '';
         
-        const tagValidationResponse = this.validateTags((content), tags, injectedTags);
+        const tagValidationResponse = this.validateTags((content), tags, injectedTags, false, this.props?.isFullMode);
         
         if (tagValidationResponse.valid) {
           errorData = {
@@ -847,7 +847,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             errorData[index] = true;
             isValid = false;
           } else {
-            const tagValidationResponse = this.validateTags(content, tags, injectedTags);
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags, false, this.props?.isFullMode);
             
             if (tagValidationResponse.valid) {
               errorData[index] = false;
@@ -910,7 +910,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 isCurrentTabValid = false;
               } else {
                 errorData[parseInt(index)][`message-editor${selector}`] = false;
-                const tagValidationResponse = this.validateTags(message, tags, injectedTags);
+                const tagValidationResponse = this.validateTags(message, tags, injectedTags, false, this.props?.isFullMode);
                 
                 if (tagValidationResponse.valid) {
                   errorData[parseInt(index)][`message-editor${selector}`] = false;
@@ -939,7 +939,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 isCurrentTabValid = false;
               } else {
                 errorData[parseInt(index)][`message-title${selector}`] = false;
-                const tagValidationResponse = this.validateTags(title, tags, injectedTags);
+                const tagValidationResponse = this.validateTags(title, tags, injectedTags, false, this.props?.isFullMode);
                 
                 if (tagValidationResponse.valid) {
                   errorData[parseInt(index)][`message-title${selector}`] = false;
@@ -1193,7 +1193,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             if (!content) {
               return false;
             }
-            const tagValidationResponse = this.validateTags(content, tags, injectedTags, isEmail);
+            const tagValidationResponse = this.validateTags(content, tags, injectedTags, isEmail, this.props?.isFullMode);
             
             // Check for base64 images in email content
             isEmail && containsBase64Images({content, callback:()=>{
@@ -1500,7 +1500,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     });
   }
 
-  validateTags(content, tagsParam, injectedTagsParams, isEmail = false) {
+  validateTags(content, tagsParam, injectedTagsParams, isEmail = false, isFullMode = this.props?.isFullMode) {
     const type = (this.props.location && this.props.location.query.type) ? this.props.location.query.type : 'full';
     let currentModule = this.props.location.query.module ? this.props.location.query.module : 'default';
     if (this.props.tagModule) {
@@ -1518,7 +1518,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
     response.isBraceError = false;
     response.isContentEmpty = false;
     const contentForValidation = isEmail ? convert(content, GLOBAL_CONVERT_OPTIONS) : content ;
-    if(tags && tags.length) {
+    if(tags && tags.length && !isFullMode) {
       _.forEach(tags, (tag) => {
         _.forEach(tag.definition.supportedModules, (module) => {
           if (module.mandatory && (currentModule === module.context)) {

package/v2Components/FormBuilder/tests/index.test.js

@@ -10,8 +10,7 @@ import {
     render,
     screen,
     fireEvent,
-    waitFor,
-    act
+    waitFor
   } from '../../../utils/test-utils';
 import { mockData } from './mockData';
 
@@ -36,17 +35,9 @@ describe("test for checkbox form builder",() => {
     it("add action button to notification disabled in ios", async () => {
       const addNotifBtn=screen.getByLabelText("Add action buttons to notification")
       expect(addNotifBtn).toBeDisabled();
-      // Use mouseEnter instead of mouseOver for tooltip, and wait longer for tooltip to appear
-      // Tooltips typically have a delay and are rendered in a portal, so we need to wait for them to appear
-      await act(async () => {
-        fireEvent.mouseEnter(addNotifBtn);
-        // Also trigger mouseOver as some tooltip implementations use both
-        fireEvent.mouseOver(addNotifBtn);
-      });
-      // Wait for tooltip to appear - it might be in a portal, so query document body
+      fireEvent.mouseOver(addNotifBtn);
       await waitFor(() => {
-        const tooltip = screen.getByText("This section is being revamped. Till then it will remain disabled.");
-        expect(tooltip).toBeInTheDocument();
-      }, { timeout: 3000 });
+        expect(screen.getByText("This section is being revamped. Till then it will remain disabled.")).toBeInTheDocument();
+      })
     })
 })