@capillarytech/creatives-library 8.0.259 → 8.0.260-alpha.0

package/v2Components/ErrorInfoNote/style.scss

@@ -1,260 +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;
-    }
-
-    &--warning {
-      color: $CAP_YELLOW;
-    }
-  }
-
-  &__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;
@@ -297,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;
@@ -338,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

@@ -60,7 +60,7 @@ import { GET_TRANSLATION_MAPPED } from '../../constants/unified';
 import moment from 'moment';
 import { CUSTOMER_BARCODE_TAG , COPY_OF, ENTRY_TRIGGER_TAG_REGEX, SKIP_TAGS_REGEX_GROUPS} from '../../constants/unified';
 import { REQUEST } from '../../v2Containers/Cap/constants'
-import { hasLiquidSupportFeature, isEmailUnsubscribeTagMandatory } from '../../utils/common';
+import { isEmailUnsubscribeTagMandatory } from '../../utils/common';
 import { isUrl } from '../../v2Containers/Line/Container/Wrapper/utils';
 import { bindActionCreators } from 'redux';
 import { getChannelData, validateLiquidTemplateContent, validateMobilePushContent } from '../../utils/commonUtils';
@@ -331,7 +331,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
   }
 
   isLiquidFlowSupported = () => {
-    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()) && hasLiquidSupportFeature());
+    return Boolean(LIQUID_SUPPORTED_CHANNELS.includes(this.props?.schema?.channel?.toUpperCase()));
   }
 
   componentWillMount() {
@@ -3971,7 +3971,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                 <CapColumn
                   style={val.colStyle ? val.colStyle : {border : ""}}
                   span={val.width}
-                  className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() && "error-boundary"}  `}
+                  className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() ? "error-boundary" : ""}  `}
                 >
                   <CKEditor
                     id={val.id}
@@ -4015,7 +4015,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               isModuleFilterEnabled = this.props.isFullMode;
             }
             columns.push(
-              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() && "error-boundary"}`}>
+              <CapColumn style={val.colStyle ? val.colStyle : {}} span={val.width} className={`${(this.state.liquidErrorMessage?.LIQUID_ERROR_MSG?.length || this.state.liquidErrorMessage?.STANDARD_ERROR_MSG?.length) && this.liquidFlow() ? "error-boundary" : ""}`}>
                 <BeeEditor
                   uid={uuid}
                   tokenData={beeToken}

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();
+      })
     })
 })